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

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

HTML

@echo off
setlocal ENABLEDELAYEDEXPANSION
REM Set a string with an arbitrary number of substrings separated by semi colons
set teststring=1.2.5.234

for /f "tokens=1 delims=." %%a IN ("!teststring!") DO set firststring=%%a
echo !firststring!

REM Do something with each substring
:stringLOOP
    REM Stop when the string is empty
    if "!teststring!" EQU "" goto END
    for /f "delims=." %%a in ("!teststring!") do set substring=%%a
REM Now strip off the leading substring
:striploop
    set stripchar=!teststring:~0,1!
    set teststring=!teststring:~1!
    if "!teststring!" EQU "" goto stringloop
    if "!stripchar!" NEQ "." goto striploop
    goto stringloop
:END
echo !substring!
endlocal

编辑（多个选择）

有关新的更新代码，请参阅此新Fiddle。我们只想将<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>存储在变量中，并在role语句中对其进行分析。

switch case

我还重构了将其他选项隐藏到它自己的功能中。

Answer 2

您好，您可以尝试这样的事情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]); } }

如果选择了一个选项而不是一组新的选项，则为Javascript

2 个答案:

HTML

编辑（多个选择）