Question

我有button，其中显示包含各种选项的select。当我选择特定的option时，我想使用jQuery显示input字段。我怎么能这样做？

<button type="button" class="btn btn-default btn-sm" id="button1" style="float:right">
    <span class="glyphicon glyphicon-plus"></span>
    Add Additional Contact Details
</button>

<select id="select" hidden class="col-lg-2">
    <option>Type</option>
    <option id="op1">Work</option>
    <option id="op2">Home</option>            
    <option id="op3">Email</option>
</select>

<div class="form-group" id="v1" hidden>
    <label class="control-label col-lg-2">Work:</label>
    <div class="col-lg-4">
        <input type="text" class="form-control"/>
    </div>
</div>

$(document).ready(function(){
    $("#button1").click(function(){
        $("#select").show();
    });

    $("#op1").click(function () {
        $("#v1").show();
    });

Answer 1

尝试

$(document).ready(function() {
      $("#button1").click(function() {
        $("#select").show();
      });

      $("#select").change(function() {
        $("#v1").toggle($('#op1').is(':selected'));
        //if you want to toggle the input by selected value
        //$("#v1").toggle(this.value == 'Work');
      });
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn-sm" id="button1" style="float:right">
  <span class="glyphicon glyphicon-plus"></span>Add Additional Contact Details
</button>
<select id="select" hidden class="col-lg-2">
  <option>Type</option>
  <option id="op1">Work</option>
  <option id="op2">Home</option>
  <option id="op3">Email</option>
</select>
<div class="form-group" id="v1" hidden>
  <label class="control-label col-lg-2">Work:</label>
  <div class="col-lg-4">
    <input type="text" class="form-control" />
  </div>
</div>

选择特定选项时显示输入

1 个答案: