是否有类似“.checked for a dropdown list in javascript?

Question

我正在为我的大学项目制作一个网站（使用 HTML-CSS-javascript）。我做了一个下拉列表，我想要一个函数来做一些不同的事情下拉列表中的每个选项

例如，当他们选择“2 把剑”时，会提示说 "sword 2"

感谢您抽出时间:)

html代码：

<select name="swordlist">
  <option id="one">1 sword</option>
  <option id="two">2 swords</option>
  <option id="three">3 swords</option>
</select>

javascript代码：

var swordlist1 = document.getElementById('one').checked;
var swordlist2 = document.getElementById('two').checked;
var swordlist3 = document.getElementById('three').checked;

if(swordlist1 == true) {
  alert("sword 1");
} else if(swordlist2 == true) {
  alert("sword 2");
} else if(swordlist3 == true) {
  alert("sword 3");
}

以及在您从下拉列表中选择内容后调用该函数的按钮（如果您知道一种无需任何按钮即可调用该函数的方法，仅用于选择那将非常好）：

<input type="button" onclick="WholeCost();" id="test" value="test">

Answer 1

您可以使用 selected 属性检查 select 选项是否被 select 编辑。

Checked 用于单选按钮和复选框。

但是如果你想检查哪个元素是 select 元素的 select 你不需要检查每个选项，你可以检查 value 属性 html select 元素。

您还可以将属性 value 添加到您的选项元素中，具有易于处理的内部值然后显示另一个 value/text 通常很有用给用户。

您还可以调用您的方法 WholeCost 并将其附加到 select html 元素的 onchange 事件。每次 select 更改时都会调用您的方法。所以不需要添加一个需要点击的html按钮。

像这样：

function WholeCost(e) {
  // Get selected option without checking one by one
  console.log(e.value);

  // Instead of checked, use selected for select elements
  var swordlist1 = document.getElementById('one').selected;
  var swordlist2 = document.getElementById('two').selected;
  var swordlist3 = document.getElementById('three').selected;

  if(swordlist1 == true) {
    alert("sword 1");
    
  } else if(swordlist2 == true) {
    alert("sword 2");
    
  } else if(swordlist3 == true) {
    alert("sword 3");
  }  
}

<!-- call your method WholeCost when selected option changes -->
<select name="swordlist" onchange="WholeCost(this)">
  <!-- each option has the property value -->
  <option value="one" id="one">1 sword</option>
  <option value="two" id="two">2 swords</option>
  <option value="three" id="three">3 swords</option>
</select>

Answer 2

Select 的值将为您提供选中选项的值。因此，您需要为选项增加价值。
以前的答案也是正确的，但这要容易得多。特别是如果你有一个长 select 元素

<select name="swordlist" id="swordlist">
    <option value="one">1 sword</option>
    <option value="two">2 swords</option>
    <option value="three">3 swords</option>
</select>

<script>
function WholeCost(){
    var selectedSword = document.getElementById('swordlist').value;
    alert(selectedSword)
}
</script>

是否有类似“.checked for a dropdown list in javascript?

Is there something like ".checked for a dropdown list in javascript?

html

javascript

html-select