How to highlight certain value on select box dropdown, first time expanding list

Question

I have a dropdown list with several options. What I am trying to achieve is, upon clicking the dropdown list, instead of 'Select' being highlighted, a value in the middle (such as 21.00) is highlighted instead - not selected, just highlighted. The user would then have to select this middle value themselves (or another value if they want).

I only want this to happen on the first time the list is clicked and a value selected. After that, the normal behavior of the dropdown list can occur.

I've tried using jQuery mouseover but no luck.

$("#mydropdownlist").click(function() {

  $('select>option:eq(17)').attr('selected', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control list-question-select" id="mydropdownlist" name="mydropdownlist">
  <option value="">Select</option>
  <option value="25.00">25.00</option>
  <option value="24.75">24.75</option>
  <option value="24.50">24.50</option>
  <option value="24.25">24.25</option>
  <option value="24.00">24.00</option>
  <option value="23.75">23.75</option>
  <option value="23.50">23.50</option>
  <option value="23.25">23.25</option>
  <option value="23.00">23.00</option>
  <option value="22.75">22.75</option>
  <option value="22.50">22.50</option>
  <option value="22.25">22.25</option>
  <option value="22.00">22.00</option>
  <option value="21.75">21.75</option>
  <option value="21.50">21.50</option>
  <option value="21.25">21.25</option>
  <option value="21.00">21.00</option>
  <option value="20.75">20.75</option>
  <option value="20.50">20.50</option>
  <option value="20.25">20.25</option>
  <option value="20.00">20.00</option>
  <option value="19.75">19.75</option>
  <option value="19.50">19.50</option>
  <option value="19.25">19.25</option>
  <option value="19.00">19.00</option>
  <option value="18.75">18.75</option>
  <option value="18.50">18.50</option>
  <option value="18.25">18.25</option>
  <option value="18.00">18.00</option>
  <option value="17.75">17.75</option>
  <option value="17.50">17.50</option>
  <option value="17.25">17.25</option>

</select>

How can I achieve this?

Thanks

Sascha · Answer 1 · 2020-08-07T10:46:16.533

If clicked than get the option-element with desired value. Take the first one (because $("...") can deliever more than one), get the classlist.
Check if it contains class displayed. If not set this class and class blue otherwise remove class blue. With this you set the class blue only once at the first click. Via CSS you can set the backgroundcolor.
Note: For demonstration I set here color red to see the difference to the normal select blue.

$( "#mydropdownlist" ).click(function() {
    let option = $("#mydropdownlist option[value='23.00']" )[0];
    if (option.classList.contains('displayed')) {
    option.classList.remove('blue');
  } else {
    option.classList.add('blue', 'displayed');
  }
});

.blue {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control list-question-select" id="mydropdownlist" name="mydropdownlist"><option value="">Select</option>
<option value="25.00">25.00</option>
<option value="24.75">24.75</option>
<option value="24.50">24.50</option>
<option value="24.25">24.25</option>
<option value="24.00">24.00</option>
<option value="23.75">23.75</option>
<option value="23.50">23.50</option>
<option value="23.25">23.25</option>
<option value="23.00">23.00</option>
<option value="22.75">22.75</option>
<option value="22.50">22.50</option>
<option value="22.25">22.25</option>
<option value="22.00">22.00</option>
<option value="21.75">21.75</option>
<option value="21.50">21.50</option>
<option value="21.25">21.25</option>
<option value="21.00">21.00</option>
<option value="20.75">20.75</option>
<option value="20.50">20.50</option>
<option value="20.25">20.25</option>
<option value="20.00">20.00</option>
<option value="19.75">19.75</option>
<option value="19.50">19.50</option>
<option value="19.25">19.25</option>
<option value="19.00">19.00</option>
<option value="18.75">18.75</option>
<option value="18.50">18.50</option>
<option value="18.25">18.25</option>
<option value="18.00">18.00</option>
<option value="17.75">17.75</option>
<option value="17.50">17.50</option>
<option value="17.25">17.25</option>

</select>

Thanks, I noticed the 'Select' is still also highlighted in blue, I guess that can be removed by CSS. Also, If I choose a value further down the list where you have to scroll, this doesn't work too well. It will highlight the relevent option but doesn't scroll down to where that option is in the list — Metzer, Aug 07 '20 at 10:44
You can do the same way with value="" but this changes color only if you hover the mouse to a field below. It's not pssible with JS. You can look here https://stackoverflow.com/questions/19388011/how-to-change-colour-of-blue-highlight-on-select-box-dropdown/19388345 the answer from Ilia Rostovtsev may help a little. — Sascha, Aug 07 '20 at 11:30

score 1 · Accepted Answer · answered Aug 07 '20 at 11:49

It does not seem like there is any way to achieve that thing with select element in HTML. However, there is another approach you can use to achieve the same.

You can create a custom dropdown with ul element and hide the select element. By that, you can control behavior of the dropdown.

Below is a snippet for the same :

function newfn() {
  let options = $("#mydropdownlist").children();
  let counter = options.length;

  options.each(function(index) {
    let listItem = '<li>' + $(this).text() + '</li>';
    $('#custom-list').append(listItem);
    if (index === 0) {
      $('#selection').text($(this).text());
    }
  });

  $('#custom-list').width($("#selection").width() + 20);
}
newfn();

var flag = true;

$('#selection').click(function() {
  let list = $('#custom-list');
  if (list.is(':visible')) {
    list.hide();
  } else {
    list.show();
    if(flag){
      $("#custom-list li").eq(5).addClass("begin");
      flag = false;
    } 
  }
});

$('#custom-list li').click(function() {
  let selected = $(this).index();
  let list = $('#mydropdownlist');
  $('#mydropdownlist').children().eq(selected).attr("selected", true);
  $('#selection').text(list.val());
  $(this).parent().hide();
});

$('#custom-list').mouseover(function(){
  $('.begin').removeClass('begin');
});

#mydropdownlist {
  display: none;
}

#custom-list {
  list-style: none;
  z-index: 10;
  padding: 0;
  margin: 0;
  display: none;
  border: 1px solid grey;
}

#custom-list li {
  padding: 0 10px;
}

#selection {
  padding: 5px 10px;
  cursor: default;
  display: inline-block;
  border: 1px solid;
  width: 10rem;
}

