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); });
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); });
Comments
Post a Comment