Как мультивычислить динамически заполненное раскрывающееся меню на основе другого значения выпадающего списка

Question

Как мультивычислить динамически заполненное раскрывающееся меню на основе другого значения выпадающего списка?

У меня есть 2 выпадающих списка на странице. Второй выпадающий список будет пустым в первом экземпляре. Когда вы выберете значения в первом выпадающем меню и, основываясь на этих значениях, будет доступно второе раскрывающееся меню. Теперь я хочу, чтобы выпадающее меню было выбрано как Multi-select.

var mealsByCategory = { 
 
    A: ["Soup", "Juice", "Tea", "Others"], 
 
    B: ["Soup", "Juice", "Water", "Others"], 
 
    C: ["Soup", "Juice", "Coffee", "Tea", "Others"] 
 
} 
 

 
    function changecat(value) { 
 
     if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>"; 
 
     else { 
 
      var catOptions = ""; 
 
      for (categoryId in mealsByCategory[value]) { 
 
       catOptions += "<option>" + mealsByCategory[value][categoryId] + "</option>"; 
 
      } 
 
      document.getElementById("category").innerHTML = catOptions; 
 
     } 
 
    }

<select name="meal" id="meal" onChange="changecat(this.value);"> 
 
    <option value="" disabled selected>Select</option> 
 
    <option value="A">A</option> 
 
    <option value="B">B</option> 
 
    <option value="C">C</option> 
 
</select> 
 
<select name="category" id="category"> 
 
    <option value="" disabled selected>Select</option> 
 
</select>

ли кто-нибудь имеет ни малейшего представления о том, как я могу получить это?

Answer 1

Если вы хотите идти прямо на пути JavaScript, единственное, что вам нужно сделать, это изменить свой второй select к (например, <select multiple>), а затем захватить выбранные значения ...

Однако, чтобы сделать его более удобным для обслуживания, а также включать подход к флажку, вы можете создать свой собственный способ установить их динамически (и там есть много способов добраться туда). Давайте посмотрим:

var mealsByCategory = { 
 
    A: ["Soup", "Juice", "Tea", "Others"], 
 
    B: ["Soup", "Juice", "Water", "Others"], 
 
    C: ["Soup", "Juice", "Coffee", "Tea", "Others"] 
 
}; 
 

 
function changecat(value) { 
 
    if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>"; 
 
    else { 
 
    var catOptions = ""; 
 
    for (categoryId in mealsByCategory[value]) { 
 
    \t var category = mealsByCategory[value][categoryId]; 
 
     catOptions += "<label><input type='checkbox' name='categories' value='" + category + "' onclick='checkOptions()'>" 
 
     \t + category + "</input></label>"; 
 
    } 
 
    document.getElementById("checkboxes").innerHTML = catOptions; 
 
    } 
 
} 
 

 
var expanded = false; 
 

 
function showCheckboxes() { 
 
    var checkboxes = document.getElementById("checkboxes"); 
 
    if (!expanded) { 
 
    checkboxes.style.display = "block"; 
 
    expanded = true; 
 
    } else { 
 
    checkboxes.style.display = "none"; 
 
    expanded = false; 
 
    } 
 
} 
 

 
function checkOptions() { 
 
    els = document.getElementsByName('categories'); 
 
    var selectedChecks = "", qtChecks = 0; 
 
    for (i = 0; i < els.length; i++) { 
 
    \t if (els[i].checked) { 
 
     if (qtChecks > 0) selectedChecks += ", " 
 
\t selectedChecks += els[i].value; 
 
     qtChecks++; 
 
    } 
 
    } 
 
    
 
    if(selectedChecks != "") { 
 
    document.getElementById("defaultCategory").innerText = selectedChecks; 
 
    } else { 
 
    document.getElementById("defaultCategory").innerText = "Select an option"; 
 
    } 
 
}

div.multiselect, select#meal, button { 
 
    margin: 5px; 
 
} 
 

 
.multiselect { 
 
    width: 200px; 
 
} 
 

 
.selectBox { 
 
    position: relative; 
 
} 
 

 
.selectBox select { 
 
    width: 100%; 
 
    font-weight: bold; 
 
} 
 

 
.overSelect { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
} 
 

 
#checkboxes { 
 
    display: none; 
 
    border: 1px #dadada solid; 
 
} 
 

 
#checkboxes label { 
 
    display: block; 
 
} 
 

 
#checkboxes label:hover { 
 
    background-color: #1e90ff; 
 
}

<select name="meal" id="meal" onchange="changecat(this.value);"> 
 
    <option value="" disabled selected>Select</option> 
 
    <option value="A">A</option> 
 
    <option value="B">B</option> 
 
    <option value="C">C</option> 
 
</select> 
 

 
<div class="multiselect"> 
 
    <div class="selectBox" onclick="showCheckboxes()"> 
 
    <select name="category" id="category"> 
 
     <option id="defaultCategory">Select an option</option> 
 
    </select> 
 
    <div class="overSelect"></div> 
 
    </div> 
 
    <div id="checkboxes"></div> 
 
</div>

Смотрите, что я просто адаптировать свой пост, чтобы @vitfo решение (см оригинальный пост here), поэтому не забудьте пополнить его тоже, если он вам подходит.

Кроме того, у нас есть куча других возможностей для обработки мультиселекций с помощью флажков с использованием плагинов вместо , удобный для использования. Отличным примером для этого является Multiple Select library, который легко делает то же самое.

Answer 2

Вы можете использовать плагин JQuery, который обеспечивает эту функцию, вместо того чтобы развивать его самостоятельно: https://github.com/dnasir/jquery-cascading-dropdown