#custom-list li:hover, .begin {
  background: #0095ff;
  color: #fff;
  cursor: default;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control list-question-select" id="mydropdownlist" name="mydropdownlist">
  <option value="">Select</option>
  <option value="25.00">25.00</option>
  <option value="24.75">24.75</option>
  <option value="24.50">24.50</option>
  <option value="24.25">24.25</option>
  <option value="24.00">24.00</option>
  <option value="23.75">23.75</option>
  <option value="23.50">23.50</option>
  <option value="23.25">23.25</option>
  <option value="23.00">23.00</option>
  <option value="22.75">22.75</option>
  <option value="22.50">22.50</option>
  <option value="22.25">22.25</option>
  <option value="22.00">22.00</option>
  <option value="21.75">21.75</option>
  <option value="21.50">21.50</option>
  <option value="21.25">21.25</option>
  <option value="21.00">21.00</option>
  <option value="20.75">20.75</option>
  <option value="20.50">20.50</option>
  <option value="20.25">20.25</option>
  <option value="20.00">20.00</option>
  <option value="19.75">19.75</option>
  <option value="19.50">19.50</option>
  <option value="19.25">19.25</option>
  <option value="19.00">19.00</option>
  <option value="18.75">18.75</option>
  <option value="18.50">18.50</option>
  <option value="18.25">18.25</option>
  <option value="18.00">18.00</option>
  <option value="17.75">17.75</option>
  <option value="17.50">17.50</option>
  <option value="17.25">17.25</option>

</select>
<span id="selection"></span>
<ul id="custom-list">
</ul>

Thank you, This is more towards what I am after, it does seem to scroll down the list too, if I set the eq( ) to be towards the end of the list. I guess I can just apply some css to make the dropdown look like a normal Select dropdown — Metzer, Aug 07 '20 at 11:58
Yes, you can apply CSS, and it will definitely look like the default dropdown I just did the basic part to make a replica. — Pranav Rustagi, Aug 07 '20 at 13:56

How to highlight certain value on select box dropdown, first time expanding list

2 Answers2