it-swarm.com.ru

Визуализация иерархии "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-хаков.

17
Salman A

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

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

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

19
MacAnthony

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

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

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

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

43
deceze

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

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

<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
Igor Krupitsky

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

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

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

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

String.fromCharCode(8194);

1
Skywalker

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

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

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

0
fredw