根据下拉选择显示隐藏的div

Question

我有一个包含下拉列表的会员注册表。 这是为了事件，所以他们首先输入他们的会员资料，选择一个事件，然后选择他们想要购买的门票数量。 选项如下：

• 会员
• 会员+ 1位游客
• 会员+ 2位客人
• 会员+ 3位客人，依此类推。

我想要发生的是因为“会员”可以免费参加，我希望隐藏付款div，除非他们选择会员+ xxxx。

当谈到javascript / jquery时，我是一个完整的新手，但是当它写完时我能理解它的大部分内容。

我有一个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>

如果有人可以请求协助，那将非常感激。

Answer 1

这是一个使用纯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';
    }
});

http://jsfiddle.net/bEuRh/4/

Answer 2

我喜欢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>

这样做，然后使用此jQuery保持支付div隐藏，除非他们为多个成员选择选项：

$('.cat_dropdown').change(function() {
    $('#payMethod').toggle($(this).val() >= 2);
});

我喜欢这种方法有几个原因：

1. 为每个选项赋予与选择含义相对应的值是有意义的。 例如， Member + 1 Guest的关联值为2 。

2. 它以有意义，更简单的方式平衡标记和javascript之间的代码。

3. 而不是担心大量的javascript，你只需要维护这三行jQuery。

这里有一个jsfiddle来说明： http ： //jsfiddle.net/martco/3TvwV/4/

Answer 3

http://jsfiddle.net/bEuRh/5/

检测到选择更改后我会得到值并进行比较..

编辑：

$("select").change(function () {
    var str = "";
    str = parseInt($(this).val());

    $("#payMethod").toggle(str >= 2)
});

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

如果你想展示个人...你可以尝试这个...

http://jsfiddle.net/bEuRh/6/

Answer 4

最好在脚本中附加事件而不是在html中使用onchange ，但是为了使浏览器兼容，我必须添加大量的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>