页面上有一文本框,可以输入文本,还有一按钮,单击时可以将文本框的内容添加下拉列表中。若文本框没有内容,添加时会给出提示“请输入内容”,若要添加的内容已经在列表中,也需要提醒“已有”并将焦点定位至文本框。
时间: 2024-02-25 13:53:15 浏览: 140
好的,您的问题是页面上有一个文本框和一个按钮,如何实现将文本框的内容添加到下拉列表中,并且需要进行输入验证和重复判断。以下是一个简单的实现方式:
HTML 代码:
```html
<input type="text" id="inputText">
<button id="addBtn">添加</button>
<select id="selectList"></select>
```
JavaScript 代码:
```javascript
var inputText = document.getElementById("inputText");
var addBtn = document.getElementById("addBtn");
var selectList = document.getElementById("selectList");
addBtn.onclick = function() {
var text = inputText.value.trim();
if (text === "") {
alert("请输入内容");
inputText.focus();
return;
}
for (var i = 0; i < selectList.options.length; i++) {
if (selectList.options[i].value === text) {
alert("已有");
inputText.focus();
return;
}
}
var option = document.createElement("option");
option.value = text;
option.text = text;
selectList.add(option);
inputText.value = "";
};
```
这段代码的作用是,当用户单击添加按钮时,首先获取文本框中的内容,进行输入验证,如果没有输入则弹出提示框并将焦点定位到文本框。如果输入的内容已经在下拉列表中存在,则弹出提示框并将焦点定位到文本框。如果输入的内容可以添加到下拉列表中,则创建一个新的选项并添加到下拉列表中,并将文本框清空。
阅读全文