Change value of form selector affected by jQuery.selectBox Plugin
I have autocomplete on form url. when the user clicks on this offer, the status and postal code information is automatically filled in. cp_state is a select box with a dropdown list of state names, while cp_zipcode is the input text for the zip code.
I am using the javascript code below to accomplish the task of updating values and disconnecting.
$('#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 above code works for entering the zipcode, which as soon as the user selects the address, the zipcode is populated and disabled to avoid modification, unfortunately it doesn't work for the state selectbox, not sure why, but I think maybe jquery.selectBox .min.js? ver = 1.2.0 the plugin does affect the task as it automatically hides the cp_state selection and adds a new style, although not sure what it does.
HTML 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 this be fixed, I need to automatically change the value of the selectbox after the autocomplete selection. I really appreciate your help.
source to share
jquery selectBox
will automatically hide your select element and create a
with ul
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');
source to share