Визуализация иерархии «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

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

Сказав это, я думаю, что вы ищете: OPTGROUP s :

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

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

Answer 2

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

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

Это далеко не красиво, но может сработать, если optgroup не сработает.

Answer 3

Просто ради посетителей, я чувствую, что должен поделиться этим разработанным мной решением: 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 4

Попробуйте использовать

<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 5

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

Если проблема в том, что у вас есть только одно поле базы данных для их хранения, почему бы не иметь три отдельных поля выбора (сделать 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 6

Предзаказ Неразрывный пробел (& nbsp) у меня не сработал.

Я добавил следующее:

String.fromCharCode(8194);

Answer 7

Мне удалось сделать это с помощью символа Unicode NO-BREAK SPACE. http://www.fileformat.info/info/unicode/char/00a0/index.htm

Скопируйте и вставьте символ с этой страницы в код и вуаля: https://jsfiddle.net/fwillerup/r9ch988h/

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