select li value which automatically updates select option javascript-CodePudding

Struggling to find a JavaScript solution for when you click on an li element, this will automatically update/change the select option to the same value as the li element, I've found the solution to this through jQuery however I need to complete this using pure javascript. Here's my HTML code below for reference. Basically when you click on the li, it needs to automatically update on the select option.

<ul id="target-clicks" >  
 <li data-sizeval="1" >S</li>  
 <li data-sizeval="2" >M</li>  
 <li data-sizeval="3" >L</li>  
 <li data-sizeval="4" >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>

Any help on this would be really appreciated.

CodePudding user response：

Just a simple listener on the list will catch all child clicks. Then obtain the value and set it on the select:

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" >  
 <li data-sizeval="1" >S</li>  
 <li data-sizeval="2" >M</li>  
 <li data-sizeval="3" >L</li>  
 <li data-sizeval="4" >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>

CodePudding user response：

You can set the value of a select tag using pure javascript like below

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

The index will be the value that you get from list onclick.

CodePudding user response：

I will do that this way...

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" >  
  <li data-sizeval="1" >S</li>  
  <li data-sizeval="2" >M</li>  
  <li data-sizeval="3" >L</li>  
  <li data-sizeval="4" >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>