html
<div class="row-fluid together">
<div class="span3">
<p>
<label for="typeofmailerradio1" class="radio"><input type="radio" id="typeofmailerradio1" name="typeofmailerradio" value="Postcards" />Postcards</label>
</p>
<div id="typeofpostcardmaileroptions" class="hide">
<p>
<label for="typeofpostcardmailerradio1" class="radio"><input type="radio" id="typeofpostcardmailerradio1" name="typeofpostcardmailer" value="Postcard Sizes" />Postcard Sizes</label>
</p>
<div id="postcardsizeoptions" class="hide">
<select name="postcardsize">
<option value="">pick size</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<p>
<label for="typeofpostcardmailerradio2" class="radio"><input type="radio" id="typeofpostcardmailerradio2" name="typeofpostcardmailer" value="Custom Size" />Custom Size</label>
</p>
<div id="customsizeoption" class="hide">
<input type="text" id="postcardcustomsize" name="postcardcustomsize" value="" />
</div>
</div>
</div>
<div class="span3">
<p> </p>
<p>
<label for="typeofmailerradio2" class="radio"><input type="radio" id="typeofmailerradio2" name="typeofmailerradio" value="Snaps" />Snaps</label>
</p>
</div>
<div class="span3">
<p> </p>
<p>
<label for="typeofmailerradio3" class="radio"><input type="radio" id="typeofmailerradio3" name="typeofmailerradio" value="Specialty Mailers" />Specialty Mailers</label>
</p>
</div>
<div class="span3">
<p> </p>
<p>
<label for="typeofmailerradio4" class="radio"><input type="radio" id="typeofmailerradio4" name="typeofmailerradio" value="Mailers" />Mailers</label>
</p>
</div>
</div>
js
//clear sub options if another main option is selected
$("input[name='typeofmailerradio']").change(function(){
$("input[name='typeofpostcardmailer']").prop('checked', false);
$('#postcardsizeoptions').hide("fast");
$('#postcardsize').find('option:first').attr('selected',true);
});
//show or hide options of postcards
$("input[name='typeofmailerradio']").click(function() {
if(this.value == 'Postcards') {
$('#typeofpostcardmaileroptions').show("fast");
}
else {
$('#typeofpostcardmaileroptions').hide("fast");
}
});
//show or hide post card sizes dropdown box
$("input[name='typeofpostcardmailer']").click(function() {
if(this.value == 'Postcard Sizes') {
$('#postcardsizeoptions').show("fast");
$('#customsizeoption').hide("fast");
}
else {
//$('#postcardsize').prop('selectedIndex',0);
$('#postcardsize').find('option:first').attr('selected',true);
$('#postcardsizeoptions').hide("fast");
$('#customsizeoption').show("fast");
//$('#typeofpostcardmailerradio2').change(function(){
//$('#postcardsize').prop('selectedIndex',0);
//$('#postcardsize').val( $('#postcardsize').prop('defaultSelected') );
//}
}
//if(this.value == 'Custom Size') {
//$('#postcardsize').val( $('#postcardsize').prop('defaultSelected') );
//$('#postcardsize').prop('selectedIndex',0);
//var mypostcardsizeselect = $("select#postcardsize");
//mypostcardsizeselect[0].selectedIndex = 0;
//mypostcardsizeselect.selectmenu("refresh");
//}
});
//reset postcard size dropdown if custom picked
//$('#typeofpostcardmailerradio2').change(function(){
// $('#postcardsize').prop('selectedIndex',0);
//}
CSS
.hide {display: none}
jsfiddle
フォームの他の部分を選択するときにドロップダウンをリセットするのに問題があります。私が試したことは、js領域のすべてのコメントアウト行です。
はがきをクリックすると、新しいフォーム要素が開きます
はがきのサイズをクリックすると、ドロップダウン要素が開きます
カスタムサイズをクリックすると、ドロップダウンが閉じてテキストフィールドが開きます
スナップ、専門、メーラーなどの他のメイン ラジオ ボタンをクリックすると、ポストカードの下にあるすべてのサブ オプションが閉じられ、ポストカード サイズとカスタム サイズのラジオ ボタンもリセットされます。
「サイズを選択」以外のドロップダウン オプションを選択してカスタム サイズを選択すると、ドロップダウン オプションがサイズを選択するようにリセットされます。
また、スナップ、特殊メーラー、またはメーラーを選択するときに、ドロップダウンをリセットしてサイズを選択するようにします。
私が試したすべてのことは、if/elseの内側、if/elseの外側、および関数の外側に独自の関数を入れてみました。
何も機能していません。