jquery - hide and display select tag by toggling other select tag -
i want display select option tag based on first selected option. here working demo
<select id="main"> <option>all</option> <option clas="first_opt">first</option> <option class="second_opt">second</option> <option class="third_opt">third</option> </select> <select id="sub_first" class="sub"> <option>sub 1</option> <option>sub 1</option> </select> $(".sub").hide(); $("#main").change(function() { var val = $(this).val(); $(".sub").hide(); if( val ) { $("#sub_" + val).show(); } })
but dont think perfect coding because example, if value of main select option contains 2 or more 1 letter such "first opt" code doesnt work anymore. think better if can class value of main option instead. couldn't make works. please help
`
your code working because of haven't added value
attribute in option
. $(this).val()
returning option text value
made changes in markup value attribute added in option
: demo
<select id="main"> <option>all</option> <option class="first" value="first">first opt</option><!--value added--> <option class="second" value="second">second opt</option><!--value added--> <option class="third" value="third">third opt</option><!--value added--> </select> <select id="sub_first" class="sub"> <option>sub 1</option> <option>sub 1</option> </select> <select id="sub_second" class="sub"> <option>sub 2</option> <option>sub 2</option> </select> <select id="sub_third" class="sub"> <option>sub 3</option> <option>sub 3</option> </select>
Comments
Post a Comment