javascript 根据下拉选择显示隐藏的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16474006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
show hidden div based on dropdown selection
提问by sampotts
I have a Member Registration Form that contains a dropdown. It is for events so firstly they enter their membership details, select an event and then the number of tickets they wish to purchase. The options are as follows:
我有一个包含下拉菜单的会员注册表。这是针对活动的，因此他们首先输入他们的会员详细信息，选择一个活动，然后是他们希望购买的门票数量。选项如下：
- Member
- Member + 1 Guest
- Member + 2 Guests
- Member + 3 Guests, and so on.
- 成员
- 会员 + 1 位客人
- 会员 + 2 位客人
- 会员 + 3 位客人，依此类推。
What I want to happen is that because "Members" are FREE to attend, I want to keep the payment div hidden unless they select Member + xxxx.
我想要发生的是，因为“会员”可以免费参加，所以我想隐藏付款 div，除非他们选择会员 + xxxx。
I am a complete novice when it comes to javascript/jquery but I can understand most of it when its written.
说到 javascript/jquery，我完全是个新手，但在编写时我可以理解其中的大部分内容。
I have a JSfiddle (http://jsfiddle.net/bEuRh/) created with some basics but I need a hand writing the script. Some of the code is below:
我有一个 JSfiddle ( http://jsfiddle.net/bEuRh/) 创建了一些基础知识，但我需要手写脚本。部分代码如下：
<div id="tickets">
<label for="CAT_Custom_255276">Number of Tickets: <span class="req">*</span></label>
<select class="cat_dropdown" id="CAT_Custom_255276" name="CAT_Custom_255276">
<option value=" ">-- Please select --</option>
<option value="Member">Member</option>
<option value="Member + 1 Guest">Member + 1 Guest</option>
<option value="Member + 2 Guests">Member + 2 Guests</option>
<option value="Member + 3 Guest">Member + 3 Guests</option>
</select>
</div>
<div id="payMethod">
<div class="header">
PAYMENT METHOD
</div>
<div id="payOptions">
<div id="payInfo">
<div id="pay0" class="paymentinfo">
<p>PAYMENT INFO OPTION 1</p>
</div>
<div id="pay1" class="paymentinfo">
<p>PAYMENT INFO OPTION 2</p>
</div>
<div id="pay2" class="paymentinfo">
<p>PAYMENT INFO OPTION 3</p>
</div>
</div>
</div>
</div>
If anyone could please assist, that would be greatly appreciated.
如果有人可以提供帮助，将不胜感激。
采纳答案by Raymond
I'll get the value when select change is detected and compare..
当检测到选择更改并进行比较时，我将获得该值。
EDIT:
编辑：
$("select").change(function () {
var str = "";
str = parseInt($(this).val());
$("#payMethod").toggle(str >= 2)
});
In HTML, i changed the value to integer...
在 HTML 中，我将值更改为整数...
<option value="0">-- Please select --</option>
<option value="1">Member</option>
<option value="2">Member + 1 Guest</option>
<option value="3">Member + 2 Guests</option>
<option value="4">Member + 3 Guests</option>
if you wanna show individual div... you can try this one..
如果你想显示个人 div ......你可以试试这个..
回答by Explosion Pills
Here is a working example using pure JS:
这是一个使用纯 JS 的工作示例：
//when a new option is selected...
document.getElementById('CAT_Custom_255276').addEventListener('change', function () {
//hide all .paymentinfo
Array.prototype.forEach.call(document.querySelectorAll('.paymentinfo'), function (e) {
e.style.display = 'none';
});
//get the selected index - 2 (first two do not impact display)
var sel = +this.selectedIndex - 2;
//if it is one of the last 3 selected...
if (sel >= 0) {
//display payMethod and the chosen individual options
document.getElementById('payMethod').style.display = 'block';
document.getElementById('pay' + sel).style.display = 'block';
}
else {
//otherwise hide payMethod
document.getElementById('payMethod').style.display = 'none';
}
});
回答by Marty Cortez
I like Raymond's approach of changing the HTML to:
我喜欢 Raymond 将 HTML 更改为以下内容的方法：
<option value="0">-- Please select --</option>
<option value="1">Member</option>
<option value="2">Member + 1 Guest</option>
<option value="3">Member + 2 Guests</option>
<option value="4">Member + 3 Guests</option>
Do that, and then use this jQuery to keep the payment div hidden unless they select the option for more than one member:
这样做，然后使用这个 jQuery 来隐藏支付 div，除非他们为多个成员选择了选项：
$('.cat_dropdown').change(function() {
$('#payMethod').toggle($(this).val() >= 2);
});
I like this approach for several reasons:
我喜欢这种方法有几个原因：
it makes sense to give each option a value that corresponds to the meaning of the selection. For example,
Member + 1 Guesthas an associated value of2.it balances the code between the markup and the javascript in a meaningful, simpler way.
- Instead of tons of javascript to worry about, you only have these three lines of jQuery to maintain.
给每个选项一个与选择的含义相对应的值是有意义的。例如，
Member + 1 Guest关联值为2。它以一种有意义的、更简单的方式平衡了标记和 javascript 之间的代码。
- 无需担心大量 javascript，您只需维护这三行 jQuery。
Here's a jsfiddle to illustrate: http://jsfiddle.net/martco/3TvwV/4/
这是一个 jsfiddle 来说明：http: //jsfiddle.net/martco/3TvwV/4/
回答by HMR
It's better to attache events in script instead of onchangein html but then I'd have to add a lot of JS code just to make it browser compatible:
这是一个在脚本更好地武官事件，而不是平变化在HTML，但后来我不得不增添了不少的JS代码只是为了让浏览器兼容：
<script type="text/javascript">
function showInfo(){
var divs=document.querySelectorAll(".paymentinfo"),
i,
// next line assumes only one element with this style
select=document.querySelectorAll(".cat_dropdown")[0],
index;
for(i=0;i<divs.length;i++){
divs[i].style.display="none";
}
//get the index of the select
index=select.selectedIndex-2;
if(index>-1){
divs[index].style.display="block";
document.getElementById('payMethod').style.display = 'block';
return
}
document.getElementById('payMethod').style.display = 'none';
}
</script>
<div id="tickets">
<label for="CAT_Custom_255276">Number of Tickets: <span class="req">*</span></label>
<select class="cat_dropdown" id="CAT_Custom_255276" name="CAT_Custom_255276" onchange="showInfo();">
<option value=" ">-- Please select --</option>
<option value="Member">Member</option>
<option value="Member + 1 Guest">Member + 1 Guest</option>
<option value="Member + 2 Guests">Member + 2 Guests</option>
<option value="Member + 3 Guest">Member + 3 Guests</option>
</select>
</div>
<div id="payMethod" style="display:none">
<div class="header">
PAYMENT METHOD
</div>
<div id="payOptions">
<div id="payInfo">
<div id="pay0" class="paymentinfo" style="display:none">
<p>PAYMENT INFO OPTION 1</p>
</div>
<div id="pay1" class="paymentinfo" style="display:none">
<p>PAYMENT INFO OPTION 2</p>
</div>
<div id="pay2" class="paymentinfo" style="display:none">
<p>PAYMENT INFO OPTION 3</p>
</div>
</div>
</div>
</div>
