Question

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

例如，当他们选择“ 2把剑”时，会发出警告，说“ 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属性来检查是否选择了选择选项。

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

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

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

您还可以调用方法WholeCost，将其附加到select html元素的onchange事件。每次选择更改时，都会调用您的方法。因此，无需添加需要单击的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 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的JavaScript下拉列表？”之类的东西？

2 个答案: