下拉框取决于在另一个下拉框中选择的选项

Question

下拉框取决于在另一个下拉框中选择的选项

sam*_*yb8 6 html javascript forms jquery drop-down-menu

我在表单中有两个不同的SELECT OPTION.

第一个是Source,第二个是Status.我想在我的状态下拉列表中有不同的OPTIONS,具体取决于我的Source下拉列表中选择的OPTION.

资源:

<select id="source" name="source">
     <option>MANUAL</option>
     <option>ONLINE</option>
</select>

Run Code Online (Sandbox Code Playgroud)

状态:

<select id="status" name="status">

</select>

Run Code Online (Sandbox Code Playgroud)

选项: - 如果Source为MANUAL,则Status为OPEN或DELIVERED - 如果Source为ONLINE,则Status为OPEN或DELIVERED或SHIPPED

我的非工作尝试:

            <script>
            $(document).ready(function () {
            var option = document.getElementById("status").options;
            if (document.getElementById('source').value == "MANUAL") {
                $("#status").append('<option>OPEN</option>');
                $("#status").append('<option>DELIVERED</option>');
                }
            if (document.getElementById('source').value == "ONLINE") {
                $("#status").append('<option>OPEN</option>');
                $("#status").append('<option>DELIVERED</option>');
                $("#status").append('<option>SHIPPED</option>');
                }
            });
            </script>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jyo*_*jan 10

我发布这个答案是因为通过这种方式你将永远不需要任何像 jQuery 和其他任何插件，这有通过简单的 javascript 的解决方案。

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript">
    function dynamicdropdown(listindex)
    {
        switch (listindex)
        {
        case "manual" :
            document.getElementById("status").options[0]=new Option("Select status","");
            document.getElementById("status").options[1]=new Option("OPEN","open");
            document.getElementById("status").options[2]=new Option("DELIVERED","delivered");
            break;
        case "online" :
            document.getElementById("status").options[0]=new Option("Select status","");
            document.getElementById("status").options[1]=new Option("OPEN","open");
            document.getElementById("status").options[2]=new Option("DELIVERED","delivered");
            document.getElementById("status").options[3]=new Option("SHIPPED","shipped");
            break;
        }
        return true;
    }
    </script>
    </head>
    <title>Dynamic Drop Down List</title>
    <body>
    <div class="category_div" id="category_div">Source:
        <select id="source" name="source" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
        <option value="">Select source</option>
        <option value="manual">MANUAL</option>
        <option value="online">ONLINE</option>
        </select>
    </div>
    <div class="sub_category_div" id="sub_category_div">Status:
        <script type="text/javascript" language="JavaScript">
        document.write('<select name="status" id="status"><option value="">Select status</option></select>')
        </script>
        <noscript>
        <select id="status" name="status">
            <option value="open">OPEN</option>
            <option value="delivered">DELIVERED</option>
        </select>
        </noscript>
    </div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

更多细节，我的意思是动态和更多的依赖请看我的文章创建动态下拉列表

Answer 2

Psy*_*alf 7

试试这样的东西...... jsfiddle demo

HTML

 Source:   <select id="source" name="source">
     <option>MANUAL</option>
     <option>ONLINE</option> </select>

Status:

<select id="status" name="status">
    <option>OPEN</option>
      <option>DELIVERED</option>
    </select>

Run Code Online (Sandbox Code Playgroud)

JS

$(document).ready(function() {

  $("#source").change(function() {

    var el = $(this) ;

    if(el.val() === "ONLINE" ) {
    $("#status").append("<option>SHIPPED</option>");
    }
      else if(el.val() === "MANUAL" ) {
        $("#status option:last-child").remove() ; }
  });

});

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，2 月前
查看次数：	112246 次
最近记录：	7 年，3 月前