Подтвердить что ты не робот

Отображение иерархии "OPTION" в теге "SELECT"

Моя проблема связана с 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-хаков.

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

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

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

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

Ответ 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());
        }
   );

 }
);

Это можно расширить до любого уровня

Ответ 4

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

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

Ответ 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>

Ответ 6

Я смог выполнить это, используя символ Unicode NO-BREAK SPACE. http://www.fileformat.info/info/unicode/char/00a0/index.htm

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

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