Question

抱歉，标题有点令人困惑。

我想隐藏这些选项，只在用户选择按钮时显示。一旦用户选择了一个按钮，我希望选择字段仍然显示... 但是如果用户选择了不同的按钮，我想重置上一个选项中的选定选项并显示出来。

＆＃13;

$(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") 
  });
});

＆＃13;

<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>

＆＃13;

正如您所看到的，发生了一个错误或混乱。请问我是否需要澄清我想说什么。希望有人可以帮助我。谢谢你提前!!

Answer 1

这就是你要找的东西。

在单选按钮更改功能上，使用名称属性检查所选单选按钮是否属于选择主题或形状。
如果选择形状，请检查其shape1或shape2。
如果是shape1，则将shape1选择框（#c_select）的显示prop设置为block，将shape2选择框（#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>

保留，隐藏和重置基于按钮

1 个答案: