3

我有一个包含下拉列表的会员注册表。这是针对活动的，因此他们首先输入他们的会员详细信息，选择一个活动，然后选择他们希望购买的门票数量。选项如下：

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

4 回答 4

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/

于 2013-05-10T02:12:03.527 回答
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。

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

于 2013-05-10T02:15:10.877 回答
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>

如果你想显示个人 div ......你可以试试这个 ..

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

于 2013-05-10T02:18:17.950 回答
0

最好在脚本中附加事件而不是在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>
于 2013-05-10T02:20:40.423 回答