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

我不熟悉编写脚本，并试图更好地理解它。我有一个模态显示后，点击一个按钮，其中有一个表单。有一个下拉框，包含两个选项。第一个选择单用于显示除来宾文本字段外的所有div和文本字段，因为它们将在没有来宾的情况下单独显示

我想做的是，一旦选择了第二个选项，文本字段就会显示出来，这样就可以输入来宾姓名字段，而我似乎无法让它们显示出来，这样就可以输入文本。这是我的密码：

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

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

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

因此，使用css设置那些div样式的display none。然后在jQuery上使用if-else条件显示这些div。 $“选择”。关于“更改”，函数{ 如果this.value=='75.00' { $guestFirst，guestLast.show； } 其他的 { $guestFirst，guestLast.hide； } }; 宾客第一，宾客第一{ 显示：无； } 你会带一位客人来吗？ 单人间-40.00美元 夫妇-75.00美元 名字 姓 客人的名字 客人的姓