ボタンに基づいて選択オプションを非表示、非表示、リセット

Question

残念ながら、このタイトルは紛らわしいものでした。

これらの選択オプションを非表示にして、ユーザーがボタンを選択したときに表示するだけです。 ユーザーがボタンを選択すると、選択フィールドが表示されたままになります。 しかし、ユーザーが別のボタンを選択した場合、前の選択肢から選択したオプションをリセットしてオフにします。あなたが見ることができるように

$(document).ready(function() { 
 
    $(':radio').on('change', function() { 
 
    var title = $(this).val(); // Get radio value 
 
    if ($(this).attr('id') === 'theme2') { 
 
     $('.occ_select').addClass('l').removeClass('off'); 
 
    } else { //...otherwise status of radio is off 
 
     $('.occ_select').removeClass('l').addClass('off'); 
 
    } 
 

 
    $("#occa_slct option").eq(0).prop("selected", title == "dedi") //set to first option when value of title is dedi 
 
    $("#occa_slct").prop("disabled", title == "dedi") //disable select when value of title is dedi 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $(':radio').on('change', function() { 
 
    var title = $(this).val(); 
 
    if ($(this).attr('id') === 'shape1') { 
 
     $('.c_select').addClass('l').removeClass('off'); 
 
    } else { 
 
     $('.c_select').removeClass('l').addClass('off'); 
 
    } 
 

 
    $("#c_slct option").eq(0).prop("selected", title == "heart") 
 
    $("c_slct").prop("disabled", title == "heart") 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $(':radio').on('change', function() { 
 
    var title = $(this).val(); 
 
    if ($(this).attr('id') === 'shape2') { 
 
     $('.h_select').addClass('l').removeClass('off'); 
 
    } else { 
 
     $('.h_select').removeClass('l').addClass('off'); 
 
    } 
 

 
    $("#h_slct option").eq(0).prop("selected", title == "circle") 
 
    $("h_slct").prop("disabled", title == "circle") 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<hr> 
 
Choose Theme: 
 
<br> <input type="radio" id="theme1" name="cake_theme" value="dedi" /> Dedication 
 
<br> <input type="radio" id="theme2" name="cake_theme" value="occ" /> Others 
 

 

 
<div id="occassion" class="occ_select off"> 
 
    <select name="occassion_select" id="occa_slct"> 
 
    <option disabled selected value>-- Select one --</option> 
 
    <option value="otheerrr"> otheerrr </option> 
 
    <option value="other1"> other1 </option> 
 
    <option value="other2"> other2 </option> 
 
</select> 
 
</div> 
 
<hr> 
 

 
Choose Shape: 
 
<br> <input type="radio" id="shape1" name="shape" value="circle" /> Circle 
 

 
<div id="circle" class="circle_select off"> 
 
    <select name="c_select" id="c_slct"> 
 
    <option disabled selected value>-- Select one --</option> 
 
    <option value="big"> big </option> 
 
    <option value="med"> med </option> 
 
    <option value="small"> small </option> 
 
</select> 
 
</div> 
 

 
<br> <input type="radio" id="shape2" name="shape" value="heart" /> Heart 
 

 
<div id="heart" class="heart_select off"> 
 
    <select name="h_select" id="h_slct"> 
 
    <option disabled selected value>-- Select one --</option> 
 
    <option value="big"> big </option> 
 
    <option value="med"> med </option> 
 
    <option value="small"> small </option> 
 
</select> 
 
</div> 
 

 
<hr>

は、バグが起こったり混乱が起こってあります。 私は何を言おうとしているのかを明確にする必要があるかどうか質問してください。 誰かが私を助けてくれることを願っています。 事前に感謝してください！

Answer 1

これはあなたが探しているものですか？

• ラジオボタンの変更機能では、選択したラジオボタンが属しているかどうかをチェックし、名前属性を使用してテーマまたはシェイプを選択します。
• 形状を選択している場合は、その形状1か形状2かどうかを確認します。
• shape1の場合は、shape1 selectボックス（#c_select）のdisplay propをブロックし、shape2 selectボックス（#h_select）をnoneに設定します。 #h_selectデフォルト選択をリセットします。
• 希望の場合は、ドキュメントの準備ができたら、$（ "selector"）を使ってすべての選択ボックスのデフォルト値を設定します。

注：別の文書レディ機能内のすべてのロジックを配置する必要はありません（DRYを参照）

$(document).ready(function() { 
 
    $("select").each (function() { 
 
    $(this).find ('option:eq(1)').prop('selected', true); 
 
    }); 
 
    $(':radio').on('change', function() { 
 
    var title = $(this).val(); // Get radio value 
 
    if ($(this).attr ("name") === "cake_theme") { 
 
     if ($(this).attr('id') === 'theme2') { 
 
     $('.occ_select').css ({"display": "block"}); 
 
     } 
 
     else if ($(this).attr('id') === 'theme1') { 
 
     $('.occ_select').css ({"display": "none"}); 
 
     $('.occ_select option:eq(1)').prop('selected', true); 
 
     } 
 
    } 
 
    else if ($(this).attr ("name") === "shape") { 
 
     if ($(this).attr('id') === 'shape1') { 
 
     $('#c_slct').css ({"display": "block"}); 
 
     $('#h_slct').css ({"display": "none"}); 
 
     $('#h_slct option:eq(1)').prop('selected', true); 
 
     } 
 
     else if ($(this).attr('id') === 'shape2') { 
 
     $('#c_slct').css ({"display": "none"}); 
 
     $('#c_slct option:eq(1)').prop('selected', true); 
 
     $('#h_slct').css ({"display": "block"}); 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<hr> 
 
Choose Theme: 
 
<br> <input type="radio" id="theme1" name="cake_theme" value="dedi" /> Dedication 
 
<br> <input type="radio" id="theme2" name="cake_theme" value="occ" /> Others 
 

 

 
<div id="occassion" class="occ_select off"> 
 
    <select name="occassion_select" id="occa_slct"> 
 
    <option disabled selected value>-- Select one --</option> 
 
    <option value="otheerrr"> otheerrr </option> 
 
    <option value="other1"> other1 </option> 
 
    <option value="other2"> other2 </option> 
 
</select> 
 
</div> 
 
<hr> 
 

 
Choose Shape: 
 
<br> <input type="radio" id="shape1" name="shape" value="circle" /> Circle 
 

 
<div id="circle" class="circle_select off"> 
 
    <select name="c_select" id="c_slct"> 
 
    <option disabled selected value>-- Select one --</option> 
 
    <option value="big"> big </option> 
 
    <option value="med"> med </option> 
 
    <option value="small"> small </option> 
 
</select> 
 
</div> 
 

 
<br> <input type="radio" id="shape2" name="shape" value="heart" /> Heart 
 

 
<div id="heart" class="heart_select off"> 
 
    <select name="h_select" id="h_slct"> 
 
    <option disabled selected value>-- Select one --</option> 
 
    <option value="big"> big </option> 
 
    <option value="med"> med </option> 
 
    <option value="small"> small </option> 
 
</select> 
 
</div> 
 

 
<hr>