jquery - How to change a seleclist options from another selectlist? -


i have 2 seleclists. want filter second selectlist options first select list.

here code:

$(document).ready(function() {     $('#sehir').change(function() {         var sehir = $(this).find('option:selected').text();         var options = $('#ilce').filter('[label=' + sehir + ']');         $('#ilce').html(options);     }); }); 

and first selectlist:

<select name="sehirid" id="sehir" class="form-control">     <option value="1">option 1</option>     <option value="2">option 2</option>     <option value="3">option 3</option> </select> 

second selectlist:

<select name="ilceid" id="ilce" class="form-control">     <optgroup label="option 1">         <option parent="option 1" value="1">option 1</option>         <option parent="option 1" value="2">option 2</option>         <option parent="option 1" value="3">option 3</option>     </optgroup>     <optgroup label="option 2">         <option parent="option 2" value="1">option 1</option>         <option parent="option 2" value="2">option 2</option>         <option parent="option 2" value="3">option 3</option>     </optgroup>     <optgroup label="option 3">         <option parent="option 3" value="1">option 1</option>         <option parent="option 3" value="2">option 2</option>         <option parent="option 3" value="3">option 3</option>     </optgroup> </select> 

but code not working. what's wrong?

two issues; firstly filter() should find() you're searching child elements of #ilce element. secondly, need wrap value in attribute selector in quotes. try this:

$('#sehir').change(function() {     var sehir = $(this).find('option:selected').text();     var options = $('#ilce').find('optgroup[label="' + sehir + '"]');     $('#ilce').html(options); }); 

example fiddle

note work once, remove other options groups after first selection. if want able change selection, can disable other optgroup elements, this:

$('#sehir').change(function() {     var sehir = $(this).find('option:selected').text();     var optgroup = $('#ilce').find('optgroup[label="' + sehir + '"]');     $('#ilce').find('optgroup').prop('disabled', false).not(optgroup).prop('disabled', true); }); 

example fiddle


Comments

Popular posts from this blog

python - pip install -U PySide error -

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -