Как выделить определенное значение в раскрывающемся списке окна выбора при первом раскрытии списка

Question

У меня есть выпадающий список с несколькими вариантами. То, что я пытаюсь достичь, заключается в том, что при щелчке раскрывающегося списка вместо выделения «Выбрать» вместо этого выделяется значение в середине (например, 21.00) - не выбрано, а просто выделено. Затем пользователь должен сам выбрать это среднее значение (или другое значение, если они хотят).

Я хочу, чтобы это происходило только при первом щелчке по списку и выборе значения. После этого может произойти нормальное поведение раскрывающегося списка.

Я пробовал использовать jQuery наведение мыши, но безуспешно.

$("#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>

Как я могу этого добиться?

Спасибо

Answer 1

Не похоже, что есть какой-либо способ добиться этого с помощью элемента select в HTML. Однако есть другой подход, который вы можете использовать для достижения того же.

Вы можете создать настраиваемый раскрывающийся список с элементом ul и скрыть элемент select. Таким образом, вы можете управлять поведением раскрывающегося списка.

Ниже приведен фрагмент того же:

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>

Answer 2

Если щелкнуть, то получить опцию-элемент с желаемым значением. Возьмите первый (поскольку $ ("...") может доставить более одного), получите список классов.
Проверьте, содержит ли он класс displayed. Если не установить этот класс и класс blue, в противном случае удалите синий класс. При этом вы устанавливаете класс blue только один раз при первом нажатии. С помощью CSS вы можете установить цвет фона.
Примечание: Для демонстрации я установил здесь красный цвет, чтобы увидеть разницу с обычным синим.

$( "#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>