javascript - jquery不能用于下拉菜单？（铬） - Thinbug

jquery不能用于下拉菜单？（铬）

时间：2018-04-10 18:35:26

标签： javascript jquery html

我正在尝试创建一个网页，其中第二个下拉菜单中的选项取决于在第一个下拉菜单中选择的值。但是，在运行网页时，无论在第一个下拉列表中选择了什么，第二个下拉列表中的选项都不会更改。浏览器确实表明它看到了javascript文件，但由于某种原因它似乎并没有真正运行它。任何人都知道发生了什么？

＆＃13;

＆＃13;

$(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;

＆＃13;

＆＃13;

1 个答案:

答案 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 = '';