Javascript 当下拉值更改时，如何在div顶部添加文本字段

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

芥末
番茄酱
喜欢

$（this）.find（'option:selected'）.text（）

将返回所选

选项的
文本

试试这个：


$（'[name=“opt_change”]'）。在（'change'，function（）上{
if（$（this）.find（'option:selected'）.text（）=='Relish'）{
$（“#其他”）.show（）.prop（'disabled'，false）；
}否则{
$（“#其他”）.prop（'disabled'，true）；
};
});

芥末
番茄酱
喜欢
$（this）.find（'option:selected'）.text（）
将返回所选
选项的
文本

试试这个：


$（'[name=“opt_change”]'）。在（'change'，function（）上{
if（$（this）.find（'option:selected'）.text（）=='Relish'）{
$（“#其他”）.show（）.prop（'disabled'，false）；
}否则{
$（“#其他”）.prop（'disabled'，true）；
};
});

芥末
番茄酱
喜欢
您可以通过检查最后一个选项值和所选值来执行此操作，如下所示


$（“选择”）.change（函数（）{
var last=$（this.find（'option:last'）.val（）；
var sel=$（this.val（）；
如果（最后==sel）{
var input=$（this.prev（'input[type=text]'）；
input.length==0？$（this）.before（“”）：input.prop（'disabled'，false）；
}否则{
$（this）.prev（'input[type=text]'））.prop（'disabled'，true）；
}
});

芥末
番茄酱
喜欢
您可以通过检查最后一个选项值和所选值来执行此操作，如下所示


$（“选择”）.change（函数（）{
var last=$（this.find（'option:last'）.val（）；
var sel=$（this.val（）；
如果（最后==sel）{
var input=$（this.prev（'input[type=text]'）；
input.length==0？$（this）.before（“”）：input.prop（'disabled'，false）；
}否则{
$（this）.prev（'input[type=text]'））.prop（'disabled'，true）；
}
});

芥末
番茄酱
喜欢
考虑使用bootstrap（您使用的是AFAI）和jQuery的这个解决方案：


JS:

HTML:


嘿！我在这里。
芥末
番茄酱
喜欢
考虑使用bootstrap（您使用的是AFAI）和jQuery的这个解决方案：


JS:

HTML:


嘿！我在这里。
芥末
番茄酱
喜欢
最好检查是否选择了最后一个元素，而不是比较文本。如果（this）.find（'option:selected'）.text（）=[lastpoption].text（）@PatrickAleman，我想这两个选项的测试可能是相同的（逻辑上不一样），因此我选择了另一个解决方案。我希望它是有意义的…它确实有意义是的，最好检查是否选择了最后一个元素，而不是比较文本。如果（this）.find（'option:selected'）.text（）=[lastpoption].text（）@PatrickAleman，我想这两个选项的测试可能是相同的（逻辑上不一样），因此我选择了另一个解决方案。我希望这是有意义的…这是有意义的是的
$("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();  
  }
});

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