当前位置：首页 > 行业动态 > 正文

如何使用divjs获取所选li元素的值？

admin
行业动态
2025-01-27
4

### ，divjs获取所选li的值：该功能允许开发者通过JavaScript库DivJS轻松获取用户在网页上选择的列表项（li）的值，从而简化了与用户交互的处理过程。

在Web开发中，使用JavaScript获取用户所选的<li>元素值是一个常见的需求，这通常涉及到操作DOM（文档对象模型）来监听用户的交互并获取相应的数据，下面将通过一个详细的示例来说明如何使用纯JavaScript实现这一功能。

如何使用divjs获取所选li元素的值？第1张

步骤一：HTML结构搭建

我们需要一个简单的HTML结构，其中包含一个<ul>列表和几个<li>子项，为了能够选择这些项，我们通常会为每个<li>添加一个radio输入或者使用其他方式标记选择状态，这里，我们使用radio输入来实现单选功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取所选li的值</title>
</head>
<body>
    <ul id="itemList">
        <li><input type="radio" name="itemSelect" value="Item 1"> Item 1</li>
        <li><input type="radio" name="itemSelect" value="Item 2"> Item 2</li>
        <li><input type="radio" name="itemSelect" value="Item 3"> Item 3</li>
    </ul>
    <button onclick="getSelectedValue()">获取选中的值</button>
    <p id="result"></p>
    <script src="script.js"></script>
</body>
</html>

在这个例子中，每个<li>元素内都有一个radio按钮，它们共享同一个name属性（即itemSelect），这样就能确保它们是互斥的，即只能选择一个。

步骤二：JavaScript逻辑实现

我们在script.js文件中编写JavaScript代码来处理用户的选择并获取所选<li>的值。

function getSelectedValue() {
    // 获取所有radio按钮
    const radios = document.querySelectorAll('input[name="itemSelect"]');
    let selectedValue = null;
    // 遍历radio按钮，找到被选中的那个
    radios.forEach(radio => {
        if (radio.checked) {
            selectedValue = radio.value;
        }
    });
    // 将选中的值显示在页面上
    if (selectedValue !== null) {
        document.getElementById('result').innerText = '您选择的是: ' + selectedValue;
    } else {
        document.getElementById('result').innerText = '请先选择一个项目';
    }
}

这段代码首先通过querySelectorAll方法选取所有名称为itemSelect的radio按钮，它遍历这些按钮，检查哪个按钮被选中（即checked属性为true），一旦找到被选中的按钮，就将其value属性值赋给selectedValue变量，根据selectedValue的值更新页面上的显示内容。