Question

如何在html中获取<select>标记的值并将其传递给我的javascript。

当我选择red时，它应显示我的<div id="red"> 我是JS的新手，所以我不确定我是否有正确的语法。

HTML

<select>
<option name="choice1" value="red" onclick="color(this.value)">red</option>
<option name="choice2" value="blue" onclick="color(this.value)">blue</option>
</select>

<div id="red" style="display:none;">
<p>You want RED</p>
</div>

<div id="blue" style="display:none;">
<p>You want BLUE</p>
</div>

JAVASCRIPT

function color(color_type){
if (color_type == 'blue'){
document.getElementById('blue').style.display = 'block';
document.getElementById('red').style.display = 'none';
} 
else{
document.getElementById('blue').style.display = 'none';
document.getElementById('red').style.display = 'block';
}
}

Answer 1

您应该使用onchange事件而不是onclick，此外，事件应设置为选择而不是选项以下是正确的代码

<script>
function color(color_type){
    if (color_type == 'blue'){
        document.getElementById('blue').style.display = 'block';
        document.getElementById('red').style.display = 'none';
    } 
    else{
        document.getElementById('blue').style.display = 'none';
        document.getElementById('red').style.display = 'block';
    }
}
</script>

<select onchange="color(this.value)">
    <option name="choice1" value="red" >red</option>
    <option name="choice2" value="blue" >blue</option>
</select>

<div id="red" style="display:none;">
    <p>You want RED</p>
</div>

<div id="blue" style="display:none;">
    <p>You want BLUE</p>
</div>

希望帮助！

Answer 2

<select onchange="color(event)">
<option name="choice1" value="red" >red</option>
<option name="choice2" value="blue" >blue</option>
</select>


function color(e){

  var color=e.target.options[e.target.selectedIndex].value;
  var blueDiv=document.getElementById('blue');
  var redDiv=document.getElementById('red');

  switch(color){
  case 'blue':
    blueDiv.style.display = 'block';
    redDiv.style.display = 'none';
    break;

  case 'red':
    redDiv.style.display = 'block';
    blueDiv.style.display = 'none';
    break;

  default:
    redDiv.style.display = 'none';
    blueDiv.style.display = 'none';
    break;
 }

}

Answer 3

您可以在“select”元素对象上使用“value”方法获取所选值。对于html以下，您可以通过document.getElementById（“color”）获取select标签的值.value

<body>
  <select id="color">
    <option value="red">red</option>
    <option value="blue">blue</option>
  </select>

  <div id="red" style="display:none;">
    <p>You want RED</p>
  </div>

  <div id="blue" style="display:none;">
    <p>You want BLUE</p>
  </div>
</body>

以下是我如何编写我的js：

<script>
  window.addEventListener("load", function() {
    document.getElementById("color").addEventListener("change", function() {
      var selectElem = document.getElementById("color");
      document.getElementById("red").style.display = "none";
      document.getElementById("blue").style.display = "none";
      document.getElementById(selectElem.value).style.display = "block";
    })
  })
</script>

提示：始终尝试实施DRY（不要重复代码）代码。

以上代码在IE8或以下版本中无效。 IE8及以下浏览器支持attachEvent（）方法。我们可以创建自己的自定义事件处理程序方法，该方法适用于跨浏览器。

function addHandler(element, type, handler) {
  alert("Hi");
  if(element.addEventListener) {
    element.addEventListener(type, handler, false);
  } else if(element.attachEvent) {
    element.attachEvent("on"+type, handler)
  } else { 
    element["on"+type] = handler };
}
addHandler(window, "load", main)

function main() {
  function handler() {
    var selectElem = document.getElementById("color");
    document.getElementById("red").style.display = "none";
    document.getElementById("blue").style.display = "none";
    document.getElementById(selectElem.value).style.display = "block";
  }
  addHandler(document.getElementById("color"), "change", handler);
}

我创建了一个自定义的addHandler（）函数，适用于所有IE，chrome，firefox，opera和safari。

Answer 4

在select而不是选项上设置处理程序：

<select ... onclick="color(this.value)" >...

将选择的值从<select> HTML标记传递到JAVASCRIPT </select>

4 个答案: