我有以下代码:
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="other" onselect="">Other...</option>
</select>
当用户选择“其他”时，我希望表单在此下拉列表下方显示新的输入文本，以便他/她可以输入自己的城市。同样，如果用户选择返回下拉列表中的现有城市之一，生成的文本输入将会消失。
最佳答案
在选择后添加一个输入并使其不显示
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="other" onselect="">Other...</option>
</select>
<input id="other" style="display:none" />
以及脚本标签内
<script type="text/javascript">
$(document).ready(function () {
$('#city').on('change', function (e) {
var selectValue = this.value;
if (selectValue == "other") {
$("#other").show();
}
else {
$("#other").hide();
}
});
});
</script>
并且您还应该在 html 文件中的上述脚本标记之前添加 Jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
结合 Html 和脚本后，您的 html 文件应如下所示
<html>
<body>
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="other" onselect="">Other...</option>
</select>
<input id="other" style="display:none" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#city').on('change', function (e) {
var selectValue = this.value;
if (selectValue == "other") {
$("#other").show();
}
else {
$("#other").hide();
}
});
});
</script>
</body>
</html>
关于javascript - 如何使 HTML 表单下拉列表中的选定选项之一添加文本输入？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35098143/