0

だから私は選択フィールドを持っています。

<select name="selection_group_1" id="selection_group_1" onChange="guests()">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="2">3</option>
</select>

onChange に注意してください。jquery の $().change() の代わりにこれを使用して関数を呼び出します。これは、jquery .click、.change などで運がなかったからです...常にバグがあります。しかし、私は必要に応じてそれを使用することにオープンです。

基本的に、ユーザーが 0,1,2,3 を選択すると、div を切り替えたいと思います。この設定はそのように見えます。

<div id="guestNames" style="display:none;">
<table cellpadding="0" cellspacing="0" border="0">
    <tr><td colspan="3">Please enter the guest names</td></tr>
    <tr>
        <td>Guest #</td><td>First</td><td>Last</td>
    </tr>
</table>
</div>
<div id="guest1" style="display:none;">
<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>Guest #1:</td>
        <td><input type="text" name="text_field_5" id="text_field_5" style="width:70px;" /></td>
        <td><input type="text" name="text_field_6" id="text_field_6" style="width:70px;" /></td>
    </tr>
</table>
</div>
<div id="guest2" style="display:none;">
<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>Guest #2:</td>
        <td><input type="text" name="text_field_7" id="text_field_7" style="width:70px;" /></td>
        <td><input type="text" name="text_field_8" id="text_field_8" style="width:70px;" /></td>
    </tr>
</table>
</div>
<div id="guest3" style="display:none;">
<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>Guest #3:</td>
        <td><input type="text" name="text_field_9" id="text_field_9" style="width:70px;" /></td>
        <td><input type="text" name="text_field_10" id="text_field_10" style="width:70px;" /></td>
    </tr>
</table>
</div>

div #guestNames は、0 でない限りデフォルトで表示されます。残りの div #guest1、#guest2、#guest3 は次のように表示されます... if(1) - div #guest1 を表示 if(2) - #guest1 を表示#guest2 if(3) - #guest1 と #guest2 と #guest3 を表示する if(0) - すべて非表示にします。

今、私はこれを自分のやり方で行うことができますが、私はjquery noobletであり、私のやり方は長い間面倒であり、ロジックは絶対確実ではありません. もともと私は .toggle() を使用しようとしましたが、2 を選択したときはうまく機能しませんでした。私は .css("display") をチェックしようとしましたが、それは同じ問題を引き起こした単なるより長いバージョンでした。

したがって、実行と理解に本当に助けが必要なのは（誰かが説明するのに少し時間がかかる場合）、ドロップダウンにリストされているjQueryをきれいに伝え、これらを適切に切り替える方法です。

これが私のひどいjfiddleです- http://jsfiddle.net/xFZuH/

ありがとう！

4

1 に答える 1

0

私は自由にあなたのフィドルを修正しました：http://jsfiddle.net/xFZuH/1/

最初に、選択オプションの値を表示する div にマップする方法を見つけなければなりません。この場合、ID で直接マップすることを選択しました。

<select name="selection_group_1" id="selection_group_1" onChange="guests()">
    <option value="guestNames">0</option>
    <option value="guest1">1</option>
    <option value="guest2">2</option>
    <option value="guest3">3</option>
</select>

次に、操作しているすべての div を同時に選択する方法を取得する必要があります。そのために、すべて同じクラスを指定しました

<div id="guestNames" class="divsToToggle">

次に、選択時に変更イベントをキャプチャし、現在選択されている値を取得し、すべての div を非表示にして、選択した値に一致する div を表示します

$('#selection_group_1').change(function () {
    var id = $(this).val();
    $(".divsToToggle").hide();
    $("#"+id).show();
});

もちろん、再利用性のために、これらすべてを共通の親にラップして、必要な div のみを選択できるようにするか、div のクラスを追加して、次のようにデータ属性の選択要素に切り替えることをお勧めします。

<select id="bla" data-target=".divsToToggle">
    ....
</select>

....

$('#selection_group_1').change(function () {
    var id = $(this).val();
    var target = $(this).data("target");
    $(target).hide();
    $("#"+id).show();
});
于 2013-03-15T16:04:03.707 に答える