javascript - Issue with SelectBox (country/state) -

i got problem. i've tried selectbox using boostrap form helpers.(http://js.nicdn.de/bootstrap/formhelpers/docs/state.html)

so got selectbox "country" , other "state"

<select id="countries" class="form-control bfh-countries"></select> <select id="states" class="form-control bfh-states" data-country="countries"></select> 

if choose value form country box states appears in states box, ok.

but if use script

<button onclick="test()" class="btn">load country</button>  function test(){             document.getelementbyid('countries').value = "au";         } 

nothing appends on "states" selectbox, should states of country selected function test() right ?

what can fix ?

http://jsfiddle.net/xf8ech7k/1/

thanks in advance

the problem there aren't triggerent "change" event.

take @ modified code

function test(){      var select = document.getelementbyid('countries')      , event = document.createevent("uievents");      select.value = "au";      event.inituievent("change", true, true);      select.dispatchevent(event);  }

then, take @ post

as @cbroe says, can in simpler way doing:

$("select").val("au").trigger("change");