Question

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>&nbsp;</p>
      <p>
        <label for="typeofmailerradio2" class="radio"><input type="radio" id="typeofmailerradio2" name="typeofmailerradio" value="Snaps" />Snaps</label>
      </p>
    </div>
    <div class="span3">
        <p>&nbsp;</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>&nbsp;</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

http://jsfiddle.net/Mk24U/

在选择表单的其他部分时无法重置下拉列表。我尝试过的东西都是js区域中注释掉的所有行。

点击明信片可打开新的表单元素

点击明信片尺寸会打开下拉元素

点击自定义尺寸关闭下拉菜单并打开文字字段

单击其他主要单选按钮（如快照，专业和邮件程序），可以关闭明信片下的所有子选项，还可以重置明信片尺寸和自定义尺寸单选按钮。

当选择“选择尺寸”以外的下拉选项，然后选择自定义尺寸时，我希望下拉选项重置为选择尺寸。

在选择快照，专业邮件程序或邮件程序时，我希望下拉菜单重置为选择大小。

我试过的所有事情，我尝试将if / else置于if / else之外，并在函数外部使用它自己的函数。

没有任何效果。

Answer 1

嗯，最简单的方法是将一个类添加到其他主要的单选按钮，如快照，专业和邮件，以说someClass并调用它的click事件，当点击时将select的值更改为空这是选择大小

试试这个

$('.someClass').click(function(){
  if(this.checked){
     $('select[name="postcardsize"]').val("");
  }
})

fiddle here

Answer 2

问题在于您的选择器

替换

 $('#postcardsize').find('option:first').attr('selected',true);

与

 $('select[name=postcardsize]').find('option:first').attr('selected',true);

它应该有用

如何在选择其他字段元素时重置选择选项下拉列表？

2 个答案: