javascript - 将文本字段添加到 html 下拉列表

Question

我有一个 html 下拉字段，其中应该在底部添加一个文本字段，命名为其他。在此字段中键入的文本应为 other:text


下拉 html 是:

<select name="drop">
    <option selected="selected">Please select ...</option>
    <option value="car">car</option>
    <option value="bike">bike</option>
    <option value="Other">Other</option>
</select>

这里 other 应该是文本字段。为了理解我保留了 other 作为选项，但我希望它是一个输入文本字段，其中值由用户给出。

提前致谢

Answer 1

您可以默认为其他文本添加隐藏的输入字段:

<input type='text' id='other' name='other' style="display:none"/>

并在您的 js 中捕获选择的更改，然后检查所选选项值是否等于 Other 并显示或隐藏该字段:

$('select').on('change', function(){
     if($(this).val()=='Other'){
         $('#other').show().focus();
     }else{
         $('#other').val('').hide();
     }
})

希望这对您有所帮助。

---

$('select').on('change', function(){
  if($(this).val()=='Other'){
    $('#other').show().focus();
  }else{
    $('#other').val('').hide();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="drop">
  <option selected="selected">Please select ...</option>
  <option value="car">car</option>
  <option value="bike">bike</option>
  <option value="Other">Other</option>
</select>
<input type='text' id='other' name='other' style="display:none" value='other:'/>