2013-10-09 2 views
5

Demo hereдисплей: никто не работает для опции

HTML:

display:none <b>not works</b>,the hidden can <b>not select</b>.<br> 
<select size="5"> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    <option value="C">C</option> 
    <option value="D">D</option> 
    <option value="E">E</option> 
    <option value="F">F</option> 
    <option value="G">G</option> 
    <option value="H">H</option> 
    <option value="I">I</option> 
</select><br> 

display:none <b>works</b>,the hidden <b>can select</b>.<br> 
<select> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    <option value="C">C</option> 
    <option value="D">D</option> 
    <option value="E">E</option> 
    <option value="F">F</option> 
    <option value="G">G</option> 
    <option value="H">H</option> 
    <option value="I">I</option> 
</select> 

CSS:

select{width:50px;} 

[value=C]{ 
    display: none; 
} 
/* will hold the position */ 
[value=B]{ 
    visibility: hidden; 
} 

Атрибут размер будет влиять на отображение и видимость, что случилось с этим ?

Как скрыть параметр в элементе, который имеет атрибут size?

+0

I canno t выберите скрытый элемент в любом примере. Почему у вас есть опция там, в первую очередь, если она вам не нужна? Просто опустите его из списка – knittl

+0

Вы не можете установить 'display' в поле опций в Chrome и IE. -> http://glidingphenomena.blogspot.ch/2010/06/styledisplaynone-doesnt-work-on-option.html –

+0

@dTDesign Но он работает под хром, если в элементе не указан атрибут размера. Я хочу показать результаты совпадения, используя выбор источника, и не использовать DOM op. – wener

ответ

4

См обновляемый раздел

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

How to hide a <option> in a <select> menu with CSS?

В Chrome (v 30). "дисплей: нет" не работает, Howeve r в Firefox (v. 24) Он работает, опция с «display: none» не отображается в списке.

UPDATE: (с. 43) (с. 38.0.1)

В текущем Chrome Firefox версии, использование CSS с "дисплей: нет" удаляет опцию из списка, но не «идеальный», например, в этом примере:

<html><body> 
    <select> 
     <option style="display:none">Hola</option> 
     <option>Hello</option> 
     <option>Ciao</option> 
    </select> 
</body></html> 

опция «Hola» не появляется, когда вы расширяете COMBOBOX, то есть, он не может быть выбран, но он появляется как по умолчанию выбран вариант, когда вы загружаете страницу в первый раз.

+1

Работает на Chrome сейчас. – Pacerier

0

Используйте следующие JQuery, чтобы скрыть и показать группеВыберите

jQuery(selector).toggleOption(true); // show option 
jQuery(selector).toggleOption(false); // hide option 
+0

Я не вижу, чтобы кто-то говорил о jQuery. – Pacerier

0

это вам это нужно ...

<select> 
    <option value="A">A</option> 
    <option disabled value="B">B</option> 
    <option value="C">C</option> 
    <option disabled value="D">D</option> 
    <option value="E">E</option> 
    <option value="F">F</option> 
    <option value="G">G</option> 
    <option value="H">H</option> 
    <option value="I">I</option> 
</select> 

Отключить значение не выбрать-состоянии.

, если вы хотите, чтобы скрыть иди сюда ..

http://jsbin.com/anoci

0

Свойство Display:none не будет работать на опции тега так вы только два варианта, как работа вокруг

1. Either disable then with disabled="disabled". 
2. Remove the options you don't want to see and insert them again when needed. 

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

Смежные вопросы