使用javascript显示/隐藏基于选定选项的元素 [英] Show/hide elements based on a selected option with javascript

问题描述

我目前正在一个网站上工作（我是HTML，CSS，JavaScript的新手，我还没有和JQuery合作），并且我制作了一个表单，用户可以从列表中选择他们想要的糖果类型：

 < form class =form-horizo​​ntalmethod =POSTenctype =multipart / form-data> ; 
< div class =form-group> 
< label for =selectCandyclass =control-label col-sm-0>< / label> 
< div class =col-sm-4> 
< select class =form-controlid =selectC> 
< option id =candy1onclick =document.getElementById（'noCandy1'）。style.display ='block'; return false;> Lollipop< / option> 
< option id =candy2onclick =document.getElementById（'noCandy2'）。style.display ='block'; return false;> Haribo Gummies< / option> 
< option id =candy3onclick =document.getElementById（'noCandy3'）。style.display ='block'; return false;> Gum< / option> 
< / select> 
< / div> 
  

这个想法是，当他们选择糖果类型时，会出现一个新的表格，允许他们选择他们想要的糖果数量。他们可以选择的糖果数量因产品而异。例如，如果选择棒棒糖，他们可以选择1到6;如果他们选择Haribo，他们只能从1到2中选择。以下是代码：

 < div id = noCandy1\" > 
< select class =form-control> 
< option> 1< / option> 
< option> 2< / option> 
< option> 3< / option> 
< option> 4< / option> 
< option> 5< / option> 
< option> 6< / option> 
< / select> 
< / div> 
< div id =noCandy2> 
< select class =form-control> 
< option> 1< / option> 
< option> 2< / option> 
< / select> 
< / div> 
< div id =noCandy3> 
< select class =form-control> 
< option> 1< / option> 
< option> 2< / option> 
< option> 3< / option> 
< option> 4< / option> 
< / select> 
< / div> 
  

正如我之前所说的，我对这一切都很陌生，我不确定是否我应该添加一些JavaScript，或者如果可以通过使用CSS来做到这一点。我的问题是，选择选项时应该出现的div始终显示。我可以做什么，只有在选择了前一个表格的选项之一时，div才会出现？非常感谢！

解决方案

请忽略您收到的一些粗鲁的评论。这里有一种方法可以完成你所要做的事情。 truedata-babel =false>

//添加函数（var i = 1）的事件监听器el = document.getElementById（selectC）; el.addEventListener（change，function（）{var elems = document.querySelectorAll（'＃noCandy1，＃noCandy2，＃noCandy3'） 0; i< elems.length; i ++）{elems [i] .style.display ='none'} if（this.selectedIndex === 0）{document.querySelector（'＃noCandy1'）。style.display = 'block';} else if（this.selectedIndex === 1）{document.querySelector（'＃noCandy2'）。style.display ='block';} else if（this.selectedIndex === 2）{document。 querySelector（'＃noCandy3'）。style.display ='block';}}，false）;

 ＃noCandy1，＃noCandy2，＃noCandy3 {dis play：none;}  

< form class =form -horizo​​ntalmethod =POSTenctype =multipart / form-data> < div class =form-group> < label for =selectCandyclass =control-label col-sm-0>< / label> < div class =col-sm-4> < select class =form-controlid =selectC> < option id =candy1> Lollipop< / option> < option id =candy2> Haribo Gummies< / option> < option id =candy3> Gum< / option> < /选择> < / DIV> < / div>< / form>< div id =noCandy1> < select class =form-control> <选项→1< /选项> <选项→2< /选项> <选项→3< /选项> <选项→4< /选项> <选项→5< /选项> <选项→6< /选项> < / select>< / div>< div id =noCandy2> < select class =form-control> <选项→1< /选项> <选项→2< /选项> < / select>< / div>< div id =noCandy3> < select class =form-control> <选项→1< /选项> <选项→2< /选项> <选项→3< /选项> <选项→4< /选项> < / select>< / div>

将更改事件处理程序绑定到首先隐藏所有选择元素容器的函数。请注意，使用事件处理程序优于编写内联JavaScript，就像您在示例中所做的那样。然后，代码遍历你选择的元素容器并检查哪一个应该显示。

参考见：

• https：/ /developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll


• https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
• 
  

I'm currently working on a website (I'm new to HTML, CSS, JavaScript and I haven't worked with JQuery) and I made a form in which users can select the type of candy they want from a list:

<form class="form-horizontal" method="POST" enctype="multipart/form-data">
        <div class="form-group">
            <label for="selectCandy" class="control-label col-sm-0"></label>
            <div class="col-sm-4">
                <select class="form-control" id="selectC">
                    <option id="candy1" onclick="document.getElementById('noCandy1').style.display='block'; return false;">Lollipop</option>
                    <option id="candy2" onclick="document.getElementById('noCandy2').style.display='block'; return false;">Haribo Gummies</option>
                    <option id="candy3" onclick="document.getElementById('noCandy3').style.display='block'; return false;">Gum</option>
                </select>
            </div>

The idea is that when they select the type of candy, a new form will appear, allowing them to choose the amount of candy they want. The amount of candy they can select is different depending on the product. For instance, if the choose 'Lollipop' they can select from 1 to 6; if they choose Haribo, they can only select from 1 to 2. Here's the code for that:

<div id="noCandy1">
        <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            </select>
        </div>
<div id="noCandy2">
        <select class="form-control">
            <option>1</option>
            <option>2</option>
            </select>
        </div>
<div id="noCandy3">
        <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            </select>
        </div>

As I stated before, I'm new to all of this, and I'm not sure if I should add some JavaScript or if it would be possible to do this by using CSS. My problem is that the divs that are supposed to appear when an option is chosen are displayed all the time. What can I do for a div to appear only when one of the options of the previous form is selected? Thank you very much!

解决方案

Please ignore some of the rude comments you received. Here's one way do accomplish what you're after

// Function to add event listener to table
var el = document.getElementById("selectC");
el.addEventListener("change", function() {
  var elems = document.querySelectorAll('#noCandy1,#noCandy2,#noCandy3')
  for (var i = 0; i < elems.length; i++) {
    elems[i].style.display = 'none'
  }
  if (this.selectedIndex === 0) {
    document.querySelector('#noCandy1').style.display = 'block';
  } else if (this.selectedIndex === 1) {
    document.querySelector('#noCandy2').style.display = 'block';
  }else if (this.selectedIndex === 2) {
    document.querySelector('#noCandy3').style.display = 'block';
  }
}, false);

#noCandy1,#noCandy2,#noCandy3 {
  display:none;
}

<form class="form-horizontal" method="POST" enctype="multipart/form-data">
  <div class="form-group">
    <label for="selectCandy" class="control-label col-sm-0"></label>
    <div class="col-sm-4">
      <select class="form-control" id="selectC">
        <option id="candy1">Lollipop</option>
        <option id="candy2">Haribo Gummies</option>
        <option id="candy3">Gum</option>
      </select>
    </div>
  </div>
</form>
<div id="noCandy1">
  <select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
  </select>
</div>
<div id="noCandy2">
  <select class="form-control">
    <option>1</option>
    <option>2</option>
  </select>
</div>
<div id="noCandy3">
  <select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

The JavaScript above binds the change event handler to a function that first hides all your select elements containers. Note that using event handlers is preferred over writing inline JavaScript like you did in your example. Then, the code loops over your select elements containers and checks to see which one should be shown.

For reference see:

• https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
• https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

这篇关于使用javascript显示/隐藏基于选定选项的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！