用js和html写出完整代码
时间: 2023-12-24 19:04:29 浏览: 23
好的,以下是一个简单的实现,包含HTML和JavaScript代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>文本框和下拉列表交互</title>
</head>
<body>
<label for="input-text">请输入内容:</label>
<input type="text" id="input-text">
<button onclick="addItem()">添加</button>
<select id="select-list"></select>
<script>
// 获取文本框和下拉列表的DOM元素
var inputText = document.getElementById("input-text");
var selectList = document.getElementById("select-list");
// 添加选项到下拉列表中
function addItem() {
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 = ""; // 清空文本框
inputText.focus(); // 将焦点定位至文本框
}
</script>
</body>
</html>
```
以上代码中,我们首先获取了文本框和下拉列表的DOM元素,然后定义了一个`addItem`函数,用于添加选项到下拉列表中。在函数中,首先获取了文本框中的内容,并去除了空格。如果文本框中没有内容,则弹出提示框并将焦点定位至文本框。如果要添加的选项已经在下拉列表中,则也弹出提示框并将焦点定位至文本框。如果要添加的选项是新的,则创建一个新的`option`元素,设置其`value`和`text`属性,并将其添加到下拉列表中。最后,清空文本框并将焦点定位至文本框。