選擇自動更新選擇選項javascript的li值-有解無憂

當您單擊 li 元素時，努力尋找 JavaScript 解決方案，這將自動更新/更改選擇選項為與 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>

對此的任何幫助將不勝感激。

uj5u.com熱心網友回復：

只需串列中的一個簡單偵聽器即可捕獲所有子點擊。然后獲取值并將其設定在選擇上：

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>

uj5u.com熱心網友回復：

您可以使用純 javascript 設定選擇標記的值，如下所示

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

索引將是您從串列 onclick 中獲得的值。

uj5u.com熱心網友回復：

我會這樣做...

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;
  }

.active { color : red; }

#target-clicks > li:hover
  {
  background : yellow;
  cursor     : pointer;
  }

<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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/515877.html

標籤：javascript列表选择

上一篇：如何解決關閉（）函式中的“SHUT_RDWR未宣告錯誤”以關閉偵聽套接字？

下一篇：僅按屬于串列的行分組