Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/403.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/php/232.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript jQuery代码可以从包含三个下拉列表的列表中选择三个不同的选项吗?_Javascript_Php_Jquery_Mysql - Fatal编程技术网

Javascript jQuery代码可以从包含三个下拉列表的列表中选择三个不同的选项吗?

Javascript jQuery代码可以从包含三个下拉列表的列表中选择三个不同的选项吗?,javascript,php,jquery,mysql,Javascript,Php,Jquery,Mysql,我有三个不同的下拉框,每一个都包含一个列表,这三个框是通用的。我需要过滤列表,比如 当用户在第一个下拉列表中选择一个选项时,他会转到 接下来,他不应该在前面选择的列表中获得选项 在第一个下拉列表中 这是显示两个下拉列表的图像,我需要其中三个。 此代码将起作用…好的,您尝试了什么?请不要大声喊叫。也许有更合适的格式选项…这是我的代码…你已经有的代码片段发生了什么?它部分起作用了吗?浏览器控制台中显示任何错误?它适用于静态内容,但不适用于动态内容,我的列表来自数据库,我通过php脚本显示它。我不太

我有三个不同的下拉框,每一个都包含一个列表,这三个框是通用的。我需要过滤列表,比如

当用户在第一个下拉列表中选择一个选项时,他会转到 接下来,他不应该在前面选择的列表中获得选项 在第一个下拉列表中

这是显示两个下拉列表的图像,我需要其中三个。


此代码将起作用…

好的,您尝试了什么?请不要大声喊叫。也许有更合适的格式选项…这是我的代码…你已经有的代码片段发生了什么?它部分起作用了吗?浏览器控制台中显示任何错误?它适用于静态内容,但不适用于动态内容,我的列表来自数据库,我通过php脚本显示它。我不太熟悉jQuery或JS,请帮我改进一下。非常感谢@阿普米娜。我知道了。对不起,给你添麻烦了。因为我是新手。谢谢你的耐心。
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function cleanMonth(ddl) {
            var val = ddl.options[ddl.selectedIndex].value;

        //Clear all items
        $("#ddlMonth2 > option").remove();

        //Add all options from dropdown 1
        $("#" + ddl.id + "> option").each(function () {
            var opt = document.createElement("option");
            opt.text = this.text;
            opt.value = this.value;
            document.getElementById("ddlMonth2").options.add(opt);
        });

        //Remove selected
        $("#ddlMonth2 option[value='" + val + "']").remove();
    }
</script>
<html>
<head>
    <title>Dropdown test</title>
</head>
<body>
  <select id="first">
    <option value="0">--Select--</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
  </select>
  <select id="second">
    <option value="0">--Select--</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
  </select>
  <select id="third">
    <option value="0">--Select--</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
  </select>

</body>
    <script   src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"></script>


<script type="text/javascript">
    $(document).ready(function(){
        $("#first").on('change',function(){
             var selectedItem = $("#first").val();
             $("#second").children("option").show();
             $("#second").children("option[value^=" + selectedItem + "]").hide();
        });
        $("#first ,#second").on('change',function(){
             var selectedItem = $("#first").val();
             var selectedItem2 = $("#second").val();
             $("#third").children("option").show();
             $("#third").children("option[value^=" + selectedItem + "]").hide();
             $("#third").children("option[value^=" + selectedItem2 + "]").hide();
        });
    });
</script>

</html>