页面上有一文本框,可以输入文本,还有一按钮,单击时可以将文本框的内容添加下拉列表中。若文本框没有内容,添加时会给出提示“请输入内容”,若要添加的内容已经在列表中,也需要提醒“已有”并将焦点定位至文本框。
时间: 2024-02-25 17:57:07 浏览: 20
您的问题是关于一个页面上的表单功能,即文本框输入内容后添加至下拉列表中,并且需要进行一些提示和判断。我可以给您提供一些思路,您可以参考一下。
首先,您需要将下拉列表和按钮放置在页面上,并且为按钮添加一个点击事件的监听器。在监听器中,您需要进行以下判断:
1. 判断文本框是否为空,如果是,则提示“请输入内容”,并且不进行添加操作。
2. 判断要添加的内容是否已经在下拉列表中,如果是,则提示“已有”并将焦点定位至文本框,同时不进行添加操作。
3. 如果要添加的内容既不为空,也不在下拉列表中,那么就将其添加至下拉列表中,并且清空文本框。
您可以使用 JavaScript 实现这个功能,具体代码如下:
HTML 代码:
```
<input type="text" id="inputBox">
<button id="addBtn">添加</button>
<select id="selectBox"></select>
```
JavaScript 代码:
```
var inputBox = document.getElementById("inputBox");
var addBtn = document.getElementById("addBtn");
var selectBox = document.getElementById("selectBox");
addBtn.onclick = function() {
var content = inputBox.value;
if (content === "") {
alert("请输入内容");
inputBox.focus();
return;
}
for (var i = 0; i < selectBox.options.length; i++) {
if (selectBox.options[i].text === content) {
alert("已有");
inputBox.select();
return;
}
}
var option = document.createElement("option");
option.text = content;
selectBox.add(option);
inputBox.value = "";
}
```
在这个代码中,我们首先获取了页面中的文本框、按钮和下拉列表元素。然后,我们为按钮添加了一个点击事件的监听器,在监听器中实现了上述的三个判断和操作。其中,我们使用了 JavaScript 中的 `alert` 函数来进行提示,使用 `focus` 函数和 `select` 函数来进行焦点定位和文本框内容的选中。最后,我们使用了 `createElement` 函数和 `add` 函数来向下拉列表中添加新的选项。
希望这个代码可以帮助您完成您的需求,如果还有其他问题,欢迎继续提问。