Change selected option in a <select> clicking on a <span> and addclass to clicked span (-CodePudding

Given a <select> with a few options and given a <span> for each <option>, with id = select's content.

I would like to click on a <span> and select via jquery the corresponding <option> (and highlight clicked <span>);

but I would also like to be able to do the opposite: selecting an option and highlighting the corresponding span.

I created this script. It perfectly if I do one thing or the other. When I try mix click and select it stops working correctly.

function dropdownChangeSelection() {
  var id = $('#myselect option:selected').text();
  $('#myselect option').removeAttr('selected');
  $('#myselect option:contains('   id   ')').attr('selected', true);
  $('.test span').removeClass('bold');
  $('#'   id).addClass('bold');
}

function clickChangeSelection() {
  var thisid = $(this).attr('id');
  $('#myselect option').removeAttr('selected');
  $('#myselect option:contains('   thisid   ')').attr('selected', true);
  $('.test span').removeClass('bold');
  $('#'   thisid).addClass('bold');
}

$(document).ready(function() {
  dropdownChangeSelection();
  $('.test span').click(clickChangeSelection);
    $('#myselect').click(dropdownChangeSelection);
});

.bold { font-weight: bold; border: 1px solid blue; }
.test span:hover {cursor: pointer; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myselect">
  <option value="1">US1230213111</option>
  <option value="2">US123111903</option>
  <option value="3">US1230293200</option>
  <option value="4">US1231325565</option>
</select>
<br><br>
<div >

  <span id="US1230213111">US1230213111</span>
  <br><br>
  <span id="US123111903">US123111903</span>
  <br><br>
  <span id="US1230293200">US1230293200</span>
  <br><br>
  <span id="US1231325565">US1231325565</span>
</div>

<div >

</div>

CodePudding user response：

You can track the changes in your select input by onchange attribute and define a functions to do the action you desire.

function selectId(event) {
  let id = event.target.value
  $('span').removeClass('active')
  if (id == '') return
  $('span[data-item=' id ']').addClass('active')
}

$('span').click((event) => {
  let id = event.target.dataset.item
  $('select').val(id).change()
})

span{
  border:1px solid #ccc;
  padding:0 5px;
}
span.active{
  border-color:blue
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select onchange="selectId(event)">
  <option value='' selected></option>
  <option value="1001">Item 1001</option>
  <option value="1002">Item 1002</option>
  <option value="1003">Item 1003</option>
  <option value="1004">Item 1004</option>
</select>

<span data-item="1001">1001</span>
<span data-item="1002">1002</span>
<span data-item="1003">1003</span>
<span data-item="1004">1004</span>

CodePudding user response：

the way to do that in simple JS

const
  spTest   = document.querySelector('div.test')
, allSpan  = document.querySelectorAll('div.test > span')
, mySelect = document.querySelector('#myselect') 
  ;
// builder for select
allSpan.forEach(sp => mySelect.add( new Option(sp.textContent,sp.id)))
 
setFromSellect() // set the first select on init page

mySelect.onchange = setFromSellect;

spTest.onclick = ({target: sp}) => // event delegation
  {
  if (!sp.matches('span'))   return  // ignore clicks elsewhere
  
  mySelect.value = sp.id;
  setFromSellect();
  }

function setFromSellect()
  {
  allSpan.forEach( sp => sp.classList.toggle('bold', sp.id===mySelect.value ))
  }

.bold { font-weight: bold; border: 1px solid blue; }
.test span:hover {cursor: pointer; }

<select id="myselect"></select>
<br><br>
<div >
  <span id="US1230213111">US1230213111</span>
  <br><br>
  <span id="US123111903">US123111903</span>
  <br><br>
  <span id="US1230293200">US1230293200</span>
  <br><br>
  <span id="US1231325565">US1231325565</span>
</div>