Question

我创建了一个选项，显示从0到10的10个值。在更改选项时，我创建了一个显示目标形式div的函数。但是在意外点击了错误的选项之后我再次选择了选项但是这次两个值的两个div都显示而不是点击最后一个如何通过显示最后点击的值div来避免这种情况。

//select code
 <select class="form-control" name="subjectcount" onchange="showDiv(this)">
                        <option id= 'zero' value="0">Select Subject</option>
                        <option id= 'one' value="1">1</option>
                        <option id= 'two' value="2">2</option>
                        <option id= 'three' value="3">3</option>
                        <option id= 'four' value="4">4</option>
                        <option id= 'five' value="5">5</option>
                        <option id= 'six' value="6">6</option>
                        <option id= 'seven' value="7">7</option>
                        <option id= 'eight' value="8">8</option>
                        <option id= 'nine' value="9">9</option>
                        <option id= 'zero' value="10">10</option>
                    </select>


----------
default hidden div's
 <div id='onesub' style="display:none">
                <div class="form-group">
                   <label for="subject1" class="col-sm-2 control-label">Subject1</label>
                     <div class="col-sm-10">
                    <?php echo form_input(['name'=>'acsubject1','class'=>'form-control','id'=>'HOD','placeholder'=>'Subject1 Name']);?>
                  </div>
                </div>
                </div>

                <div id='twosub' style="display:none">
                <div class="form-group">
                   <label for="subject1" class="col-sm-2 control-label">Subject1</label>
                     <div class="col-sm-10">
                    <?php echo form_input(['name'=>'acsubject1','class'=>'form-control','id'=>'HOD','placeholder'=>'Subject1 Name']);?>
                  </div>
                </div>
                <div class="form-group">
                   <label for="subject1" class="col-sm-2 control-label">Subject1</label>
                     <div class="col-sm-10">
                    <?php echo form_input(['name'=>'acsubject2','class'=>'form-control','id'=>'HOD','placeholder'=>'Subject1 Name']);?>
                  </div>
                </div>
                </div>


----------
javascript code
<script>
  function showDiv(elem){
   if(elem.value == 1)
      document.getElementById('onesub').style.display = "block";
else if(elem.value == 2)
      document.getElementById('twosub').style.display = "block";
}
</script>

Answer 1

在显示最后点击的div之前，只需隐藏所有div。

    <script>
      function showDiv(elem){
       [].forEach.call(document.querySelectorAll('.alldiv'), function (el) {
  el.style.display = 'none';
});

       if(elem.value == 1)
          document.getElementById('onesub').style.display = "block";
    else if(elem.value == 2)
          document.getElementById('twosub').style.display = "block";
    }
    </script>

为每个div提供课程alldiv。

Answer 2

根据这样的条件设置style.display = "none"。

＆＃13;

function showDiv(elem) {
  if (elem.value == 1) {
    document.getElementById('onesub').style.display =
      "block";
    document.getElementById('twosub').style.display = "none";
  } else if (elem.value == 2) {
    document.getElementById('onesub').style.display = "none";
    document.getElementById('twosub').style.display = "block";
  }
}

＆＃13;

<select onchange="showDiv(this)">
 <option value="0">Select</option>
 <option value="1">1</option>
 <option value="2">2</option>
</select>

<div id='onesub' style="display:none">1</div>
<div id='twosub' style="display:none">2</div>

＆＃13;

Answer 3

使用document.querySelectorAll将style.display=none设置为select更改时的所有div：

＆＃13;

function showDiv(elem){
  document.querySelectorAll('#onesub,#twosub').forEach(function(d){
    d.style.display = "none";
  });
  if(elem.value == 1){
    document.getElementById('onesub').style.display = "block";
  }
  else if(elem.value == 2){
    document.getElementById('twosub').style.display = "block";
  }
}

＆＃13;

<select class="form-control" name="subjectcount" onchange="showDiv(this)">
  <option id= 'zero' value="0">Select Subject</option>
  <option id= 'one' value="1">1</option>
  <option id= 'two' value="2">2</option>
  <option id= 'three' value="3">3</option>
  <option id= 'four' value="4">4</option>
  <option id= 'five' value="5">5</option>
  <option id= 'six' value="6">6</option>
  <option id= 'seven' value="7">7</option>
  <option id= 'eight' value="8">8</option>
  <option id= 'nine' value="9">9</option>
  <option id= 'zero' value="10">10</option>
</select>


<div id='onesub' style="display:none">
  <div class="form-group">
     <label for="subject1" class="col-sm-2 control-label">Subject1</label>
       <div class="col-sm-10">1
    </div>
  </div>
</div>

<div id='twosub' style="display:none">
  <div class="form-group">
     <label for="subject1" class="col-sm-2 control-label">Subject1</label>
       <div class="col-sm-10">2
    </div>
  </div>
  <div class="form-group">
     <label for="subject1" class="col-sm-2 control-label">Subject1</label>
       <div class="col-sm-10">3
    </div>
  </div>
</div>

＆＃13;

Answer 4

您可以通过此代码直接显示所选元素，而不是多个条件。

function showDiv(elem){
 var ch = [];
 ch = document.getElementsByClassName('allsub');
 for(var i=0;i<ch.length;i++){
  ch[i].style.display = "none";
 }
 
  var id = (elem[elem.selectedIndex].id);
  document.getElementById(id+'sub').style.display = "block";
  
}

<select class="form-control" name="subjectcount" onchange="showDiv(this)">
  <option id= 'zero' value="0">Select Subject</option>
  <option id= 'one' value="1">1</option>
  <option id= 'two' value="2">2</option>
  <option id= 'three' value="3">3</option>
  <option id= 'four' value="4">4</option>
</select>


<div id='onesub' style="display:none" class="allsub">
  <div class="form-group">
     <label for="subject1" class="col-sm-2 control-label">Subject 1</label>
       <div class="col-sm-10">1
    </div>
  </div>
</div>

<div id='twosub' style="display:none" class="allsub">
  <div class="form-group">
     <label for="subject1" class="col-sm-2 control-label">Subject 2</label>
       <div class="col-sm-10">2
    </div>
  </div>
  </div>
  
  <div id='threesub' style="display:none" class="allsub">
  <div class="form-group">
     <label for="subject3" class="col-sm-2 control-label">Subject 3</label>
       <div class="col-sm-10">3
    </div>
  </div>
  </div>

   <div id='foursub' style="display:none" class="allsub">
  <div class="form-group">
     <label for="subject1" class="col-sm-2 control-label">Subject 4</label>
       <div class="col-sm-10">4
    </div>
  </div>
  </div>

如何通过选择表单中的选项来隐藏和显示div？

4 个答案: