Отображение иерархии "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-хаков.

16
css html html-select

7 ответов

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

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

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

19

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

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

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

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

39

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

 }
);

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

9

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

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

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

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

добавление неразрывного пространства (&nbsp) не сработало для меня.

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

String.fromCharCode(8194);

1

я смог выполнить это, используя символ unicode без перерыва. http://www.fileformat.info/info/unicode/char/00a0/index.htm

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

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

0