根据下拉选择使用javascript更改html内容

Question

我有一个代码，我希望根据 html 下拉列表中的选择来显示和消失不同的 html 元素。问题是控制台正确返回下拉列表的值，但使用下面给定的代码，在更改下拉列表的值时不会出现任何 html。 这是代码：http://textuploader.com/dhzi6

HTML

<select id="dropDown">
 <option value="default" selected="selected"> Please select shape </option>
 <option value="one" id="rectangle">Rectangle</option>
 <option value="two" id="triangle">Triangle</option>
 <option value="three" id="circle">Circle</option>
</select>

<div id="wrapperOne"></div>
<div id="wrapperTwo"></div>
<div id="wrapperThree"></div>

JS

 var dropDown = document.getElementById("dropDown"),
   myWrappers = [
      document.getElementById("wrapperOne"),
      document.getElementById("wrapperTwo"),
      document.getElementById("wrapperThree")
   ];


for (i=0; i<myWrappers.length; i++){    
    if(dropDown.value === "default"){ 
       myWrappers[i].style.display = "none";
     } else if(dropDown.value === "one"){
       myWrappers[i].style.display = "none";
       myWrappers[0].style.display = "block";
      } else if(dropDown.value === "two"){
       myWrappers[i].style.display = "none";
       myWrappers[1].style.display = "block";
      } else if(dropDown.value === "three"){
       myWrappers[i].style.display = "none";
       myWrappers[2].style.display = "block";
      }
 }

Answer 1

问题是您没有触发 onchange 事件。为您的选择框添加

onchange

事件，并将您的 javascript 代码保留在一个函数中。会起作用的。

HTML

<select id="dropDown" onchange="test()">
   <option value="default" selected="selected"> Please select shape </option>
 <option value="one" id="rectangle">Rectangle</option>
 <option value="two" id="triangle">Triangle</option>
 <option value="three" id="circle">Circle</option>
</select>

<div id="wrapperOne"><h1>First</h1></div>
<div id="wrapperTwo"><h1>Second</h1></div>
<div id="wrapperThree"><h1>Third</h1></div>

JS

var dropDown = document.getElementById("dropDown"),
    myWrappers = [
       document.getElementById("wrapperOne"),
       document.getElementById("wrapperTwo"),
       document.getElementById("wrapperThree")
    ];
 function test() {
   for (i=0; i<myWrappers.length; i++){
     if(dropDown.value === "default"){ 
        myWrappers[i].style.display = "none";
     } else if(dropDown.value === "one"){
       myWrappers[i].style.display = "none";
       myWrappers[0].style.display = "block";
     } else if(dropDown.value === "two"){
       myWrappers[i].style.display = "none";
       myWrappers[1].style.display = "block";
     } else if(dropDown.value === "three"){
       myWrappers[i].style.display = "none";
       myWrappers[2].style.display = "block";
     }
  }
}

小提琴演示

更新

现在上面的代码可以成功运行，但是实现预期结果的方式太复杂了。你可以让它变得非常简单和整洁。看下面的代码javascript代码。

function changeEvent() {
    var dropDown = document.getElementById("dropDown").value;

    if(dropDown === "default"){
        document.getElementById('wrapperOne').style.display = 'block';
        document.getElementById('wrapperTwo').style.display = 'block';
        document.getElementById('wrapperThree').style.display = 'block';   
     } else {
       document.getElementById('wrapperOne').style.display = 'none';
        document.getElementById('wrapperTwo').style.display = 'none';
        document.getElementById('wrapperThree').style.display = 'none';
        if(dropDown === "one"){
           document.getElementById('wrapperOne').style.display = 'block';      
        } else if(dropDown === "two"){
           document.getElementById('wrapperTwo').style.display = 'block';
        } else if(dropDown === "three"){
           document.getElementById('wrapperThree').style.display = 'block';
        }
     }
  }

在上面的代码中，首先没有 for 循环。只需检查所选值并相应地显示 html 部分即可。我在下面的代码片段中添加了相同的内容。

function changeEvent() {
    var dropDown = document.getElementById("dropDown").value;

    if(selvalue === "default"){
        document.getElementById('wrapperOne').style.display = 'block';
        document.getElementById('wrapperTwo').style.display = 'block';
        document.getElementById('wrapperThree').style.display = 'block';   
     } else {
       document.getElementById('wrapperOne').style.display = 'none';
        document.getElementById('wrapperTwo').style.display = 'none';
        document.getElementById('wrapperThree').style.display = 'none';
    if(selvalue === "one"){
     document.getElementById('wrapperOne').style.display = 'block';      
    } else if(selvalue === "two"){
     document.getElementById('wrapperTwo').style.display = 'block';
    } else if(selvalue === "three"){
    document.getElementById('wrapperThree').style.display = 'block';
     }
    }
  }  

<select id="dropDown" onChange="changeEvent()">
     <option value="default" selected="selected"> Please select shape </option>
     <option value="one" id="rectangle">Rectangle</option>
     <option value="two" id="triangle">Triangle</option>
     <option value="three" id="circle">Circle</option>
    </select>

    <div id="wrapperOne"><h1>This is Wrapper ONE</h1></div>
    <div id="wrapperTwo"><h1>This is Wrapper TWO</h1></div>
    <div id="wrapperThree"><h1>This is Wrapper THREE</h1></div>

Answer 2

如果你愿意使用 jQuery 我建议这样做：

$('#dropDown').on('change', function(e){
  var selectedOption = $(this).find(':selected');

  if (selectedOption.attr('data-id') != null) {
    $('.wrapper:not(#' + selectedOption.attr('data-id') + ')').hide();
    $('#' + selectedOption.attr('data-id')).show();
  } else {
    $('.wrapper:not(:hidden)').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDown">
  <option value="default" selected="selected"> Please select shape </option>
  <option data-id="wrapperOne" value="one" id="rectangle">Rectangle</option>
  <option data-id="wrapperTwo" value="two" id="triangle">Triangle</option>
  <option data-id="wrapperThree" value="three" id="circle">Circle</option>
</select>

<div id="wrapperOne" class="wrapper" style="display: none;">One</div>
<div id="wrapperTwo" class="wrapper" style="display: none;">Two</div>
<div id="wrapperThree" class="wrapper" style="display: none;">Three</div>