Выберите с отступом, а также отформатированные элементы в PHP

Мне нужно показать поле выбора, которое будет отображать все категории и подкатегории за один раз.

Я хочу показать, что все категории оставлены наиболее жирным шрифтом, в то время как все подкатегории будут подпадать под соответствующие категории, но будут иметь отступ и выделены курсивом.

Как мы можем создать такой список выбора в PHP?

У меня есть что-то подобное в панели администратора Magento Ecommerce (www.magentocommerce.com).

Категории извлекаются из БД и иногда могут достигать 6 уровней, например:

`Категория 1

Категория 1A

Категория 1B

Каталог 2

Категория 2A

Категория 2AA

Кат. 2AB

Категория 2AC

Категория 2ACA

Кат 3`

и т. д. Все категории, у которых есть подкатегории, должны быть выделены жирным шрифтом, а все подкатегории должны быть выделены курсивом.

Надеюсь, теперь стало более понятно, чего я хочу добиться.


php html magento html-select
person Yogi Yang 007    schedule 21.07.2009    source источник
comment
Вы когда-нибудь пытались что-то сделать? У вас есть образцы, которые вас беспокоят? Можете ли вы разместить свои попытки здесь?   -  person Artem Barger    schedule 21.07.2009
comment
У меня нет ни малейшего представления о том, как это сделать, поэтому я спрашиваю.   -  person Yogi Yang 007    schedule 22.07.2009

Ответы (5)


arrow_upward
5
arrow_downward

Вы должны использовать элемент optgroup в своем элементе select:

<select name="Namen" size="6">
  <optgroup label="Namen mit A">
     <option label="Anna">Anna</option>
     <option label="Achim">Achim</option>
     <option label="August">August</option>
  </optgroup>
  <optgroup label="Namen mit B">
     <option label="Berta">Berta</option>
     <option label="Barbara">Barbara</option>
     <option label="Bernhard">Bernhard</option>
  </optgroup>
</select>

Затем вы можете стилизовать их с помощью

optgroup {
    font-weight:bold;
    /*etc*/
}
person smoove    schedule 21.07.2009
comment
Спасибо за это, но уровни подэлементов извлекаются из БД, и может быть более одного подэлемента. Например: Cat 1 Cat 1A Cat 1AA Cat 2 Cat 2A Cat 2B Cat 2BA Cat 2BB Cat 3 Cat 4 Cat 5 Cat 5A и т. д. Итак, как я могу этого добиться? - person Yogi Yang 007; 22.07.2009
comment
Хм, если получится более сложный список, вам, вероятно, лучше не использовать optgroup (вы не можете выбирать элементы optgroup из списка). Вы можете попытаться дать классы элементов option, такие как level1, level2 и т. д., и настроить вес отступов/шрифта с помощью этих классов. - person smoove; 22.07.2009

arrow_upward
0
arrow_downward

Ну, вы можете просто добавить пару перед каждым элементом, для которого хотите сделать отступ, например:

<select id="mySelect">
    <option value="topLevelFoo">Foo</option>
    <option value="subBar">& nbsp;& nbsp;Bar</option>
    <option value="subBaz">& nbsp;& nbsp;Baz</option>
</select>

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

Удачи!

Редактировать: Э-э, похоже, что редактор SO отображает элементы & nbsp;. Я добавил пробелы после амперсанда, чтобы обойти это, но на самом деле пробелы не появятся в вашем коде.

person brettkelly    schedule 21.07.2009

arrow_upward
0
arrow_downward

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

<html>
    <body>
            <select>
                    <optgroup label="Numbers">
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                    </optgroup>
                    <optgroup label="Letters" disabled="true">
                            <option value="4">A</option>
                            <option value="5">B</option>
                            <option value="6">C</option>
                    </optgroup>
            </select>
    </body>

person TheBrain    schedule 21.07.2009

arrow_upward
0
arrow_downward

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

person Flo    schedule 21.07.2009

arrow_upward
0
arrow_downward

Это не имеет ничего общего с PHP, вам нужно немного HTML и CSS для его стилизации.

Вы можете составить список с такими идентификаторами:

<select class="category">
    <option>Category</option>
    <optgroup label="Optional label">
        <option>More options</option>
    </optgroup>
</select>

Затем вы можете стилизовать его следующим образом:

.category option {
    font-weight: bold;
}

.category optgroup option {
    font-style: italic;
}
person Mythica    schedule 21.07.2009