Question

In onchange event is not working in jquery.selectbox-05, i am using two dropdown box one for country another one state if i select the country the state will pickup automatically it’s work in normal php dropdown but i use this code in jquery.selectbox it’s not working anybody will help me

Here my code

<script type="text/javascript" src="scripts/jquery.selectbox-0.5.js"></script>
<script type= "text/javascript" src = "scripts/countries2.js"></script>
$(document).ready(function(){
    $('.selectBoxMedium').selectboxMedium();
    $('.selectBoxSmall').selectboxSmall();
    $('.selectBoxSmallest').selectboxSmallest();
    $('.selectBox').selectbox();
    $(document).pngFix(); 
});
<p class="formInput formSelectBox">
    <select onchange="print_state1('state',this.selectedIndex);" id="country" class= "selectBox data" name ="country"></select>
</p>

<p class="formInput formSelectBox">
    <select name ="state" id ="state" class="selectBox"></select>
    <script language="javascript">print_country1("country");</script>
</p>

Javascript functions:

function print_country1(country_id) {
    // given the id of the <select> tag as function argument, it inserts <option> tags
    var option_str = document.getElementById(country_id);
    var x, i=0;
    for(x in country_arr){
        option_str.options[i++] = new Option(country_arr[x],country_arr[x]);
    }
}

function print_state1(state_id, state_index) {
    var option_str = document.getElementById(state_id);
    var x, i=0;
    state_index++;
    var state_arr = s_a[state_index].split("|");
    for(x in state_arr) {
        option_str.options[i++] = new Option(state_arr[x],state_arr[x]);
    }
}

Answer 1

Here’s your problem… this plugin don’t handle with dynamic options. I mean, when you do $element.selectbox() the plugin executes with the actual options for the select element and will not update the selectbox if you changes the options.

So, if you have a select element with no options and run the selectbox plugin, it will create a selectbox with no options elements. When you changes the country and do a “reload” in the options for select#states, all the states for the selected country are loaded and added as options for select#states element, but the plugin selectbox was executed in page load and will not reload the options in their elements 🙁

How to fix it? In your case, you should be able to remove the siblings of select#state (generated by selectbox plugin), update the options with new state values and then run again the selectbox plugin 🙂

Check this functional jsfiddle 🙂

PS: this fiddle is working with countries-3.1.js, the jquery.selectbox-0.5 and no CSS