时间戳

首页 > 解决方案 > 如何更改更改选择标签上的值

javascript - 如何更改更改选择标签上的值

问题描述

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

当我更改为Cool drinkthen showPepsi时，只有Coac& Sprite。当我更改为Foodthen showPizza时，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>

标签： javascriptphpjqueryhtml

解决方案

这可以通过使用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 ?>

推荐阅读