javascript - 受 jquery.selectBox 插件影响的表单选择框的更改值

Question

我在地址表单输入上有自动完成功能。当用户点击建议时，州和邮政编码信息会自动填充。cp_state 是带有状态名称下拉列表的选择框，而cp_zipcode 是邮政编码的输入文本。

我使用下面的 javascript 代码来执行更新值和禁用它的任务。

$('#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;

上面的代码适用于邮政编码输入，一旦用户选择一个地址，邮政编码就会被填充并禁用以避免修改，不幸的是它不适用于状态选择框，不知道为什么但我认为可能 jquery.selectBox.min.js?ver=1.2.0 插件正在影响任务，因为它会自动隐藏 cp_state 选择框并添加新样式，但不确定它在做什么。

表单字段的 HTML

<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" />

谁能解决这个问题，我需要在自动完成选择后自动更改选择框的值。非常感谢您的帮助。

Answer 1

jquery selectBox 将自动隐藏您的选择元素并创建 a 并显示 ul 列表。将上面的代码替换为

$('#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');