Question

我有这个SELECT元素：

<select name="user_type" id="user_type">
    <option value="" selected="selected">Choice one ...</option>
    <option value="natural">Natural Person</option>
    <option value="company">Company</option>
    <option value="personal">Personal Company</option>
</select>

然后我有另外一个SELECT：

<select name="id_type" id="id_type"></select>

我需要根据第一个SELECT中的用户选择从数组中追加一些值，所以我这样做了：

$('.user_type, #user_type').on('change', function() {
    selected = $(this).find('option:selected').val()
    show = selected != 0 ? true : false;
    $(".personal_data").toggle(show);

    var natural = ["V", "E", "P"];
    var company = ["J", "G"];
    var personal = ["V", "E"];

    $('.id_type, #id_type').empty();
});

您会注意到数组与第一个选择选项值具有相同的名称，我们的想法是在第一个选择更改时附加数组值。 Otuput ex：用户选择company第二次选择将是：

<select name="id_type" id="id_type">
    <option value="J">J</option>
    <option value="G">G</option>
</select>

我是怎么做到的？我的意思是如何在数组中移动并将结果附加到SELECT？

Answer 1

最简单的方法是将所有可用选项放入一个结构中，然后使用selected进行访问。

示例：

$('.user_type, #user_type').on('change', function () {
    selected = $(this).find('option:selected').val()
    show = selected != 0 ? true : false;
    $("#id_type").toggle(show);

    var options = {
        'natural':  ["V", "E", "P"],
        'company':  ["J", "G"],
        'personal': ["V", "E"]
    };

    // Empty the select first
    $('.id_type, #id_type').empty();

    // Are there options available for this selection?
    if (options[selected]) {
        // Append each available option
        for (var i = 0; i < options[selected].length; i++) {
            var opt = options[selected][i];
            $('#id_type').append('<option value="' +opt + '">'+opt+'</option>');
        }
    }
});

working jsfiddle demo

清空选择但在用户选择上附加新值

1 个答案: