我正在尝试创建一个网页,其中第二个下拉菜单中的选项取决于在第一个下拉菜单中选择的值。但是,在运行网页时,无论在第一个下拉列表中选择了什么,第二个下拉列表中的选项都不会更改。浏览器确实表明它看到了javascript文件,但由于某种原因它似乎并没有真正运行它。任何人都知道发生了什么?
$(document).ready(function() {
$convertfrom = $("select[name='ConvertFrom']");
$convertto = $("select[name='ConvertTo']");
$convertto.change(function() {
if ($(this).val() == "Binary") {
$("select[name='convertto'] option").remove();
$("<option>Decimal</option>").appendTo($convertto);
$("<option>Octal</option>").appendTo($convertto);
$("<option>HexaDecimal</option>").appendTo($convertto);
}
if ($(this).val() == "Decimal") {
$("select[name='convertto'] option").remove();
$("<option>Binary</option>").appendTo($convertto);
$("<option>Octal</option>").appendTo($convertto);
$("<option>HexaDecimal</option>").appendTo($convertto);
}
if ($(this).val() == "Octal") {
$("select[name='convertto'] option").remove();
$("<option>Binary</option>").appendTo($convertto);
$("<option>Decimal</option>").appendTo($convertto);
$("<option>HexaDecimal</option>").appendTo($convertto);
}
if ($(this).val() == "HexaDecimal") {
$("select[name='convertto'] option").remove();
$("<option>Binary</option>").appendTo($convertto);
$("<option>Decimal</option>").appendTo($convertto);
$("<option>Octal</option>").appendTo($convertto);
}
});
});
&#13;
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<title>Practice</title>
</head>
<body>
<p> Welcome to the Practice Page. On this page, you can randomly generate a problem and see if you can solve it correctly.
Please select a base to convert from below. You'll then be asked to select a base to convert to, and then given a problem to solve. </p>
<form>
<select id="ConvertFrom">
<option value="Select">Select</option>
<option value="Binary">Binary</option>
<option value="Decimal">Decimal</option>
<option value="Octal">Octal</option>
<option value="HexaDecimal">HexaDecimal</option>
</select>
<select id="ConvertTo">
<option value="Convertto">ConvertTo</option>
</select>
</form>
<script src="file:///C:/Users/johnt/Documents/Catan/practice2.js"></script>
</body>
</html>
&#13;
答案 0 :(得分:0)
你犯了四个错误。
$convertfrom = $("select[name='ConvertFrom']");
必须为$('#ConvertFrom');
$convertto = $("select[name='ConvertTo']");
必须为$('#ConvertTo');
$convertto.change(function() {
必须为$convertfrom.change(function() {
$("select[name='convertto'] option").remove()
必须为$convertto.innerHTML = '';