Выпадающий список выбора HTML

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

Если есть способ jquery сделать это, это будет очень полезно

Ответы

Ответ 1

В качестве первой опции используйте <option value="">- Please select a name -</option> и используйте JavaScript (и проверку подлинности), чтобы убедиться, что пользователь выбрал что-то отличное от пустого значения.

Ответ 2

Попробуйте это:

<select>
    <option value="" disabled="disabled" selected="selected">Please select a name</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Ответ 3

<select>
    <option value="" style="display:none">Choose one provider</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Ответ 4

Это старый пост, но у меня это сработало

<select>
  <option value="" disabled selected>Please select a name...</option> 
  <option>this</option>
  <option>that</option>
</select>

Ответ 5

  <select name="test">
      <option hidden="true">Please select a name</option>
      <option value="Cash">Cash</option>
      <option value="Draft">Demand Draft No.</option>
      <option value="Cheque">Cheque No.</option>
  </select>

Ответ 7

Просто, я полагаю. Атрибут onclick работает хорошо...

<select onchange="if(this.value == '') this.selectedIndex = 1; ">
  <option value="">Select an Option</option>
  <option value="one">Option 1</option>
  <option value="two">Option 2</option>
</select>

Ответ 8

<select>
    <option value="" disabled="disabled" selected="selected">Please select name</option>
  <option value="Tom">Tom</option>
  <option value="Marry">Marry</option>
  <option value="Jane">Jane</option>
  <option value="Harry">Harry</option>
</select>

Ответ 9

Если вы хотите добиться того же самого для jquery-ui selectmenu, тогда вы должны установить 'display: none' в обработчик события open и добавить '-menu' в строку id.

<select id="myid">
<option value="" disabled="disabled" selected="selected">Please select     name</option>
 <option value="Tom">Tom</option>
 <option value="Marry">Mary</option>
 <option value="Jane">Jane</option>
 <option value="Harry">Harry</option>
 </select>

$('select#listsTypeSelect').selectmenu({
  change: function( event, data ) {
    alert($(this).val());
},
open: function( event, ui ) {
    $('ul#myid-menu li:first-child').css('display', 'none');
}
});

Ответ 10

Я сожалею о том, что у меня старое сообщение, но я нашел лучший способ сделать это

Я считаю, что этот плакат хотел:

<label for="mydropdown" datalabel="mydropdown">Country:</label>    
<select name="mydropdown">
    <option value="United States">United States</option>
    <option value="Canada">Canada</option>
    <option value="Mexico">Mexico</option>
    <option value="Other">Not Listed</option>
</select>

Я нашел эту информацию в другом посте при поиске этого же ответа - Спасибо

Ответ 11

<select>
  <option value="" disabled selected hidden>Select an Option</option>
  <option value="one">Option 1</option>
  <option value="two">Option 2</option>
</select>

Ответ 12

Создайте элемент управления JavaScript, чтобы перед подачей щеки выбранный параметр отличался от вашего первого варианта.

Ответ 13

Вот как я это делаю с помощью JQuery...

используя плагин jquery-watermark (http://code.google.com/p/jquery-watermark/)

$('#inputId').watermark('Please select a name');

работает как шарм!

На этом сайте google есть хорошая документация.

Надеюсь, это поможет!

Ответ 14

    <select>
         <option value="" disabled="disabled" selected="selected">Please select a 
              developer position</option>
          <option value="1">Beginner</option>
          <option value="2">Expert</option>
     </select>