Как запретить пользователю выбирать значение по умолчанию в раскрывающемся списке css? - PullRequest
Новая
       36

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

0 голосов
/ 04 июня 2018

У меня есть форма, в которой я добавил «Пожалуйста, выберите» вариант для раскрывающегося списка.

Форма должна работать таким образом, что если пользователи не выбирают значения 1, 2-5, 6-15, 16-30 и т. Д., То форма не должна отправляться.

В моей форме, если я выберу «Пожалуйста, выберите», то форма будет отправлена, поскольку она обрабатывается как 1, 2-5, 6-15, 16-30 и т. Д.

Коды HTML для формы, сгенерированной во время выполнения: 

 <select name="input_12" id="input_37_12" class="medium gfield_select" tabindex="5" aria-required="true" aria-invalid="false">
   <option value="Please Select" selected="selected">Please Select</option>
   <option value="1">1</option>
   <option value="2-5">2-5</option>
   <option value="6-15">6-15</option>
   <option value="16-30">16-30</option>
   <option value="31-100">31-100</option>
   <option value="101-250">101-250</option>
   <option value="251-1000">251-1000</option>
   <option value="1001-2500">1001-2500</option>
   <option value="2501 +">2501 +</option>
</select>



Постановка задачи:

Мне интереснокакие изменения я должен внести в приведенный выше HTML-код, чтобы параметр «Пожалуйста, выберите» не обрабатывался как другие раскрывающиеся значения (1, 2-5, 6-15, 16-30 и т. д.) в HTML.

Ответы [ 2 ]

0 голосов
/ 05 июня 2018

Чтобы просто запретить пользователям выбирать опцию, просто добавьте disabled в html для опции (как указано в вопросе из комментария, помечающего это как возможный дубликат, @csmckelvey).

Тем не менее, вы также можете просто добавить display:none к опции: 

select option:first-of-type{
    display:none;
}

По крайней мере, работает на Android, и все же показать текст первого варианта (даже если он должен быть скрыт - не знаю, почему).

В любом случае важно не забывать проверять форму, как предлагает другой ответ.

0 голосов
/ 04 июня 2018

Для принудительной проверки формы на входе выбора необходимо использовать атрибут required в форме выбора и установить значение начальной опции на "".

Примечание : aria-required="true" также отлично работает, особенно для браузеров, которые еще не поддерживают HTML5, я просто предпочитаю более короткую альтернативу HTML5.Это также относится к selected="selected" против selected. 

<form>
  <select name="input_12" id="input_37_12" class="medium gfield_select" tabindex="5" required aria-invalid="false">
    <option value="" selected>Please Select</option>
    <option value="1">1</option>
    <option value="2-5">2-5</option>
    <option value="6-15">6-15</option>
    <option value="16-30">16-30</option>
    <option value="31-100">31-100</option>
    <option value="101-250">101-250</option>
    <option value="251-1000">251-1000</option>
    <option value="1001-2500">1001-2500</option>
    <option value="2501 +">2501 +</option>
  </select>
  <button type="submit">Submit</button>
</form>

Редактировать : Это также можно сделать с помощью Javascript. 

// Obtain our form via its ID
var form = document.querySelector('form');

// Add a listener to our form to wait for its submission
if (form.addEventListener) {
  form.addEventListener("submit", validate, false); //Modern browsers
} else if (form.attachEvent) {
  form.attachEvent('onsubmit', validate); //Old IE
}

function validate(e) {
  var select = e.target.querySelector("select");
  
  // Get the value of our selected option
  var selectedOption = select.options[select.selectedIndex].value;
  
  // Compare the value of the default option to the selected option
  if (selectedOption === "Please Select") {
    // Trigger Error and prevent the form submission
    alert("Please select an option!")
    e.preventDefault();
  }
}
<form>
  <select name="input_12" id="input_37_12" class="medium gfield_select" tabindex="5" aria-required="true" aria-invalid="false">
    <option value="Please Select" selected="selected">Please Select</option>
    <option value="1">1</option>
    <option value="2-5">2-5</option>
    <option value="6-15">6-15</option>
    <option value="16-30">16-30</option>
    <option value="31-100">31-100</option>
    <option value="101-250">101-250</option>
    <option value="251-1000">251-1000</option>
    <option value="1001-2500">1001-2500</option>
    <option value="2501 +">2501 +</option>
  </select>
  <button type="submit">Button</button>
</form>
...