顯示動態選擇的選項的新選擇

Question

<div class="form-group">
   <label for="options">foo</label>
   <select class="form-control"  name="options" multiple>
     <option value="">-- Choice --</option>
     <option value="opt1">test1</option>
     <option value="opt2">test2</option>
     <option value="opt3">test3</option>
  </select>
</div>
<script type="text/javascript">
  $("#scope_new_system").change(function() {
     var allSelected = new Array();
     $("#scope_new_system option:selected").each(function() {
       allSelected.push(this.value);
     });
  });
</script>

我試圖基於上面多個名為“選項”的多重選擇上選擇的選項動態生成具有不同選項的選擇。 例如，如果我單擊選項測試1，則顯示帶有選項的選擇元素以選擇一個選項。 如果選擇測試2，則會顯示另一個選擇，因為我現在選擇了2個選項。 最后，如果我未單擊測試1，則選擇選項消失了；如果我對測試2進行了同樣的選擇，它也將消失，並且我什么也沒有選擇。 請幫忙！。

Answer 1

這是您需要的嗎？

 $('#selectpicker').multiselect(); $('#selectpicker').on('change',function() { var val = $(this).val(); $('.hidden_slc').hide(); for (x in val) { $('#based'+val[x]).show(); } }) 

 <style> .hidden_slc { display: none; } </style> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet"/> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script> <select id="selectpicker" multiple> <option value='1'>tes1</option> <option value='2'>tes2</option> <option value='3'>tes3</option> </select> <select id="based1" class='hidden_slc'> <option>sample_from_1</option> <option>sample</option> </select> <select id="based2" class='hidden_slc'> <option>sample_from_2</option> <option>sample</option> </select> <select id="based3" class='hidden_slc'> <option>sample_from_3</option> <option>sample</option> </select> 

Answer 2

您可以使用它。

 var allSelected = []; $("#scope_new_system").on("change",function() { var allSelected = new Array(); $("#scope_new_system option:selected").each(function(){ allSelected.push(this.value); }); console.log(allSelected) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div class="form-group"> <label for="options">foo</label> <select id="scope_new_system" class="form-control" name="options" multiple> <option value="">-- Choice --</option> <option value="opt1">test1</option> <option value="opt2">test2</option> <option value="opt3">test3</option> </select> </div> 

Answer 3

正如我所指出的 那樣，兩個select s之間的關系只是用來顯示/隱藏它？ 或select 2個值取決於select 1個值？ 我沒明白這一點

但是請確保您的第一步是：使用$("option:selected" , this).length;檢查option:selected長度$("option:selected" , this).length; 或$(this).find("option:selected").length;

 $("#scope_new_system").change(function() { var allSelected = [], num_of_selected_option = $("option:selected" , this).length; if(num_of_selected_option == 0){ // if nothing selected alert('Nothing Selected'); }else if(num_of_selected_option == 1){ // if just one selected allSelected = [this.value]; alert('Just one value selected : '+allSelected); }else if(num_of_selected_option > 1){ // if more than one selected $("option:selected" , this).each(function(){ allSelected.push(this.value); }); alert('Selected Values : '+allSelected); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <label for="options">foo</label> <select id="scope_new_system" class="form-control" name="options" multiple> <option value="">-- Choice --</option> <option value="opt1">test1</option> <option value="opt2">test2</option> <option value="opt3">test3</option> </select> </div>