原生js获取select选中的值
时间: 2023-10-04 10:05:44 浏览: 52
要使用原生JS获取select选中的值,可以使用以下代码:
```javascript
var selectElement = document.getElementById("selectId");
var selectedValue = selectElement.value;
console.log(selectedValue);
```
其中,`selectId`是你要获取值的select元素的id。通过`getElementById`方法获取到select元素的引用,然后使用`value`属性获取选中的值。最后,你可以将选中的值打印到控制台或做其他操作。
相关问题
原生js select选择一个指定的值select下拉框变为输入框
以下是将select下拉框变为输入框的JavaScript代码:
```javascript
// 获取select元素
var selectElement = document.getElementById("mySelect");
// 获取select选中的值
var selectedValue = selectElement.value;
// 创建一个新的input元素
var inputElement = document.createElement("input");
// 设置input元素的属性
inputElement.type = "text";
inputElement.value = selectedValue;
inputElement.id = "myInput";
// 替换select元素为input元素
selectElement.parentNode.replaceChild(inputElement, selectElement);
```
这段代码首先获取了一个id为“mySelect”的select元素,并获取了它当前选中的值。然后创建了一个新的input元素,设置了它的属性。最后,使用parentNode.replaceChild()方法将select元素替换为input元素。现在,下拉框就变成了一个文本输入框。
树形图select框 原生js
以下是一个使用原生 JavaScript 实现树形选择框的示例代码:
HTML:
```html
<div id="tree-select">
<select id="tree-select-options">
<option value="">请选择</option>
</select>
</div>
```
JavaScript:
```js
var treeData = [
{
id: 1,
label: "节点1",
children: [
{
id: 11,
label: "节点1-1",
children: [
{
id: 111,
label: "节点1-1-1",
},
{
id: 112,
label: "节点1-1-2",
},
],
},
{
id: 12,
label: "节点1-2",
},
],
},
{
id: 2,
label: "节点2",
children: [
{
id: 21,
label: "节点2-1",
},
{
id: 22,
label: "节点2-2",
},
],
},
];
var selectOptions = document.getElementById("tree-select-options");
function generateTreeSelectOptions(data, level) {
for (var i = 0; i < data.length; i++) {
var option = document.createElement("option");
option.value = data[i].id;
option.text = " ".repeat(level) + data[i].label;
selectOptions.appendChild(option);
if (data[i].children) {
generateTreeSelectOptions(data[i].children, level + 1);
}
}
}
generateTreeSelectOptions(treeData, 0);
```
该示例代码中,首先定义了一个树形数据 `treeData`,其中每个节点包含 `id` 和 `label` 属性,以及可能存在的 `children` 子节点。然后在 HTML 中定义了一个 `select` 元素,用于展示树形选择框。
接下来,在 JavaScript 中定义了一个 `generateTreeSelectOptions` 函数,用于生成树形选择框的选项。该函数接受两个参数:树形数据 `data` 和当前节点的层级 `level`。函数使用循环遍历树形数据,将每个节点作为一个选项添加到 `select` 元素中,并通过递归调用自身生成子节点的选项。
最后,在主函数中调用 `generateTreeSelectOptions` 函数,传入树形数据和初始层级 0。这样就可以生成一个树形选择框了。
相关推荐
![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)