Muti-Level Wählen Sie optgroup von jQuery

Question

möchten optgroup in select3 hinzufügen. Wie geht das?

<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> 

anzeigen JQuery hier https://jsfiddle.net/b1jwrL37/

Answer 1

Hier können Sie mit einer Lösung gehen 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'], 
 
\t \t \t \t \t ], 
 
    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>

Hope this Ihnen helfen.