动态填充的选择列表

Question

我有 2 个选择列表，我想根据第一个列表的选择填充第二个列表中的选项。

这是第一个列表：

<select class="" id="applicationForm_package">
    <option value="no_package">Please select a package</option>
    <option package_identifier="package_5" value="5">Package 1</option>
    <option package_identifier="package_60" value="60">Package 2</option>
    <option package_identifier="package_58" value="58">Package 3</option>
    <option package_identifier="package_55" value="55">Package 4</option>
</select>

然后我有（在 javascript 中）和第一个列表中每个包的变量：

<script>
    var package_5 = "<option value='20'>1 Month</option><option value='110'>6 Months</option><option value='200'>12 Months</option>";
    var package_60 = "<option value='25'>1 Month</option><option value='140'>6 Months</option><option value='250'>12 Months</option>";
    var package_58 = "<option value='26'>1 Month</option><option value='146'>6 Months</option><option value='270'>12 Months</option>";
    var package_55 = "<option value='37'>1 Month</option><option value='212'>6 Months</option><option value='400'>12 Months</option>";
</script>

当用户与第一个选择列表交互时，我希望各个变量中的选项填充第二个列表。

下面是第二个选择和我写的 javascript。一切似乎都很好，问题是第二个选择列表没有更新。在我的 else 语句中，控制台正在工作，但是当我在控制台中检查它时未定义该变量。

<select id="applicationForm_subscription">
    <option value="no_package_selected">Please select a package First</option>
</select>

<script>
var noPackageSelected = "<option value='no_package_selected'>Please select a package</option>";
jQuery( "select#applicationForm_package" ).change(function() {
    var package_name = jQuery( "select#applicationForm_package option:selected").text();
    var package_id = jQuery( "select#applicationForm_package option:selected").val();
    if(package_id == "no_package"){
        jQuery("select#applicationForm_subscription").find("option").remove().end().append(noPackageSelected).val("no_package_selected");
    }else{
        console.log("update subscriptions");
        var get_selected_package_name = jQuery("select#applicationForm_package option:selected").attr('package_identifier');
        jQuery("select#applicationForm_subscription").find("option").remove().end().append(get_selected_package_name);
        }
    });

任何帮助都会很棒。

干杯，

Answer 1

对于有条件地更改元素的innerHTML 这样简单的任务，您的代码很混乱。

需要注意的几点：

• $ 是 jQuery 的简写
• 可以使用$('select').val()获取选中的option的值
• 使用tag#id进行识别是多余的，#id既快又短

---

如果我没听错的话，你想：

1. 收听（第一个）select 的更改事件，
2. 看看它的值是否合适，
3. 根据第一个列表的选择填充第二个列表。

我建议使用 Object 来存储第二个列表的标记 - 这样在第一个列表的每个选项中只存储一个包 ID 会更直接：

HTML

<select class="" id="applicationForm_package">
    <option value="5">Package 1</option>
    <option value="60">Package 2</option>
    <!-- ... -->
</select>

...然后使用来自packages 对象的字符串使用该ID 设置第二个列表的innerHTML：

JavaScript

var packages = {
    5: "<option value='20'>1 Month</option><option value='110'>6 Months</option><option value='200'>12 Months</option>",
    60: "<option value='25'>1 Month</option><option value='140'>12 Months</option><option value='250'>24 Months</option>",
    58: "<option value='26'>1 Month</option><option value='146'>2 Months</option><option value='270'>4 Months</option>",
    55: "<option value='37'>1 Month</option><option value='212'>4 Months</option><option value='400'>8 Months</option>"
};

$('#applicationForm_package').change(function () {
    // see if there is listing for this package ID
    if (packages.hasOwnProperty($(this).val()))
    {
        // List options
        $('#applicationForm_subscription').html(packages[$(this).val()]);
    }
    else
    {
        // Please select a package First
        $('#applicationForm_subscription').html('Please select a package First');
    }
});

Working example on JSFiddle.

Answer 2

如果你想根据名称动态获取变量的内容，那么你应该使用这个：

jQuery("select#applicationForm_subscription").find("option").remove().end()
    .append(window[get_selected_package_name]);