我将所选插件集成到我的下拉列表中。我想创建一个功能，如果下拉列表中的选项不适用于某个用户的表单，他或她可以单击"其他"并手动输入他们的响应。基本上，下拉列表中的最后一个选项将显示"其他"，如果用户单击它，他或她可以创建输入。我将如何为代码中的第一个下拉列表执行此操作？非常感谢！
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".chosen-select").chosen({
disable_search_threshold: 4
});
function hide() {
$("#p1").parent().hide();
$("#p2").parent().hide();
}
// call hide AFTER .chosen() has been invoked on the visible elements
hide();
});
</script>
<script>
function onSelect1(){
$("#p1").parent().show();
}
function onSelect2(){
$("#p2").parent().show();
}
</script>
<style type="text/css">
.chosen-select {width:200px}
</style>
</head>
<!-- Do not call hide() on body load -->
<body>
<table>
<tr>
<td onchange="onSelect1()">
<select class="chosen-select">
<option value="" disabled selected>Title</option>
<option value="clean">Clean</option>
<option value="salvage">Salvage</option>
<option value="rebuilt">Rebuilt</option>
</select>
</td>
<td onchange="onSelect2()">
<select class="chosen-select" id="p1" >
<option value="" disabled selected>Title Status</option>
<option value="in hand">In Hand</option>
<option value="lien">Lien</option>
<option value="missing">Missing</option>
</select>
</td>
<td>
<select class="chosen-select" id="p2">
<option value="" disabled selected>Title Stat</option>
<option value="in hand">In Hand</option>
<option value="lien">Lien</option>
<option value="missing">Missing</option>
<option value="ralph jr.">Missing</option>
<option value="ralph">Missing</option>
</select>
</td>
</tr>
</table>
</body>
</html>如果我正确，请尝试以下操作
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".chosen-select").chosen({
disable_search_threshold: 4
});
function hide() {
$("#p1").parent().hide();
$("#p2").parent().hide();
}
// call hide AFTER .chosen() has been invoked on the visible elements
hide();
});
</script>
<script>
function onSelect1(el){
$("#p1").parent().show();
var value = $(el).find('select').val()
if(value == 'other'){
$(el).append('<input type="text" id="txtSelect"/>')
}
else
{
if($('#txtSelect').length>0){
$('#txtSelect').remove();
}
}
}
function onSelect2(){
$("#p2").parent().show();
}
</script>
<style type="text/css">
.chosen-select {width:200px}
</style>
</head>
<!-- Do not call hide() on body load -->
<body>
<table>
<tr>
<td onchange="onSelect1(this)">
<select class="chosen-select">
<option value="" disabled selected>Title</option>
<option value="clean">Clean</option>
<option value="salvage">Salvage</option>
<option value="rebuilt">Rebuilt</option>
<option value="other">Other</option>
</select>
</td>
<td onchange="onSelect2()">
<select class="chosen-select" id="p1" >
<option value="" disabled selected>Title Status</option>
<option value="in hand">In Hand</option>
<option value="lien">Lien</option>
<option value="missing">Missing</option>
</select>
</td>
<td>
<select class="chosen-select" id="p2">
<option value="" disabled selected>Title Stat</option>
<option value="in hand">In Hand</option>
<option value="lien">Lien</option>
<option value="missing">Missing</option>
<option value="ralph jr.">Missing</option>
<option value="ralph">Missing</option>
</select>
</td>
</tr>
</table>
</body>
</html>