onboot事件，用于下载bootstrap multiselect

Question

i have one div for duel multiselect of provinces list which when i click on every option it is moved to another box(user can select several provinces). and another div for duel multiselect of districts.

    <div>
        <select multiple class="multiselect" id="province" name="province">  
            <?PHP foreach($provinces->result() as $province){ ?>
                 <option value="<?=$province->id?>"><?=$province->name?></option>
            <?PHP } ?>  
       </select> 
    </div>
    <div id="district_div">
        <select multiple class="multiselect" id="district" name="district" >  
        </select>
    </div>  

the list of province is correct and user can select multi provinces. but what i need is an onchange in province select tag to bring the districts of selected province and put them in district_div. i have the ajax for onchange to bring the districts:

    function bring_page(page,name,id,divname,str)
{
     var dropdownIndex = document.getElementById(name).selectedIndex;
     var dropdownValue = document.getElementById(name)[dropdownIndex].value;
     var url=page;
     var params='&'+id+'='+dropdownValue+'&'+str;

     //call ajax 
     makerequest_sp(url, params, divname);
}

the function bring_page is correct and work for normal select. i think the problem is with bootstrap. i am using plugins of bootstrap.

thanks for help

Answer 1

You need to get the values of the options in a loop because you will have multiple. I don't know how your backend is expecting the data, but something like this could work.

function bring_page(page, name, id, divname, str) {
     var url=page;
     var params = "&" + id +"=";

     var dropdown = document.getElementById(name);
     var options  = dropdown.options;
     var values = [];
     for (var i = 0; i < options.length; i++) {
        if (options[i].selected) {
            values.push(options[i].value);
        }
     }

     params += values.join(",");


     //call ajax 
     makerequest_sp(url, params, divname);
}