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

我能做到的很简单。很奇怪，我们不能在选项上使用：visible

$('#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

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

defaultProps

primereact

Answer 4

JS中的饮料和食品箱清单。

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

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

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

Answer 5

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

$('#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>

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

5 个答案: