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があります