更改下拉值時如何在div頂部添加文本字段

Question

我在div中有一個dropdrop選項。 當我選擇最后一個選項時，需要在下拉菜單的頂部顯示一個文本框，當我更改選項時，該文本框應禁用。 我怎樣才能做到這一點？

這是我的代碼：

<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
  <div class="form-group">
   <select class="form-control input-sm" name="opt_change" >
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
   </select>
  </div>
</div>

Answer 1

$(this).find('option:selected').text()將為您返回所選option的text

嘗試這個：

 $('[name="opt_change"]').on('change', function() { if ($(this).find('option:selected').text() == 'Relish') { $('#other').show().prop('disabled', false); } else { $('#other').prop('disabled', true); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <input type="text" id='other' style='display:none'> <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1"> <div class="form-group"> <select class="form-control" name="opt_change"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> </div> 

編輯：為了測試最后一個選項被選中，使用$(this).find('option:last').prop('selected')中if條件

Answer 2

考慮使用帶有引導程序（如果您正在使用它）和jQuery的此解決方案：

http://codepen.io/anon/pen/JGVQNb

JS：

$("div").on("change", "select[name='opt_change']", function() {
  var theLastOption = $("select[name='opt_change'] option:last-child");
  if (theLastOption.is(':selected')) {
    $("#text-box").show();  
  } else {
    $("#text-box").hide();  
  }
});

HTML：

<div class="row">
  <div id="text-box" class="col-xs-6  col-md-offset-1 collapse">
    Hey there! I'm here.
  </div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
    <div class="form-group">
      <select class="form-control input-sm" name="opt_change">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>
    </div>
  </div>
</div>

Answer 3

您可以通過檢查上一個選項值和所選值來做到這一點，如下所示。

 $("select").change(function () { var last = $(this).find('option:last').val(); var sel = $(this).val(); if (last == sel) { var input = $(this).prev('input[type=text]'); input.length == 0 ? $(this).before('<input type=text />') : input.prop('disabled', false); } else { $(this).prev('input[type=text]').prop('disabled', true); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <select class="form-control"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div>