jquery - JQuery .hide 函数适用于文本字段，但分配一个特定的值来选择框元素

Question

我在 div 中有一个“体验”复选框（比如 id =“exp”）。如果用户选择是，则显示一个隐藏的 div（比如 id = "fill_details"）。我正在使用 jQuery 隐藏和显示。问题是，第一次单击“体验是”复选框时，隐藏的 div 会显示元素（文本框和选择框）。然后单击“体验否”复选框时，div 会再次隐藏，即使这样也没关系。但是再次单击“是”时，文本框为空白（我想要），但选择框本身被分配了最后一个选择选项。（这个我不想要。）

我想要的是“每次用户在体验复选框上单击是时，div 必须显示为没有默认值。”

这是我正在使用的代码：

@DavidThomas：下面是 HTML

<div id="exp" class="row">      
        <?php
        print drupal_render($form['submitted']['employment_history']['employer_1']['experience']);
         }
         ?>
    </div>
<div id="fill_details" >
    <div class="row">       
        <?php
        print drupal_render($form['submitted']['employment_history']['employer_1']['name_of_employer']);
        }
        ?>
    </div>
    <div class="row">       
        <?php
        print drupal_render($form['submitted']['employment_history']['employer_1']['starting_salary']);
         }
         ?>
    </div>
</div>

这是我正在使用的 JQuery。

if($("#exp").is(':checked'))  {
    $('#fill_details').show();
}
else {
    $('#fill_details').hide();
    $('#fill_details *').val('');
}

上面的经验元素是一个单选按钮，薪水是选择框。请帮忙，我无法理解问题出在哪里。谢谢。

Answer 1

您的选择框中是否有“空白”值？如果没有，试试这个：

<select id="mySelect">
    <option value="">Please select an option</option>
</select>

小提琴

Answer 2

您可能需要重置该值。

if($("#exp").is(':checked'))  {

    $('#fill_details').show();
}
else  {
    $('#fill_details').hide();
    $('#fill_details *').val('');
    **$('#fill_details select option:first').attr('selected','selected');**
}

但是使用 jsfiddle 之类的东西会更容易分辨。

Answer 3

嘿，您可以使用 jquerytoggle()方法在选中/取消选中复选框上隐藏/取消隐藏 div，

$("#exp").click(function() {
  $("#fill_details").toggle();
});