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

时间:2013-05-10 01:58:02

标签: javascript html css forms drop-down-menu

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

  • 会员
  • 会员+ 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>

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

4 个答案:

答案 0 :(得分:3)

以下是使用纯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/

答案 1 :(得分:3)

我喜欢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。
  4. 这是一个用来说明的问题:http://jsfiddle.net/martco/3TvwV/4/

答案 2 :(得分:2)

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/

答案 3 :(得分:0)

最好在脚本中附加事件而不是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>