Удаление «по умолчанию» <option>в поле выбора - PullRequest
Новая
       13

Удаление «по умолчанию» <option>в поле выбора

9 голосов
/ 31 января 2012

Вот мое поле выбора: 

<select id="category">
   <option value="">Pick a choice!</option>
   <option value="">choice1</option>
   <option value="">choice2</option>
   <option value="">choice3</option>
   <option value="">choice4</option>
</select>

Я хочу, чтобы опция Pick a choice! была удалена, когда пользователь нажмет на поле выбора.Если пользователь щелкнет где-либо еще, вернется опция Pick a choice!.Я не хочу, чтобы пользователь мог выбрать опцию Pick a choice!.Что мне делать?

Ответы [ 4 ]

5 голосов
/ 10 октября 2014

CSS Only Sol'n

Итак, я знаю, что этот пост довольно старый, но решение только для css не было предложено ... Намного более эффективный способ сделать это. Обратите внимание, что первый <option> не имеет атрибута значения; это позволяет эффективно размещать. 

#category:focus option:first-of-type {
    display: none;
}
<select id="category">
   <option>Pick a choice!</option>
   <option value="choice1">choice1</option>
   <option value="choice2">choice2</option>
   <option value="choice3">choice3</option>
   <option value="choice3">choice4</option>
</select>
4 голосов
/ 31 января 2012

Без некоторого PHP или JavaScript для динамического удаления опции у вас есть еще одна очень простая опция, которую я регулярно использую, это опция disabled="disabled". Опция останется, но пользователь не сможет ее выбрать.

Ошибка в этом случае, если кто-то просто отправляет форму, не выбирая ничего, пустое значение будет отправлено в форме, но именно здесь вступает в действие ваша обработка проверки.

Ваш код для "Выберите выбор!" вариант будет выглядеть примерно так:

<option disabled="disabled">Pick a choice!</option>

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

0 голосов
/ 19 декабря 2012

Вот некоторые обходные пути. Не знаю, подходит ли вам это требование. 

<html>
<head>
<title>Untitled Document</title>
<script>
function doremove()
{

    var obj=document.getElementById("category");
    obj.remove(0);  
}

function addOpt()
{
var obj=document.getElementById("category");
var option=document.createElement("option");
option.text="Pick a choice!";
option.value = 0;
obj.add(option,1);
obj.value = 0;
}
</script>
</head>

<body>
<select id="category" onfocus="doremove();" onblur="addOpt();">
   <option value="0">Pick a choice!</option>
   <option value="">choice1</option>
   <option value="">choice2</option>
   <option value="">choice3</option>
   <option value="">choice4</option>
</select>
<input type="text" />
</body>
</html>
0 голосов
/ 10 сентября 2012

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

$("#SelectID option:first").remove();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...