检索子属性值Javascript

我有下面的HTML代码，它基本上是一个自定义的选择框。我使用HTML5数据属性来检索每个下拉列表的选定值，并将其保存到变量中，以便在服务调用中传递它们

每个选择组类将具有不同的数据选择类型。但是我想在它里面遍历并得到所选的值

<div class="select-group-container">
   <div class="select-group" data-selectType="country">
      <span class="select-label">Country</span>
      <ul class='custom-select'>
         <li class="dropdown">
            <a href="#" data-toggle="dropdown">USA</a>   //Selected Value
            <ul class="dropdown-menu hide">
               <li><a href="#" data-optValue="Optios 1">Germany</a></li>
               <li><a href="#" data-optValue="Option 2">France</a></li>
               <li><a href="#" data-optValue="Option 3">Spain</a></li>
               <li><a href="#" data-optValue="Option 4">USA</a></li>
            </ul>
         </li>
      </ul>
   </div>
   <div class="select-group" data-selectType="language">
      <span class="select-label">Language</span>
      <ul class='custom-select'>
         <li class="dropdown">
            <a href="#" data-toggle="dropdown">English</a> // Selected Value
            <ul class="dropdown-menu hide">
               <li><a href="#" data-optValue="Optios 1">German</a></li>
               <li><a href="#" data-optValue="Option 2">French</a></li>
               <li><a href="#" data-optValue="Option 3">Spanish</a></li>
               <li><a href="#" data-optValue="Option 4">English</a></li>
            </ul>
         </li>
      </ul>
   </div>
   <button type="submit" class="save-user-setting">Save All Settings</button>
</div>

我希望使用纯javascript实现这一点。没有jquery或任何其他框架。提前谢谢

每个选择组类将具有不同的数据选择类型

var selectType = document.querySelector('.select-group-container .select-group').getAttribute("data-selectType");

如果是这种情况，那么在HTML中，您应该为所选的值锚定标记提供Id

<a href="#" data-toggle="dropdown" id="country">USA</a>   //Selected Value

<a href="#" data-toggle="dropdown" id="language">English</a> // Selected Value

并从中获得相应的文本：

console.log(document.getElementById("#"+selectType).text);

---

我假设

所选值

是带有

数据切换=“dropdown”

属性的链接：

//它便于在非数组可重用项上进行映射，如HTMLCollection或NodeList
var map=arr=>fn=>Array.prototype.map.call（arr，fn）
//你的钮扣
var submit=document.querySelector（'.save user setting'）；
submit.addEventListener（'click'，function（））{
//获取所有链接，使用“数据切换”筛选链接
//通过（x=>x），我们只需在HTMLCollection之外创建一个数组，以便以后能够使用过滤器和映射
var links=map（document.querySelectorAll（'.select-group-container.select-group-a'））（x=>x）
.filter（l=>l.dataset.toggle==='dropdown'）
.map（（{textContent}）=>textContent）；//获取每个链接的textContent
var[country，language]=links；//您的值，使用解构
console.log（国家、语言）；
});

国家


//选定值








语言


//选定值








保存所有设置

console.log(document.getElementById("#"+selectType).text);