jquery - dynamically changing selectbox -

jquery - dynamically changing selectbox -

this question has reply here:

use jquery alter sec select list based on first select list option 5 answers

i have 2 selectbox.

first 1 contains big category , , sec 1 contains little category countries , cities.

america carifornia,ny,sandiego china beijing, shanghai state of japan tokyo, oosaka

first selectbox

<select name=countries> <option value=america>america</option> <option value=china>china</option> <option value=japan>japan</option> </select>

second selectbox

<select name=usacities> <option value=carifornia>carifornia</option> <option value=ny>ny</option> <option value=sandiego>sandiego</option> </select>

now alter sec select box dynamically according first select box.

useing jquery best way create this??

at time should alter select box including select tag? or should maintain info somwhere , alter data?

try : set class attribute sec select box same value country select box. set class="america" sec select box , on other countries values , select boxes. add together 1 more class "cities" cities select box. utilize below code -

html :

<select name=countries> <option value=america>america</option> <option value=china>china</option> <option value=japan>japan</option> </select> <select name=chinacities class="america cities"> <option value=carifornia>carifornia</option> <option value=ny>ny</option> <option value=sandiego>sandiego</option> </select> <select name=usacities class="china cities"> <option value=china1>china1</option> </select> <select name=japancities class="japan cities"> <option value=japan1>japan1</option> </select>

jquery :

$(function(){ // hide city select boxes $('.cities').hide(); //make default selected country's city visible $('.' + $('select[name=countries]').val() ).show(); $('select[name=countries]').change(function(){ // hide city select boxes $('.cities').hide(); //show city select box selected country var selectedcountry = $(this).val(); $('.' + selectedcountry ).show(); }); });

jsfiddle demo

jquery html5