jQuery：无法从生成的下拉列表中选择 val=''

Question

我有以下 JS 用于生成省/州的下拉列表：

var populateList = function (list, element) {
    element.append("<option val=''>Select...</option>")
    list.forEach(function (val) {
        element.append("<option val=" + val[0] + ">" + val[1] + "</option>");
    })
}

var canProvinces = [
    ['ON', 'Ontario'],
    ['QC', 'Quebec'],
    ['NS', 'Nova Scotia'],
    ['NB', 'New Brunswick'],
    ['MB', 'Manitoba'],
    ['BC', 'British Columbia'],
    ['PE', 'Prince Edward Island'],
    ['SK', 'Saskatchewan'],
    ['AB', 'Alberta'],
    ['NL', 'Newfoundland and Labrador'],
    ['NT', 'Northwest Territories'],
    ['YT', 'Yukon'],
    ['NU', 'Nunavut']];

我正在努力的想法是，当用户在表单中切换国家/地区时，系统可以在用户切换国家/地区时使用populateList() 切换到新列表。然后我使用 jQuery 将省份缩写放在一个隐藏的输入字段中。这是表单中的代码：

<script src="list-of-provices/states-from-above.js"></script>

<input id="UserCountry" value="CA" type="text" /> <!-- to be converted to dropdown when issue resolves -->

<select id="province-select" name="province-select"></select>

<input id="Province" type="hidden"/>

<script>
$(document).ready(function () {

   if ($('#UserCountry').val() == 'CA') {
            populateList(canProvinces, $("#province-select"));
        } else if ($('#UserCountry').val() == 'US') {
            populateList(usaStates, $("#province-select"));
        }

    $('#province-select').bind('input propertychange', function () {

           //something wrong here? Returns full name, not 2 letter abbreviation.
           console.log($("#province-select").val())

           $('#Province').val($("#province-select").val())
        })
});
</script>

我还没有进入国家切换部分，因为尽管我已经尝试了一切，$("#province-select").val() 从下拉列表中返回文本，而不是值。我一直无法找到原因。下面是代码生成的 HTML：

<select id="province-select" name="province-select">
   <option val="">Select...</option>
   <option val="ON">Ontario</option>
   <option val="QC">Quebec</option>
   <option val="NS">Nova Scotia</option>
   <option val="NB">New Brunswick</option>
   <option val="MB">Manitoba</option>
   <option val="BC">British Columbia</option>
   <option val="PE">Prince Edward Island</option>
   <option val="SK">Saskatchewan</option>
   <option val="AB">Alberta</option>
   <option val="NL">Newfoundland and Labrador</option>
   <option val="NT">Northwest Territories</option>
   <option val="YT">Yukon</option>
   <option val="NU">Nunavut</option>
</select>

我有什么遗漏吗？ $("#province-select").val() 应该从下拉列表中返回 val=""，但对我来说它返回文本。

有什么想法吗？

Answer 1

您的代码中有一个小错误。用于设置选项值的属性是value 而不是val。替换你的

element.append("<option val=" + val[0] + ">" + val[1] + "</option>");

与

element.append("<option value='" + val[0] + "'>" + val[1] + "</option>");

你很好。