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>

我正在尝试根据在上面选择的多个选项中选择的选项动态生成具有不同选项的选项。例如，如果我单击选项test 1，则会显示带有选项的select元素以选择一个选项。如果我选择测试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之间的关系只是为了显示/隐藏它？或select 2个值取决于select 1个值？我没有得到那一点

但请确保您的第一步是：使用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>

显示动态选择的选项的新选择jquery

3 个答案: