使用jQuery实现即选择又能输入的选择框
时间: 2024-05-03 13:21:30 浏览: 8
这里是一个使用jQuery实现即选择又能输入的选择框的示例代码:
HTML代码:
```
<label for="select-input">请选择或输入:</label>
<select id="select-input">
<option value="">请选择</option>
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
</select>
<input type="text" id="input-text" style="display:none;">
```
jQuery代码:
```
$(document).ready(function(){
$('#select-input').change(function(){
if($(this).val() == ''){
$('#input-text').show();
} else {
$('#input-text').hide();
}
});
$('#input-text').keyup(function(){
$('#select-input').val($(this).val());
});
});
```
解释:
这段代码首先将一个标签和一个选择框的HTML代码写出来,其中选择框有一个空选项和几个选项。同时还有一个文本框,初始时是隐藏的。
接下来的jQuery代码是在文档就绪时执行的。它首先监听选择框的change事件,如果选择的是空选项,就显示文本框;否则隐藏文本框。
然后,它又监听文本框的keyup事件,每次键盘按键松开时,就将文本框的值设置为选择框的值。
这样,当用户选择某个选项时,文本框就会隐藏,而当用户输入一个新的值时,选择框就会自动更新。这就实现了即选择又能输入的选择框。