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事件。为您的选择框添加f4事件，并将您的javascript代码保存在一个函数中。它会起作用。

<强> HTML

onchange

<强> JS

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

this post

<强>更新

现在上面的代码将成功运行，但是您实现所需结果的方式过于复杂。你可以使它非常简单和整洁。看下面的代码javascript代码。

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";
     }
  }
}

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

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';
        }
     }
  }

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';
     }
    }
  }

Answer 2

如果你愿意使用jQuery我会建议：

＆＃13;

$('#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();
  }
});

＆＃13;

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

＆＃13;

最诚挚的问候，约翰

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

2 个答案: