如何更改更改 select 标签的值

Question

如何在第一个更改时更改第二个select中的值？

当我换成Cool drink时，只显示Pepsi 、 Coac和Sprite 。 当我更改为Food然后显示Pizza , Chicken & Bar b Q

 <select id="food"> <option>Cool Drink</option> <option>Food</option> </select> <select id="Person"> <option>Pepsi</option> <option>Coac</option> <option>Sprite</option> <option>Bar b Q</option> <option>Chicken</option> <option>Pizza</option> </select>

Answer 1

这可以通过使用 ajax 来实现。

<html>
<head>
    <title>Food Order</title>
</head>
<body>
    <select id="food" >
        <option value="1">Cool Drink</option>
        <option value="2">Food</option>
    </select>
    <select id="Person" >
        <option>Select Option</option>
    </select>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#food").change(function(){
            var txt=$("#food").val();
            $("#Person").empty();
            $.ajax({
                url : 'load.php',
                method : 'POST',
                data : {txt:txt},
                success:function(data){
                    $("#Person").html(data);
                }
            });
        });
    });
</script>
</html>

添加另一个名称为 (load.php) 的页面并添加此代码

<?php $data=$_POST['txt'];  ?>
<?php if ($data == 1): ?>
        <option>Pepsi</option>
        <option>Coac</option>
        <option>Sprite</option>
<?php else: ?>
        <option>Bar b Q</option>
        <option>Chicken</option>
        <option>Pizza</option>
<?php endif ?>

Answer 2

尽可能简单。 很奇怪我们不能使用：在选项上可见

 $('#food').on("change",() => { const $opts = $('#Person option'); $opts.each((_,el) => $(el).toggleClass("hidden")); $('#Person').val($opts.not('.hidden').eq(0).val()); })

 .hidden { display: none }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="food"> <option>Cool Drink</option> <option>Food</option> </select> <select id="Person"> <option value="1">Pepsi</option> <option value="2">Coca Cola</option> <option value="3">Sprite</option> <option value="4" class="hidden">Bar b Q</option> <option value="5" class="hidden">Chicken</option> <option value="6" class="hidden">Pizza</option> </select>

Answer 3

您可以使用下一个代码。 这是你的，但有一些东西：

 $(()=>{ $('#food').change(function(){ $('#Person').find('option').each(function(){ $(this).toggle(); }); $('#Person').find('option').eq(0).css('display') == 'none'? $('#Person').val(2): $('#Person').val(1); }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="food" > <option>Cool Drink</option> <option>Food</option> </select> <select id="Person" > <option value="1">Pepsi</option> <option>Coac</option> <option>Sprite</option> <option value="2" style="display:none;">Bar b Q</option> <option style="display:none;">Chicken</option> <option style="display:none;">Pizza</option> </select>

Answer 4

JS 中的饮料和食物的板条箱清单。

const drinks = ["Pepsi", "Cola"];
const food = ["Pizza 1", "Pizza 2"]

然后创建 JS function，它将由事件onChange 触发并更新第二个下拉列表。

function changeList(name){
    if (name === "Food") { 
         // fill list with foods
    }
    // fill list with drinks
}

Answer 5

根据 onChange 事件上第一个 select 的数据类型属性更改第二个下拉内容。 见下文。

 $('#food').on('change', function(){ const drink = ["Pepsi", "Coac", "Sprite"]; const food = ["Bar b Q", "Chicken", "Pizza"] let type = $(this).children(":selected").data('type') var $dropdown = $("#Person"); if (type=='food') { arr = food } else if (type=='drink') { arr = drink } $dropdown.find('option').remove(); for (i = 0; i < arr.length; i++) { $dropdown.append($("<option />").text(arr[i])); } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> <title>Food Order</title> </head> <body> <select id="food" > <option>Please Select</option> <option data-type="drink">Cool Drink</option> <option data-type="food">Food</option> </select> <select id="Person" > <option>Please Select Type</option> </select> </body> </html>

如何更改更改 select 标签的值

问题描述

4 个解决方案

解决方案1
0 已采纳 2019-11-04 14:15:20

解决方案2
0 2019-11-04 14:41:37

解决方案3
-1 2019-11-04 14:18:04

解决方案4
-2 2019-11-04 13:59:31

解决方案5
-2 2019-11-04 14:18:30

如何更改更改 select 标签的值

问题描述

4 个解决方案

解决方案1 0 已采纳 2019-11-04 14:15:20

解决方案2 0 2019-11-04 14:41:37

解决方案3 -1 2019-11-04 14:18:04

解决方案4 -2 2019-11-04 13:59:31

解决方案5 -2 2019-11-04 14:18:30

解决方案1
0 已采纳 2019-11-04 14:15:20

解决方案2
0 2019-11-04 14:41:37

解决方案3
-1 2019-11-04 14:18:04

解决方案4
-2 2019-11-04 13:59:31

解决方案5
-2 2019-11-04 14:18:30