Change Value of a Form Selectbox Affected by jquery.selectBox Plugin

Question

I have autocomplete on address form input. when the user clicks on the suggestion, the state and zip-code information is automatically populated. cp_state is select-box with a dropdown-list of state names while cp_zipcode is an input text for postcode.

I use the javascript code below to perform the task of updating the values and disabling it.

$('#cp_zipcode').val(data.postcode);
document.getElementById("cp_zipcode").value = data.postcode;
document.getElementById("cp_zipcode").disabled=true;

document.getElementById("cp_state").value = data.state;
$('#cp_state').val(data.state); 
$('#cp_state').change();
document.getElementById("cp_state").disabled=true;

The code above works for the zipcode input which as soon as user selects an address, the zipcode is populated and disabled to avoid modification, unfortunaley it doesn't work for state selectbox, not sure why but i think maybe the jquery.selectBox.min.js?ver=1.2.0 plugin is affecting the task, since it automatically hides the cp_state selectbox and adds a new styling, though not sure what its doing.

HTML of Form Fields

<input value="" name="cp_address" id="cp_address" type="text" class="text" placeholder="" />

<select name="cp_state" id="cp_state" class="dropdownlist required">
    <option value="">-- Select --</option>
    <option value="All State">All State</option>
    <option value="Johor">Johor</option>
    <option value="Kedah">Kedah</option>
    <option value="Kelantan">Kelantan</option>
    <option value="Wilayah Persekutuan Kuala Lumpur">Wilayah Persekutuan Kuala Lumpur</option>
    <option value="Wilayah Persekutuan Labuan">Wilayah Persekutuan Labuan</option>
    <option value="Melaka">Melaka</option>
    <option value="Negeri Sembilan">Negeri Sembilan</option>
    <option value="Pahang">Pahang</option>
    <option value="Wilayah Persekutuan Putra Jaya">Wilayah Persekutuan Putra Jaya</option>
    <option value="Perlis">Perlis</option>
    <option value="Pulau Pinang">Pulau Pinang</option>
    <option value="Perak">Perak</option>
    <option value="Sabah">Sabah</option>
    <option value="Selangor">Selangor</option>
    <option value="Sarawak">Sarawak</option>
    <option value="Terengganu">Terengganu</option>
</select>

<input value="57000" name="cp_zipcode" id="cp_zipcode" type="text" class="text" placeholder="Enter zipcode" />

Can someone fix this, I need to change the value of selectbox automatically after autocomplete selection. I will truly appreciate your help.

Answer 1

jquery selectBox will automatically hide your select element and create a with ul list as display. replace your code above with

$('#cp_zipcode').val(data.postcode);
$('#cp_zipcode').attr('disabled', true);

// set value
$('#cp_state').selectBox('value', data.state);

// 'enable' or 'disable` control
$('#cp_state').selectBox('disable');