我是网络开发新手。我有 2 个选择(Box1 和 Box2 - 下拉菜单)。我希望 Box2 的内容根据第一个框的选择进行更改。我该怎么做？
Box1:<br>
<select name="country" class="field-select">
<option value="selected">Options</option>
<option value="Color">Color</option>
<option value="Food">Food</option>
</select>
Box2:<br>
<select name="item" class="field-select">
<option value="Red">Red</option>
<option value="Orange">Orange</option>
<option value="Yellow">Yellow</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Watermelon">Watermelon</option>
</select>
最佳答案
有几种方法可以实现这一点: 1. 使用数据库 2.使用JSON
我可能会向您展示如何使用 JSON 执行此操作
创建一个 JSON 文件 (data.json) 并将其放置在与 HTML 文件相同的文件夹中
JSON [data.json]
{
"color":"Red,Orange,Yellow",
"food":"Apple,Banana,Watermelon"
}
HTML 和 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>
关于javascript - 更改选择框的内容其他，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39485946/