关于#javascript#的问题：如何通过js获取select的值


<td class="formValue">
       <div id="caiyangflag" type="select" class="ui-select" style="float: left; width: 100px;" onchange="btnclick()" data-value="156" data-text="失败">
             <ul>
                   <li data-value="100">全部li>
                   <li data-value="0">失败li>
                   <li data-value="1">成功li>
             ul>
       div>
 td>

如何通过js获取select的值

可以通过以下JavaScript代码获取该select元素的值：

var selectElement = document.getElementById("caiyangflag");
var selectedValue = selectElement.options[selectElement.selectedIndex].value;

解释：

document.getElementById("caiyangflag") 选择ID为"caiyangflag"的元素（即select元素），并将其赋值给selectElement变量。
selectElement.options[selectElement.selectedIndex] 选择被选中的option元素，并将其赋值给一个变量。
.value 选中option元素的值，并将其赋值给selectedValue变量。
这将返回选中选项的值（即100、0或1）。如果您想要选中选项的文本而不是值，请将.value替换为.text。

该回答引用ChatGPT
可以通过以下代码获取 select 元素的值：


var selectElement = document.getElementById('caiyangflag');
var selectedValue = selectElement.value;

其中，document.getElementById() 方法获取到 select 元素，并将其存储在 selectElement 变量中。然后，可以通过访问 value 属性来获取所选选项的值，并将其存储在 selectedValue 变量中。

设置点击事件 然后 通过 设置属性就行（setAttribute），因为 data-value这种形式就是属性 。


<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>

<body>

   <td class="formValue">
      <div id="caiyangflag" type="select" class="ui-select" style="float: left; width: 100px;" 
         data-value="156" data-text="失败">
         <ul onclick="btnclick(event)">
            <li data-value="100">全部</li>
            <li data-value="0">失败</li>
            <li data-value="1">成功</li>
         </ul>
      </div>
   </td>
</body>
<script>
   let caiyang = document.getElementById("caiyangflag");
   function btnclick(e) {
      
      let value=e.target.getAttribute("data-value");
      let text=e.target.innerText;

      caiyang.setAttribute("data-value",value);
      caiyang.setAttribute("data-text",text);
      alert(`选中的值 为 ${value} - text为 ${text}`)

      //caiyang.getAttribute("data-value"); 就可以获取到了
   }
   
</script>

</html>

可通过循环dom和获取属性方式(getAttribute)来获取需要的内容：


<html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
</head>
<body id="content">
    <td class="formValue">
           <div id="caiyangflag" type="select" class="ui-select" style="float: left; width: 100px;" onchange="btnclick()" data-value="156" data-text="失败">
                 <ul>
                       <li data-value="100" data-selected="selected">全部</li>
                       <li data-value="0">失败</li>
                       <li data-value="1">成功</li>
                 </ul>
           </div>
     </td>
</div>
 <script type="text/javascript">
window.onload = function () {
    let target = document.querySelectorAll("#caiyangflag li");
    let value = [];
    let selectValue = 100;
    for (i = 0; i < target.length;i++) {
        // 获取所有的值
        // 如果获取文本：target[i].innerHtml;
        let liValue = target[i].getAttribute('data-value');
        value[i] = liValue
        
        // 获取选中的值或者文本
        let selected = target[i].getAttribute('data-selected');
        if (selected == 'selected' || selected = true) {
            //  如果文本：target[i].innerHtml;
            selectValue = target[i].getAttribute('data-value');
        }
    }
    console.log(value);
    console.log(selectValue);
}
 </script>
</body>
</html>

可以通过以下 JavaScript 代码获取 select 的值：


// 获取 select 元素
var selectElem = document.getElementById("caiyangflag");

// 获取当前选中的值和文本
var selectedValue = selectElem.dataset.value;
var selectedText = selectElem.dataset.text;

其中，getElementById 方法获取指定 ID 的元素，dataset 属性用于获取 data- 前缀的属性值。在此例中，data-value 和 data-text 分别对应了选中的值和文本。