javascript - 动态填充的选择列表

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()获取所选选项的值
• 使用tag#id进行识别是多余的，#id既更快又更短

<小时/>

如果我理解正确的话，你想要:

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

我建议使用对象来存储第二个列表的标记 - 这样在第一个列表的每个选项中仅存储包 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.