Question

我是脚本新手，并试图更好地理解它。单击一个内部有一个表单的按钮后，我会显示一个模态。有一个下拉框有两个选项。第一个选择（单个）用于显示所有div和文本字段，但Guest文本字段除外，因为它们将在没有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，＃gestLast并在下拉列表中选择一对后显示它们。

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

＆＃13;

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

＆＃13;

#guestFirst, #guestLast{
  display:none;
}

＆＃13;

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

＆＃13;

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

1 个答案: