4

我需要显示一个选择框，它将一次性显示所有类别和子类别。

我想显示最左边的所有类别和粗体，而所有子类别将位于各自的类别下，但会缩进和斜体。

我们如何在 PHP 中创建这样的选择列表？

我在 Magento Ecommerce (www.magentocommerce.com) 管理面板中有类似的东西。

这些类别是从 DB 中检索的，有时可以达到 6 级深度，例如：

`猫 1

1A 类

猫 1B

猫 2

2A 类

猫 2AA

猫 2AB

猫 2AC

猫 2ACA

猫 3`

等所有具有子类别的类别应为粗体，所有子类别应为斜体。

我希望现在更清楚我想要实现的目标。

4

5 回答 5

5

您必须在您的选择元素中使用 optgroup 元素：

<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*/
}
于 2009-07-21T12:52:27.660 回答
0

好吧，您可以在要缩进的每个元素之前添加几个 's，如下所示：

<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;元素。我在 & 号之后添加了空格来解决这个问题，但空格实际上不会出现在您的代码中。

于 2009-07-21T12:51:47.223 回答
0

使用 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>

于 2009-07-21T12:52:46.897 回答
0

在 Html 源代码中查找您想要的内容，然后您就知道 php 必须输出什么代码。然后你必须这样做。具体如何完成取决于您的数据的存储方式等。如果您的问题没有解决，请更具体

于 2009-07-21T12:54:55.447 回答
0

这与 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;
}
于 2009-07-21T12:55:39.317 回答