Question

我认为这很容易，但我无法让它发挥作用。

我希望我的按钮在选择其他选项时说出不同的内容。

我试过了：

<select id="selector123">
  <option>test</option>
  <option>tes2</option>
</select>
<br><br>
<button onclick="test()">hoi</button>
<script>
    var e = document.getElementById("selector123");
    var strUser =
        e.options[e.selectedIndex].value;

    function test() {
        if (strUser =
            "test") {
            alert('this should a different text');
        } else if (strUser = "tes2") {
            alert('this should say this text');
        }
    }
</script>

但它不起作用。

也许知道我做错了什么？

Answer 1

问题是您只在加载时设置strUser的值，如果您将其移动到每次单击按钮时它将更新的test()函数内。您还使用了错误的比较运算符，应为===：

<select id="selector123">
  <option>test</option>
  <option>tes2</option>
</select>
<br><br>
<button onclick="test()">hoi</button>

<script>
var e = document.getElementById("selector123");

function test() {
    var strUser = e.options[e.selectedIndex].value;
    if (strUser === "test") {
        alert('this should a different text');
    } else if (strUser === "tes2") {
        alert('this should say this text');
    }
}
</script>

Answer 2

您遇到两个错误，将 = 替换为 == 并使用 e.value （可选）。 最重要的是，从选择框中读取值的代码应该在函数中！

还要注意等于“==”运算符和赋值运算符“=”

以下是工作代码段

<html> <body>
 
  <select id="selector123"> 
	<option>test</option>
	<option>tes2</option>
 </select><br><br> <button onclick="test()">hoi</button>
 
 <script> 
	
 function test(){  
 var e = document.getElementById("selector123"); 
	var strUser = e.value; 
  
  if (strUser == "test") {
         alert('this should a different text');
     }
 else if (strUser == "tes2") {
	 alert('this should say this text');
   } } </script>
 
 </body> </html>

Answer 3

您需要使用'=='来比较字符串而不仅仅是'='，并且还将strUser移动到函数内部：

var e = document.getElementById("selector123");

function test(){  
    var strUser = e.options[e.selectedIndex].value;
	if (strUser =="test") {
		alert('this should a different text');
	}else if (strUser == "tes2") {
		alert('this should say this text');
	} 
}

<html>
<body>
<select id="selector123">
	<option>test</option>
	<option>tes2</option>
</select>
<br><br>
<button onclick="test()">hoi</button>
</body>
</html>

Answer 4

问题：

1：在if条件下使用===进行比较。

2：在click事件中声明结果，否则它将始终采用页面加载时选择的值

<html>

<body>

  <select id="selector123">
    <option>test</option>
    <option>tes2</option>
  </select>
  <br>
  <br>
  <button onclick="test(event)">hoi</button>

  <script>
    var e = document.getElementById("selector123");
   

    function test(event) {
      
      var strUser = e.options[e.selectedIndex].value;      
      if (strUser =="test") {
        alert('this should a different text');
      } else if (strUser == "tes2") {
        alert('this should say this text');
      }
    }
  </script>

</body>

</html>

无法在javascript中获取此选择功能

4 个答案: