实现下拉有默认值显示默认值没有默认值显示模糊提示
时间: 2024-04-29 21:24:53 浏览: 15
如果您使用的是HTML和JavaScript开发网页,您可以使用下拉框<select>和<input>标签结合使用来实现下拉有默认值显示默认值没有默认值显示模糊提示。具体实现方式可以参考以下代码:
```html
<label for="selectBox">请选择城市:</label>
<select id="selectBox" name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select>
<input type="text" id="inputBox" placeholder="请输入城市名称">
<script>
var selectBox = document.getElementById("selectBox");
var inputBox = document.getElementById("inputBox");
selectBox.addEventListener("change", function(){
inputBox.value = "";
});
inputBox.addEventListener("input", function(){
var inputVal = inputBox.value.toLowerCase();
var options = selectBox.options;
for(var i=0; i<options.length; i++){
var optionVal = options[i].value.toLowerCase();
if(optionVal.includes(inputVal)){
selectBox.selectedIndex = i;
break;
}
}
});
</script>
```
这段代码的作用是创建一个下拉框<select>,其中包含四个选项,并创建一个文本框<input>,用于输入城市名称。当用户选择下拉框中的项时,文本框的值会被清空;当用户在文本框中输入城市名称时,下拉框会根据用户输入的内容自动匹配选项,如果匹配到多个选项
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)