javascript - 保留、隐藏和重置基于按钮的选择选项

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

这是您要找的吗？

• 在单选按钮更改功能上使用名称属性检查所选单选按钮是否属于选择主题或形状。
• 如果是选择shape，则判断是shape1还是shape2。
• 如果是 shape1，则将 shape1 选择框 (#c_select) 的显示属性设置为 block ，将 shape2 选择框 (#h_select) 设置为无，反之亦然。并重置#h_select 默认选择。选择主题单选按钮的方法相同
• 现在，如果您愿意，可以在准备好文档时使用 $("selector").each 函数为所有选择框设置默认值。

注意:您不必将每个逻辑都放在单独的文档就绪函数中(参见 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>