Question

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

那么在点击选择元素的某个选项时，我有什么选择将显示更改为阻止？

这是我的代码

#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>

Answer 1

你必须在showOnChange函数中传递select的值，否则你也可以进入函数

＆＃13;

  function showOnChange(val) {
    document.getElementById(val).style.display = "block";
  }

＆＃13;

#card1, #card2, #card3 {
    display: none;
  }

＆＃13;

<select name="" id="" onchange="showOnChange(this.value)">
  <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>

＆＃13;

Answer 2

您可以从您选择的卡中获取值并显示该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功能

Answer 3

您可以在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

https://jsbin.com/memilufogi/edit?html,output

Answer 4

您可以为所有div提供一个类，以便您可以通过该类查询DOM并将它们全部隐藏起来。然后，您查找ID与所选选项匹配的div并显示它。

请参阅随附的摘录。

document.getElementById('cardMenu').addEventListener('change', showOnChange);

function showOnChange(evt) {
  // capture the target of the change event : select element
  var cardMenu = evt.target;

  // hide all cards
  var cards = document.getElementsByClassName('card');
  for (var i = 0; i < cards.length; i++) {
    cards[i].style.display = "none";
  }

  // show the card whose id matches the selected value
  document.getElementById(cardMenu.value).style.display = "block";
}

#card1,
#card2,
#card3 {
  display: none;
}

<select name="cardMenu" id="cardMenu">
        <option value="card1">card1</option>
        <option value="card2">card2</option>
        <option value="card3">card3</option>
    </select>

<div class="card" id="card1">card1</div>
<div class="card" id="card2">card2</div>
<div class="card" id="card3">card3</div>

Answer 5

<强> CSS

<style>
   #card1, #card2, #card3 {
   display: none;
   }
</style>

<强> HTML

<!-- Pass current selected value -->
<select name="" id="" onchange="showOnChange(this.value)">
  <option value="card1">card1</option>
  <option value="card2">card2</option>
  <option value="card3">card3</option>
</select>
<!-- Add common class in every property -->
<!-- Class will help to reset all class display none when selected new option -->
<div id="card1" class="div_cls">card1</div>
<div id="card2" class="div_cls">card2</div>
<div id="card3" class="div_cls">card3</div>

<强> JS

<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>

Answer 6

我也稍微更新了你的html和js功能，如果你能为你工作，请参阅下面的内容：

public function list(Request $request){
    $posts = Post::where('id', 1)
                  ->with('comments')
                  ->get()

    return $posts;
}

和JS部分：

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

Answer 7

只需使用javascript：

function showOnChange() {
  var whichOp = document.getElementById("sel").selectedIndex;
  var c = document.getElementsByClassName("card");
  for (len = 0;len < c.length; len++)
    c[len].style.display = "none";
  c[whichOp].style.display = "block";
}

#card1, #card2, #card3 {
  display: none;
  margin-top: 10px;
}

<select name="" id="sel" onchange="showOnChange()">
  <option value="card1">card1</option>
  <option value="card2">card2</option>
  <option value="card3">card3</option>
</select>
<div id="card1" class="card">card1</div>
<div id="card2" class="card">card2</div>
<div id="card3" class="card">card3</div>

使用select元素的Javascript onchange

7 个答案: