Question

我是网络开发的新手。我有2个选择（Box1＆amp; Box2 - 下拉）。我希望Box2的内容根据第一个框的选择进行更改。我怎么能这样做？

for

Answer 1

实现这一目标的方法很少： 1.使用数据库 2.使用JSON

我可能会向您展示如何使用JSON

执行此操作

创建一个JSON文件（data.json）并放置在放置HTML文件的同一个文件夹中

JSON [data.json]

{
    "color":"Red,Orange,Yellow",
    "food":"Apple,Banana,Watermelon"
}

HTML＆amp; jQuery [fiddle.html]

<!DOCTYPE html>
<html>
<head>
    <title>Fiddle</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

</head>
<body>
<select id="first-choice">
    <option selected value="base">Options</option>
    <option value="color">Color</option>
    <option value="food">Food</option>
</select>
<br>
<select id="second-choice">
    <option>Please choose from the above</option>
</select>
<script type="text/javascript">
    console.log($("#first-choice"));
        $("#first-choice").on("change", function(){
            var $dropdown = $(this);
            $.getJSON("data.json",function(data){
                var key = $dropdown.val();
                var vals = [];

                switch(key){
                    case 'color':
                    vals = data.color.split(",");
                    break;
                    case 'food':
                    vals = data.food.split(",");
                    break;
                    case 'base':
                    vals = ['Please choose from above'];
                }
                var $secondChoice = $("#second-choice");
                $secondChoice.empty();
                $.each(vals,function(index,value){
                    $secondChoice.append("<option>" + value + "</option>");
                });
            });
        });
    </script>
</body>
</html>

Answer 2

使用 jQuery 根据所选的 Box1 值填充 Box2 。解决方案是这样的：

为每个id框添加<select>属性，而不是预先填充 Box2 ，如下所示：

Box1:<br>
<select name="country" class="field-select" id="box1">
    <option value="selected">Options</option>
    <option value="Color">Color</option>
    <option value="Food">Food</option>
</select>

Box2:<br>
<select name="item" class="field-select" id="box2">
    <option>--</option>
</select>

注意：如果您希望可以在 Box2 中更改此行<option>--</option>并添加自己的自定义<option>，则会赢得＆＃39;对整体逻辑造成任何伤害。

你的jQuery会是这样的：

<script>
    $(document).ready(function(){
        $(document).on('change', '#box1', function(){
            if($(this).val() == 'Color'){
                $('#box2').html("<option value='Red'>Red</option>"      
                    +"<option value='Orange'>Orange</option>"
                    +"<option value='Yellow'>Yellow</option>");
            }else if($(this).val() == 'Food'){
                $('#box2').html("<option value='Apple'>Apple</option>"
                    +"<option value='Banana'>Banana</option>"
                    +"<option value='Watermelon'>Watermelon</option>");
            }
        });
    });
</script>

这是现场演示https://jsfiddle.net/dmrmwfm4/

更改选择框的内容w.r.t.另一个

2 个答案: