如何更改第一个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>
这可以通过使用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 ?>
我能做到的很简单。很奇怪，我们不能在选项上使用：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>,
您可以使用下一个代码。是你的，但有一些东西：
defaultPropsprimereact,
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
}
根据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>