Question

我想使用如图所示的表单选择器，并根据所选的选项，使用不同的输出。很简单，但我没有让它工作。这就是我所拥有的。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){ 

    if ("#1") {
        $("#display").html("<table width="221"><tbody><tr class="su-even"><td width="64"><strong>Level</strong></td><td width="64"><strong>Damage</strong></td><td width="93"><strong>Crown Tower Damage</strong></td></tr><tr><td width="64">1</td><td width="64">80</td><td width="93">32</td></tr></tbody></table>");
    } 
    if ("#2") {
        $("#display").html("<table width="221"><tbody><tr class="su-even"><td width="64"><strong>Level</strong></td><td width="64"><strong>Damage</strong></td><td width="93"><strong>Crown Tower Damage</strong></td></tr><tr><td width="64">2</td><td width="64">88</td><td width="93">36</td></tr></tbody></table>");
    }

});
</script>

</head>

<body>
<div>
   <form id="option">
  <label for="level">Level at a glance:</label>
  <select name="level" id="level">
    <option id="1">1</option>
    <option id="2">2</option>

  </select>
</form>
<div id="display">
</div>
</div>
</body>
</html>

Answer 1

当文档准备就绪时，您的javascript条件会执行一次。当选择值改变时，你必须添加一个事件！

在option元素（<option value="1">1</option>）

中添加一些值

$(document).ready(function(){
  // Set event
  $("#level").change(function(){
    if ($(this).val() === "1") {
      $("#display").html(...);
    } else {
      $("#display").html(...);
    }
  }
  // Call event when document loaded
  $("#level").change();
});

Answer 2

这里有几个问题。

首先，“＃1”和“＃2”总是= = true，因为它们是字符串。
其次，更改文本的代码仅在页面加载时发生一次。菜单更改后没有任何消息可以更新。
第三，在以$("#display").html....开头的行上，你应该有一个非常长的字符串，但是每次都使用双引号将其分解。您需要在单引号和双引号之间切换。如果我说"class="potato">"，它会将"class="视为一个字符串，将">"视为另一个字符串，但它不知道如何处理potato。您需要使用单引号，例如"class='potato'>"或'class="potato">'。

这是固定代码：

<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
function changeText(){
    if ($("#level option:selected").text() == "1") {
        $("#display").html("<table width='221'><tbody><tr class='su-even'><td width='64'><strong>Level</strong></td><td width='64'><strong>Damage</strong></td><td width='93'><strong>Crown Tower Damage</strong></td></tr><tr><td width='64'>1</td><td width='64'>80</td><td width='93'>32</td></tr></tbody></table>");
    } 
    if ($("#level option:selected").text() == "2") {
        $("#display").html("<table width='221'><tbody><tr class='su-even'><td width='64'><strong>Level</strong></td><td width='64'><strong>Damage</strong></td><td width='93'><strong>Crown Tower Damage</strong></td></tr><tr><td width='64'>2</td><td width='64'>88</td><td width='93'>36</td></tr></tbody></table>");
    }
}
$(document).ready(function(){ 
    changeText();
});
</script>

</head>

<body>
<div>
   <form id="option">
  <label for="level">Level at a glance:</label>
  <select name="level" id="level" onchange="changeText()">
    <option id="1" >1</option>
    <option id="2">2</option>

  </select>
</form>
<div id="display">
</div>
</div>
</body>

如何在Jquery中为if语句选择一个ID

2 个答案: