javascript - 选择不同的字段元素时如何重置选择选项下拉菜单？

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 区域中所有被注释掉的行。

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

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

单击自定义大小关闭下拉菜单并打开一个文本字段

单击其他主要单选按钮，如 snap、special 和 mailers，关闭明信片下的所有子选项，并重置明信片尺寸和自定义尺寸单选按钮。

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

同样在选择 snap、special mailer 或 mailers 时，我希望下拉菜单重置为选择大小。

我尝试过的所有事情，我尝试将 if/else 内部、if/else 外部和函数外部放入它自己的函数中。

没有任何工作。

Answer 1

好吧，最简单的方法是向其他主要单选按钮（如 snap、special 和 mailers）添加一个类，someClass并调用它的单击事件，单击时将 select 的值更改为空，即选择大小

尝试这个

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

在这里摆弄

Answer 2

问题出在您的选择器上

代替

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

和

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

它应该工作