0

select_person ={typeA, typeB}というコンボボックスがあります。

オプションが選択されたら、他のコンボボックスを表示したいhas_id ={has_id, has_no_id}

typeA または typeB で選択された値に応じて、その has_id または has_no_id に応じて、それぞれの div を表示 (または非表示のまま) します。

したがって、レジストリに id があり typeA の場合、入力フィールドのみが表示されますが、typeA で ID がない場合は、typeB と同じように 3 つの入力フィールドが表示されます。

そうするために、私は次のようなことをしています:

$(function () {
    $('#select_person').change(function () {
        $('#has_id').show();
        if ($('#select_person').val() == 'typeA') {
            $("#has_id").append("<option>" + $("#typeA_has_id").val() + "</option>");
            $("#has_id").append("<option>" + $("#typeA_has_no_id").val() + "</option>");
        }

        if ($('#select_person').val() == 'typeB') {
            $("#has_id").append("<option>" + $("#typeB_has_id").val() + "</option>");
            $("#has_id").append("<option>" + $("#typeB_has_no_id").val() + "</option>");
        }


    });
});


$(function () {
    $('#has_id').change(function () {
        $('.persons').hide();
                $('#' + $(this).val()).show();
            });      

    });
});

とhtml

<Select id="select_person">
    <option value="0">Select person</option>
    <option value="typeA">typeA</option>
    <option value="typeB">typeB</option>
</Select>

<Select id="has_id" style="display:none"></Select>

<div id="person1" class="persons" style="display:none">
    <div class="form-left">Type A has id *</div>
    <input type="text" id="name" name="name" class="form-input"
    />
</div>
<div id="person1" class="persons" style="display:none">
    <div class="form-left">Type A has No id *</div>
    <input type="text" id="id" name="id" class="form-input"
    />
    <input type="text" id="name" name="name" class="form-input"
    />
    <input type="text" id="address" name="address" class="form-input"
    />
</div>

<div id="person2" class="persons" style="display:none">
    <div class="form-left">Type B has id *</div>
    <input type="text" id="nameB" name="nameB" class="form-input"
    />
</div>
<div id="person2" class="persons" style="display:none">
    <div class="form-left">Type B has No id *</div>
    <input type="text" id="idB" name="idB" class="form-input"
    />
    <input type="text" id="nameB" name="nameB" class="form-input"
    />
    <input type="text" id="addressB" name="addressB" class="form-input"
    />
</div>

うまくいきません。助けていただけますか？ここにjsfiddleがあります

4

3 に答える 3

2

ドキュメントの最後に余分なもの});があります...

同じ名前の 2 つの ID がありperson1ます..これは無効な HTML マークアップです..削除してクラスを使用してください

あなたのコメントから更新されました

私はこの例のフィドルを作成しました..あなたのコメントを読んで、これがあなたが望むものかどうかわかりません..しかし、これであなたが始められると確信しています.

ここでフィドル

于 2013-03-08T07:17:18.300 に答える
1

コードとHTMLマークアップで何が起こっているかを確認します。

  1. Your markup is invalidused same ids for multiple elements同じページにあるので。
  2. また、に値を入れる方法も明確ではありません$("#typeA_has_id").val()。
  3. そして});、他の回答でも述べられているように、最後に余分な締めくくりがありました。

optionそして、あなたがあなたのリストにいくつかの値を入れたいなら、あなた$('#has_id')はこれで試すことができます。

$("<option/>").val('a').text('a').appendTo("#has_id");

あなたが見たいのであれば私は何かをしましたが：

フィドル

変更されたhtml：

<div id="person-A-withID" class="persons" style="display:none"></div>
<div id="person-A-withoutID" class="persons" style="display:none"></div>
<div id="person-B-withID" class="persons" style="display:none"></div>
<div id="person-B-withoutID" class="persons" style="display:none"></div>

jQuery：

$(function () {
   $('#has_id').show();
   $('#select_person').change(function () {
     $('.persons').hide();
     if ($('#select_person').val() == 'typeA') {
        $("#has_id").html('');
        $("<option/>").val('0').text('--Choose Type A--').appendTo("#has_id");
        $("<option/>").val('person-A-withID').text('person-A-withID').appendTo("#has_id");
        $("<option/>").val('person-A-withoutID').text('person-A-withoutID').appendTo("#has_id");
     }

     if ($('#select_person').val() == 'typeB') {
        $("#has_id").html('');
        $("<option/>").val('0').text('--Choose Type B--').appendTo("#has_id");
        $("<option/>").val('person-B-withID').text('person-B-withID').appendTo("#has_id");
        $("<option/>").val('person-B-withoutID').text('person-B-withoutID').appendTo("#has_id");
     }
  });

  $('#has_id').change(function () {
    $('.persons').hide();
    $('#' + $(this).val()).show();
  });
});
于 2013-03-08T07:56:31.427 に答える
1

ちょっとしたミス: }); 追加

http://jsfiddle.net/LEfbX/1/

$(function () {
    $('#has_id').change(function () {
        $('.persons').hide();
                $('#' + $(this).val()).show();
            });
于 2013-03-08T07:19:26.153 に答える