Javascript onchange与select元素_Javascript_Html_Css

Javascript onchange与select元素

javascript html css

Javascript onchange与select元素,javascript,html,css,Javascript,Html,Css,我试图创建一个下拉菜单，当选择一个选项时，会出现一个div。所有的div都设置为display none，当单击一个选项时，我想将该样式更改为display:block。到目前为止，我已经使用了onchange，但它只适用于整个select元素，而不适用于特定的选项那么，当单击select元素的某个选项时，我可以选择哪些选项将显示更改为block 这是我的密码 #card1, #card2, #card3 { display: none; } <select name=""

我试图创建一个下拉菜单，当选择一个选项时，会出现一个div。所有的div都设置为display none，当单击一个选项时，我想将该样式更改为display:block。到目前为止，我已经使用了onchange，但它只适用于整个select元素，而不适用于特定的选项

那么，当单击select元素的某个选项时，我可以选择哪些选项将显示更改为block

这是我的密码

#card1, #card2, #card3 {
    display: none;
  }
<select name="" id="" onchange="showOnChange()">
  <option value="card1">card1</option>
  <option value="card2">card2</option>
  <option value="card3">card3</option>
</select>
<div id="card1">card1</div>
<div id="card2">card2</div>
<div id="card3">card3</div>

<script>
  function showOnChange() {
    document.getElementById('card1').style.display = "block";
  }
</script>

必须在showOnChange函数中传递select的值，否则也可以在函数中获取

函数shownchangeval{ document.getElementByIdval.style.display=block； } 卡片1，卡片2，卡片3{ 显示：无； } 卡片1 卡片2 卡片3 卡片1 卡片2

card3您可以从您选择的卡中获取值并显示该id

#card1, #card2, #card3 {
    display: none;
  }
<select name="" id="" onchange="showOnChange(this)">
  <option value="card1">card1</option>
  <option value="card2">card2</option>
  <option value="card3">card3</option>
</select>
<div id="card1">card1</div>
<div id="card2">card2</div>
<div id="card3">card3</div>

<script>
  function showOnChange(element) {
    var value = element.value
    document.getElementById(value).style.display = "block";
  }
</script>

请注意，添加到select onchange函数中的this关键字可以捕获onchange中选择的选项，然后根据该关键字显示div

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<style>
  #card1{
    display:block;
  }
  #card2, #card3 {
    display: none;
  }
  </style>
<select name="" id="slct" onchange="showOnChange(event)">
  <option value="card1">card1</option>
  <option value="card2">card2</option>
  <option value="card3">card3</option>
</select>
<div id="card1">card1</div>
<div id="card2">card2</div>
<div id="card3">card3</div>

<script>
  function showOnChange(e) {
    var elem = document.getElementById("slct");
    var value = elem.options[elem.selectedIndex].value;
    if(value == "card1")
      {
        document.getElementById('card1').style.display = "block";
        document.getElementById('card2').style.display = "none";
        document.getElementById('card3').style.display = "none";
      }
   else if(value == "card2")
     {
          document.getElementById('card1').style.display = "none";
          document.getElementById('card2').style.display = "block";
          document.getElementById('card3').style.display = "none";
     }
   else if(value == "card3")
     {
        document.getElementById('card1').style.display = "none";
        document.getElementById('card2').style.display = "none";
        document.getElementById('card3').style.display = "block";
     }

  }
</script>
</body>
</html>

请检查下面的jsbin链接

可以给所有div一个类，这样就可以按该类查询DOM并将它们全部隐藏。然后查找ID与所选选项匹配的div并显示它

请参阅所附的代码片段

getElementById'cardMenu'。addEventListener'change'，showOnChange；函数shownchangeevt{ //捕获更改事件的目标：选择元素 var cardMenu=evt.target； //隐藏所有卡片 var cards=document.getElementsByClassName'card'；对于变量i=0；i HTML

我也稍微更新了您的html和js函数，如果适合您，请参见下面的内容：

<select name="" id="" onChange="showOnChange(this)">
  <option value="card1">card1</option>
  <option value="card2">card2</option>
  <option value="card3">card3</option>
</select>

和JS部分：

function showOnChange(self) {
    var allDiv = self.options;
    for(var i = 0; i < allDiv.length; i++){
        document.getElementById(allDiv[i].value).style.display = "none";
    }
    document.getElementById(self.value).style.display = 'block';
}

仅使用javascript：

函数显示更改{ var whichOp=document.getElementByIdsel.selectedIndex； var c=document.getElementsByClassNamecard；对于len=0；lenCard3但这仅适用于整个select元素，而不适用于特定选项。如果选定的索引选项已更改，则视为该选项已更改。不清楚你的问题是什么。考虑在“空”和“空”字符串之间切换，而不是“阻止”，以便该元素采用默认的或继承的样式，而不需要知道它是什么，它可以通过CSS或其他方式独立设置。每次按下键盘都会发送一个更改事件，这样即使只选择了最后一个，也会显示所有访问的div。

<script>
  function showOnChange(div_id) {
    var div_id = div_id;
   /*
     Getting lenght of all div
   */
    var div_len = document.getElementsByClassName("div_cls").length;
    /* run loop and reset all div display to none*/
    for(i=0; i< div_len; i++) {
      document.getElementsByClassName("div_cls")[i].style.display = "none";
    }
    // Now set block for current selected option
    document.getElementById(div_id).style.display = "block";
  }
</script>

<select name="" id="" onChange="showOnChange(this)">
  <option value="card1">card1</option>
  <option value="card2">card2</option>
  <option value="card3">card3</option>
</select>

function showOnChange(self) {
    var allDiv = self.options;
    for(var i = 0; i < allDiv.length; i++){
        document.getElementById(allDiv[i].value).style.display = "none";
    }
    document.getElementById(self.value).style.display = 'block';
}