Как сделать выбраный пункт в Select активным

259

22 апреля 2017, 22:11

Я сделал выпадающий список меню элемента select и установил определенную категорию со значением value="4"

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<select id="city_id">
  <option disabled="Figure"></option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>
<script>
  $("select#city_id").val("4");
</script>

Задача состоит в том ,чтобы сделать элемента value="4" постоянно активным ,тоесть при открытии страницы, автоматически выпадал список со значение "Four" и не возможно было выбрать другой элемента списка . Вопрос возможно ли это сделать ?

Answer 1

Можно всё это сделать без JS. Просто на сам селект говорите что он отключен и на нужный элемент говорите что он выбран, вот так:

<select id="city_id" disabled> 
  <option value="Figure"></option> 
  <option value="1">One</option> 
  <option value="2">Two</option> 
  <option value="3">Three</option> 
  <option value="4" selected>Four</option> 
</select>

В этом случае правда не увидите другие элементы списка, если хотите чтоб список выпадал, но нельзя было выбрать тогда надо на все остальные элементы списка повесить атрибут disabled:

<select id="city_id"> 
  <option value="1" disabled>One</option> 
  <option value="2" disabled>Two</option> 
  <option value="3" disabled>Three</option> 
  <option value="4" selected>Four</option> 
</select>

Есть ещё вариант указать атрибут size, тогда список будет как бы открыт и его нельзя будет закрыть:

<select id="city_id" size="4"> 
  <option value="1" disabled>One</option> 
  <option value="2" disabled>Two</option> 
  <option value="3" disabled>Three</option> 
  <option value="4" selected>Four</option> 
</select>