选择li值，它会自动更新选择选项javascript

Question

当你点击一个li元素时，很难找到一个JavaScript解决方案，这会自动将select选项更新/更改为与li元素相同的值，我已经通过jQuery找到了解决方案，但我需要使用纯JavaScript来完成。下面是我的HTML代码供参考。基本上，当你点击li时，它需要自动更新select选项。

<ul id="target-clicks" class="target-clicks">  
<li data-sizeval="1" class="target active">S</li>  
<li data-sizeval="2" class="target">M</li>  
<li data-sizeval="3" class="target">L</li>  
<li data-sizeval="4" class="target">XL</li>
</ul>
<select aria-label="Select" name="attribute" id="attribute">
<option value="" disabled="">Select</option>
<option value="1">S</option>
<option value="2">M</option>
<option value="3">L</option>
<option value="4">XL</option>
</select>

如有任何帮助，我们将不胜感激。

Answer 1

只需列表上的一个简单侦听器就可以捕获所有子点击。然后获取该值并将其设置在选择：上

function onListClick(e) {
const nextValue = e.target.getAttribute('data-sizeval');

document.getElementById('attribute').value = nextValue;
}
document.getElementById('target-clicks').addEventListener('click', onListClick);

<ul id="target-clicks" class="target-clicks">  
<li data-sizeval="1" class="target active">S</li>  
<li data-sizeval="2" class="target">M</li>  
<li data-sizeval="3" class="target">L</li>  
<li data-sizeval="4" class="target">XL</li>
</ul>
<select aria-label="Select" name="attribute" id="attribute">
<option value="" disabled="">Select</option>
<option value="1">S</option>
<option value="2">M</option>
<option value="3">L</option>
<option value="4">XL</option>
</select>

Answer 2

您可以使用纯javascript设置select标记的值，如下面的

document.getElementById("attribute").selectedIndex = 1; //Updating from "1"

索引将是您从列表onclick中获得的值。

Answer 3

我会这样做。。。

const
UL_list     = document.querySelector('ul#target-clicks')
UL_list_li  = document.querySelectorAll('ul#target-clicks > li')
, select_list = document.querySelector('select#attribute')
;
UL_list.onclick = ({target : liElm}) =>
{
if (!liElm.matches('li')) return;
UL_list_li.forEach( li => li.classList.toggle('active', li === liElm));
select_list.value = liElm.dataset.sizeval;
}
select_list.onchange = e =>
{
let liElm = UL_list.querySelector(`li[data-sizeval="${select_list.value}"]`)
UL_list_li.forEach( li => li.classList.toggle('active', li === liElm));
}
// on page load..;
select_list.onchange() // first synchro select <--> li

#target-clicks > li:hover
{
background : yellow;
cursor     : pointer;
}
#target-clicks > li.active
{ 
color      : red; 
background : lightblue;
}

<ul id="target-clicks" class="target-clicks">  
<li data-sizeval="1" class="target">S</li>  
<li data-sizeval="2" class="target">M</li>  
<li data-sizeval="3" class="target">L</li>  
<li data-sizeval="4" class="target">XL</li>
</ul>

<select aria-label="Select" name="attribute" id="attribute">
<option value="" disabled selected>Select</option>
<option value="1">S</option>
<option value="2">M</option>
<option value="3">L</option>
<option value="4">XL</option>
</select>