Question 36827 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Change selected option in a <select> clicking on a <span> and addclass to clicked span (and viceversa) based on <select> content / <span> id – Jquery

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 class="test">

  <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 class="inner">

</div>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I worked on answers and I worked out my own solution which takes into account option content instead of its value attribute.

    function dropdownSelect(event) {
  var id = event.target[event.target.selectedIndex].text
  $('.test span').removeClass('active')
  if (id == '') return
  $('.test span[data-item=' + id + ']').addClass('active')
}

$('span').click((event) => {
  var id = event.target.dataset.item
  var value = $('select option:contains(' + id + ')').val();
  $('select').val(value).change()
})

$(document).ready(function() {
  var id = $('select option:selected').text();
  $('.test span[data-item=' + id + ']').addClass('active')
});
    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 id="myselect" onchange="dropdownSelect(event)">
  <option value="1">US1230213111</option>
  <option value="2">US123111903</option>
  <option value="3">US1230293200</option>
  <option value="4">US1231325565</option>
</select>

<br><br>
<div class="test">
  <span data-item="US1230213111">US1230213111</span>
  <br><br>
  <span data-item="US123111903">10US12311190302</span>
  <br><br>
  <span data-item="US1230293200">US1230293200</span>
  <br><br>
  <span data-item="US1231325565">US1231325565</span>
</div>


  2. 0

    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 class="test">
  <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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search