JQuery - 在下拉菜单中选择选项后在模式中显示隐藏的文本字段

Question

我是脚本新手，并试图更好地理解它。单击其中包含表单的按钮后，我会显示一个模式。有一个带有两个选项的下拉框。第一个选择 (Single) 是为了显示所有 div 和文本字段，但 Guest 文本字段除外，因为它们将在没有客人的情况下单独出现。

我要做的是在选择第二个选项（Couple）后显示文本字段，以便可以输入来宾姓名字段，但我似乎无法让它们显示以便文本可以被输入。这是我的代码：

<div class="form-group" id="selector">
    <label for"selection" class="col-xs-8" control-label>Will you be joining us with a guest?</label>
    <select class="form-control" id="selection" name="amount">
        <option value="40.00">Single - $40.00</option>
        <option value="75.00">Couple - $75.00</option>
    </select>
</div>

<div class="form-group">
    <label for="first_name" class="col-xs-4" control-label>First Name</label>
    <div class="col-xs-8">
        <input type="hidden" name="on0" value="First Name">
        <input type="text" class="form-control" id="first_name"
            name="os0" placeholder="i.e. John" required autofocus>
    </div>
</div>

<div class="form-group">
    <label for="last_name" class="col-xs-4" control-label>Last Name</label>
    <div class="col-xs-8">
        <input type="hidden" name="on1" value="Last Name">
        <input type="text" class="form-control" id="last_name"
            name="os1" placeholder="i.e. Smith" required autofocus>
    </div>
</div>

<div class="form-group" id="guestFirst">
    <label for="guestFirstName" class="col-xs-4" control-label>Guest's First Name</label>
    <div class="col-xs-8" style="display: none">
        <input type="hidden" name="on3" value="Guest's First Name">
        <input type="text" class="form-control" id="guestFirstName" name="os3"
            placeholder="i.e. Jane" autofocus>
    </div>
</div>

<div class="form-group" id="guestLast">
    <label for="guestLastName" class="col-xs-4" control-label>Guest's Last Name</label>
    <div class="col-xs-8">
        <input type="hidden" name="on4" value="Guest's Last Name">
        <input type="text" class="form-control" id="guestLastName" name="os4"
            placeholder="i.e. Smith" autofocus>
    </div>
</div>

-----

<script>
    $('#selection').on('change', function() {
     if ( this.value == '75.00')
     {
       $("#guestFirstName").show();
     }
     else
    {
      $("#guestFirstName").hide();
    }
    });
</script>

Answer 1

问题：您将输入字段设置为通过 jQuery 显示，但在该输入字段之前将 display:none 属性设置为 col-xs-8。

解决方案：我认为您需要隐藏 div id #guestFirst、#guestLast 并在从下拉列表中选择情侣后显示它们。

所以使用 css 设置那些 div 样式显示 none。然后在 jQuery 上使用 if else 条件显示这些 div。 LiveOnFiddle

 $('#selection').on('change', function() {
 if ( this.value == '75.00')
 {
   $("#guestFirst, #guestLast").show();
 }
 else
{
  $("#guestFirst, #guestLast").hide();
}
});

#guestFirst, #guestLast{
  display:none;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-group" id="selector">
<label for="selection" class="col-xs-8" control-label>Will you be joining us with a guest?</label>
<select class="form-control" id="selection" name="amount">
    <option value="40.00">Single - $40.00</option>
    <option value="75.00">Couple - $75.00</option>
</select>
</div>

<div class="form-group">
<label for="first_name" class="col-xs-4" control-label>First Name</label>
<div class="col-xs-8">
    <input type="hidden" name="on0" value="First Name">
    <input type="text" class="form-control" id="first_name"
        name="os0" placeholder="i.e. John" required autofocus>
</div>
</div>

<div class="form-group">
<label for="last_name" class="col-xs-4" control-label>Last Name</label>
<div class="col-xs-8">
    <input type="hidden" name="on1" value="Last Name">
    <input type="text" class="form-control" id="last_name"
        name="os1" placeholder="i.e. Smith" required autofocus>
</div>
</div>

<div class="form-group" id="guestFirst">
<label for="guestFirstName" class="col-xs-4" control-label>Guest's First Name</label>
<div class="col-xs-8" >
    <input type="hidden" name="on3" value="Guest's First Name">
    <input type="text" class="form-control" id="guestFirstName" name="os3" 
        placeholder="i.e. Jane" autofocus>
</div>
</div>

<div class="form-group" id="guestLast">
<label for="guestLastName" class="col-xs-4" control-label>Guest's Last Name</label>
<div class="col-xs-8" >
    <input type="hidden" name="on4" value="Guest's Last Name">
    <input type="text" class="form-control" id="guestLastName" name="os4" 
        placeholder="i.e. Smith" autofocus>
</div>
</div>