js多个文本框合并成下拉框
时间: 2023-02-08 16:48:43 浏览: 113
文本框与下拉框的结合
4星 · 用户满意度95%
可以使用 JavaScript 将多个文本框合并成下拉框。具体做法如下:
1. 创建一个新的下拉框元素,使用 document.createElement("select")。
2. 循环遍历所有的文本框元素,使用 document.querySelectorAll() 或其他方法。
3. 在循环中,对于每个文本框元素,创建一个新的 option 元素。
4. 为每个 option 元素设置 value 属性为文本框的值。
5. 将每个 option 元素添加到新的下拉框元素中。
6. 将新的下拉框元素添加到 HTML 页面中的相应位置,使用 document.appendChild() 或其他方法。
7. 移除所有的文本框元素,可以使用 remove() 方法。
示例代码如下:
```
<!DOCTYPE html>
<html>
<body>
<form>
<input type="text" id="text1">
<input type="text" id="text2">
<input type="text" id="text3">
</form>
<button onclick="myFunction()">合并文本框</button>
<script>
function myFunction() {
var select = document.createElement("select");
var texts = document.querySelectorAll("input[type=text]");
for(var i = 0; i < texts.length; i++) {
var option = document.createElement("option");
option.value = texts[i].value;
option.text = texts[i].value;
select.appendChild(option);
}
document.body.appendChild(select);
texts.forEach(function(text) {
text.remove();
});
}
</script>
</body>
</html>
```
上面这段代码中,点击按钮执行myFunction()函数,在页面中新建一个下拉框,并且将原有的
阅读全文