Javascript 如果选择了一个选项，则会出现一组新的选项

Question

简而言之，我希望当用户选择一个选项时，一组选项会出现在该选项所选择的关系中。

以下是我到目前为止所做的：

HTML:

<form method="" action="">
        <input type="file" placeholder="Upload Project">
        <select id="selectProvider">
            <option disabled selected> Select Training Platform </option>
            <option value="1"> Option 1</option>
            <option value="2"> Option 2 </option>
            <option value="3"> Option 3 </option>
            <option value="4"> Option 4 </option>
            <option value="5"> Option 5 </option>

        </select>
    </form>

JavaScript:

<script>

$(function(){

    if ($('#selectProvider').val(1)) {
      //that's where I stopped
    }

});

</script>

即如果选择选项 1，则会出现以下内容

<select>
    <option> Option 11 </option>
    <option> Option 12 </option>
    <option> Option 13 </option>
</select>

更新：

    <select data-role="1" style="display: none;">
    <option> Option 11 </option>
    <option> Option 12 </option>
    <option> Option 13 </option>
</select>


    <select data-role="2" style="display: none;">
    <option> Option 21 </option>
    <option> Option 22 </option>
    <option> Option 23 </option>
</select>

     <select data-role="3" style="display: none;">
    <option> Option 31 </option>
    <option> Option 32 </option>
    <option> Option 33 </option>
</select>


 <select data-role="4" style="display: none;">
    <option> Option 41 </option>
    <option> Option 42 </option>
    <option> Option 43 </option>
</select>

 <select data-role="5" style="display: none;">
    <option> Option 51 </option>
    <option> Option 52 </option>
    <option> Option 53 </option>
</select>


<script>

$(function(){

    $('#selectProvider').on('change', function(){
        if ($(this).val() == '1') {
            var sel = $('select[data-role=1]');
            sel.show();
        }
        else if ($(this).val() == '2') {
            var sel = $('select[data-role=2]');
            sel.show();
        }

        else if ($(this).val() == '3') {
            var sel = $('select[data-role=3]');
            sel.show();
        }

        else if ($(this).val() == '4') {
            var sel = $('select[data-role=4]');
            sel.show();
        }

            else if ($(this).val() == '5') {
            var sel = $('select[data-role=5]');
            sel.show();
        }

    });

});

</script>

Answer 1

你好，你可以试试这样的方法http://jsfiddle.net/viper_yash/hLg3nq5L/ var city_list=new Array(); city_list[0] = ""; city_list[1] = "b1|b2|b3"; city_list[2]="c1|c2|c3"; city_list[3]="a1|a2|a3"; function fill_city(state,city){ var e2=$("select[name='state'] option:selected").index(); var e3 = document.getElementById(city); e3.length = 0; e3.options[0] = new Option('Select City', ''); e3.selectedIndex = 0; var city_array = city_list[e2].split("|"); for (var i = 0; i < city_array.length; i++) { e3.options[e3.length]= new Option(city_array[i],city_array[i]); } }

Answer 2

我稍微修改了你的 HTML 并更改了事件处理程序，因为立即调用的函数没有意义。

HTML

<form method="" action="">
        <input type="file" placeholder="Upload Project">
        <select id="selectProvider">
            <option disabled selected> Select Training Platform </option>
            <option value="1"> Option 1</option>
            <option value="2"> Option 2 </option>
            <option value="3"> Option 3 </option>
            <option value="4"> Option 4 </option>
            <option value="5"> Option 5 </option>

        </select>
    </form>

    <select data-role="1" style="display: none;">
    <option> Option 11 </option>
    <option> Option 12 </option>
    <option> Option 13 </option>
</select>


    <select data-role="2" style="display: none;">
    <option> Option 21 </option>
    <option> Option 22 </option>
    <option> Option 23 </option>
</select>

     <select data-role="3" style="display: none;">
    <option> Option 31 </option>
    <option> Option 32 </option>
    <option> Option 33 </option>
</select>


 <select data-role="4" style="display: none;">
    <option> Option 41 </option>
    <option> Option 42 </option>
    <option> Option 43 </option>
</select>

编辑（多选）

有关您的新更新代码，请参阅此新 Fiddle。我们只想将 role 存储在一个变量中，并在 switch case 语句中对其进行分析。

$('#selectProvider').on('change', function(){
    var role = $(this).val();
    switchRole(role);
});

function switchRole(role) {
      var sel = $('select[data-role= ' + role + '  ]');
      sel.show();
      hideSelects(role, sel)
};

hideSelects = function(role, selected) {
    var elements = $("select").filter(function() {
        return $(this).data("role") !== undefined;
    });
    var toHide = $(elements).not(selected);
    toHide.hide();
};

我还重构了将其他选择隐藏到它自己的函数中。

Javascript 如果选择了一个选项，则会出现一组新的选项

Javascript if an option is selected than a new sets of option appear

javascript

jquery

html

forms

html-select

HTML

编辑（多选）