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既快又短

如果我理解你，你想：

收听（第一个）select，
查看其值是否合适，
根据第一个选择填充第二个列表。

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

<强> HTML

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

...然后使用该ID和packages对象中的字符串设置第二个列表的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]);

动态填充的选择列表

2 个答案: