Question

想在select3中添加optgroup。怎么样？

<select id="select1" class="form-control" onchange="myFunction()"> 
</select> 
<select id="select2">
<option value="none" selected="selected">Select </option>
</select>
<select id="select3">
<option value="none" selected="selected">Select</option>
</select>

<br>
opt3 optGroup like this :

<select id="select3">
    <optgroup label="area1">
       <option value="0">OptBA A</option>
       <option value="1">ObtBA B</option>
       <option value="2">OptBA C</option>
    </optgroup>
     <optgroup label="area2">
       <option value="0">OptBA A</option>
       <option value="1">ObtBA B</option>
       <option value="2">OptBA C</option>
      </optgroup>
 </select>

在这里显示Jquery https://jsfiddle.net/b1jwrL37/

Answer 1

您可以使用解决方案https://jsfiddle.net/b1jwrL37/2/

var opt1 = ['main A', 'main B', 'main C'],
    opt2 = [ 
   ['main A A', 'main A B', 'main A C'],
    ['main B A', 'main B B', 'main B C'],
     ['main C A', 'main C B', 'main C C'],
					 ],
    opt3 = [
      [ 
      //<optgroup label="Swedish Cars"></optgroup> 
        ['OptAA Area1', 'ObtAA B', 'OptAA C'],
        ['OptAB A', 'ObtAB B', 'OptAB C'],
        ['OptAC A', 'ObtAC B', 'OptAC C'],
      ], 
      [
        ['OptBA A', 'ObtBA B', 'OptBA C'],
        ['OptBB A', 'ObtBB B', 'OptBB C'],
        ['OptBC A', 'ObtBC B', 'OptBC C'],
      ],
      
      [
        ['OptCA A', 'ObtCA B', 'OptCA C'],
        ['OptCB A', 'ObtCB B', 'OptCB C'],
        ['OptCC A', 'ObtCC B', 'OptCC C'],

      ]
    ];
var selectedIndex = 0;
jQuery(document).ready(function() {
  
  // populating the dropdowns when the page loads...
  jQuery.each(opt1, function(i, e) { jQuery('#select1').append('<option value="'+i+'">'+e+'</option>'); });
  jQuery.each(opt2[0], function(i, e) { jQuery('#select2').append('<option value="'+i+'">'+e+'</option>'); });
  jQuery.each(opt3[0][0], function(i, e) { jQuery('#select3').append('<option value="'+i+'">'+e+'</option>'); });
  
  // click events
  jQuery('body').on('change', '#select1', function() {
    jQuery('#select2').empty();
    jQuery('#select3').empty();
    
    selectedIndex = jQuery(this).prop('selectedIndex');
    
    jQuery.each(opt2[jQuery('#select1').val()], function(i, e) {
      jQuery('#select2').append('<option value="'+i+'">'+e+'</option>');
    });
    jQuery('#select3').append('<optgroup label="area ' + (selectedIndex + 1) + '" />')
    jQuery.each(opt3[jQuery('#select1').val()][jQuery('#select2').val()], function(i, e) {
      jQuery('#select3 > optgroup').append('<option value="'+i+'">'+e+'</option>');
    });
  });
  jQuery('body').on('change', '#select2', function() {
    jQuery('#select3').empty();
    selectedIndex = jQuery(this).prop('selectedIndex');
    jQuery('#select3').append('<optgroup label="area ' + (selectedIndex + 1) + '" />')
    jQuery.each(opt3[jQuery('#select1').val()][jQuery('#select2').val()], function(i, e) {
      jQuery('#select3 > optgroup').append('<option value="'+i+'">'+e+'</option>');
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1" class="form-control"> </select> 
<select id="select2">
  <option value="none" selected="selected">Select </option>
</select>
<select id="select3">
  <option value="none" selected="selected">Select</option>
</select>

<br>
opt3 optGroup like this :

<select id="select3">
  <optgroup label="area1">
    <option value="0">OptBA A</option>
    <option value="1">ObtBA B</option>
    <option value="2">OptBA C</option>
  </optgroup>
  <optgroup label="area2">
    <option value="0">OptBA A</option>
    <option value="1">ObtBA B</option>
    <option value="2">OptBA C</option>
  </optgroup>
</select>

希望这会对你有所帮助。

多层次选择jQuery的optgroup

1 个答案: