Предоставление иерархии «OPTION» в теге «SELECT»

Question

Моя проблема связана с HTML и CSS. У меня есть структура типа иерархии, которую я хочу отображать внутри списка. Иерархия содержит страны, государства и города (это три уровня глубины).

Я хочу отобразить список внутри списка выбора, каждый тип элемента (страна, штат, город) должен быть доступен. Элементы должны иметь отступы как:

United States 
- Hawaii 
-- Kauai 
- Washington 
-- Seattle 
-- Chelan 

Проблема с отступом. Я пытаюсь использовать либо margin-left, либо padding-left, чтобы отступать теги, которые выглядят корректными в FireFox, но не в IE7. Это пример сгенерированного списка выбора:

<select name="Something"> 
<option style="padding-left: 0">United States</option> 
<option style="padding-left: 20px">Hawaii</option> 
<option style="padding-left: 40px">Kauai</option> 
<option style="padding-left: 20px">Washington</option> 
<option style="padding-left: 40px">Seattle</option> 
<option style="padding-left: 40px">Chelan</option> 
</select> 

Я хочу добиться последовательного отступы во всех браузерах без использования CSS хаков.

Answer 1

deceze way намного лучше и была моей первой идеей. В качестве альтернативы, если это не работает, что вы можете использовать неразрывные пробелы в значении тега:

<select> 
    <option>select me</option> 
    <option>&nbsp;me indented</option> 
    <option>&nbsp;&nbsp;even more indentation</option> 
</select> 

Это далеко от впечатляющ, но он может работать для вас, если OPTGROUP нет.

Answer 2

Рефлексия элементов SELECT в значительной степени зависит от браузера, вы очень мало влияете на их презентацию. Некоторые браузеры, очевидно, позволяют вам настраивать больше, чем другие, IE позволяет очень мало (gasp, кто бы взломал;)). Если вам нужны очень удобные элементы SELECT, вам нужно будет использовать JavaScript или воссоздать что-то, что ведет себя как SELECT, но сделано из пучка DIV s и флажков или что-то в этом роде.

Сказав, что, я думаю, что вы ищете являются OPTGROUPs:

<select> 
    <optgroup label="xxx"> 
    <option value="xxxx">xxxx</option> 
    .... 
    </optgroup> 
    <optgroup label="yyy"> 
    ... 
    </optgroup> 
</select> 

Каждый браузер будет отображать их по-разному, но они будут отображаться в особой манере, в той или иной форме. Обратите внимание, что официально в HTML4 вы не можете вложить OPTGROUP.

Answer 3

Разве этот метод группировки не создает больше проблем, чем решает? Как пользователь, какой из них я должен выбрать? Есть ли какая-то польза для выбора чего-то более конкретного, чем страна?

Если проблема заключается в том, что у вас есть только одно поле базы данных для их хранения, почему бы не иметь три отдельных блока выбора (делая 2 или 3 необязательных) и просто хранить наиболее конкретные?:

<select name="country"> 
    <option>Choose a country</option> 
    <option>United States</option> 
</select> 
<select name="state"> 
    <option>Choose a state</option> 
    <option>Hawaii</option> 
</select> 
<select name="city"> 
    <option>Choose a city</option> 
    <option>Kauai</option> 
</select> 

Answer 4

Просто ради посетителей, я чувствую, что я должен разделить это решение я придумал: http://jsfiddle.net/n9qpN/

Украсьте варианты с классом уровня

<select name="hierarchiacal"> 
<option class="level_1">United States</option> 
    <option class="level_2">Hawaii</option> 
     <option class="level_3">Kauai</option> 
    <option class="level_2">Washington</option> 
     <option class="level_3">Seattle</option> 
     <option class="level_3">Chelan</option> 
</select> 

Теперь мы можем использовать JQuery для переформатировать содержимое элемента select

$(document).ready(
function(){ 
    $('.level_2').each(
     function(){ 
      $(this).text('----'+$(this).text()); 
     } 
    ); 

    $('.level_3').each(
     function(){ 
      $(this).text('---------'+$(this).text()); 
     } 
    ); 

} 
); 

Это может быть распространено на любой уровень

Answer 5

Попытайтесь использовать & # 160;

<select name="Something"> 
 
    <option>United States</option> 
 
    <option>&#160;Hawaii</option> 
 
    <option>&#160;&#160;Kauai</option> 
 
    <option>&#160;Washington</option> 
 
    <option>&#160;&#160;Seattle</option> 
 
    <option>&#160;&#160;Chelan</option> 
 
</select>

Answer 6

Я был в состоянии сделать это с помощью NO-BREAK ПРОСТРАНСТВО юникода характер. http://www.fileformat.info/info/unicode/char/00a0/index.htm

Скопируйте и вставьте символ из этой страницы в код и вуаля: (.   не работал для меня, потому что я использовал библиотеку для фантазии отборных коробок, которые инъекционных их дословно) https://jsfiddle.net/fwillerup/r9ch988h/