3

ドロップダウンを含むメンバー登録フォームがあります。イベント用なので、最初に会員情報を入力し、イベントを選択してから、購入したいチケットの数を選択します。オプションは次のとおりです。

  • メンバー
  • メンバー + 1 ゲスト
  • 会員＋ゲスト2名
  • メンバー + 3 ゲストなど。

私がやりたいことは、「メンバー」は無料で参加できるため、メンバー + xxxx を選択しない限り、支払い div を隠しておきたいということです。

私は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

HTMLを次のように変更するRaymondのアプローチが気に入っています。

    <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 の代わりに、これら 3 行の 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 の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>
于 2013-05-10T02:20:40.423 に答える