如果选择了一个选项，则显示另一个选项列表

Question

我想要的是当用户在“select”标签之间的列表中选择一个选项时，新列表将出现在第一个列表的右侧。

目前我的代码示例：

<label for="example>Example</label>
<select id="example_list" type="text" name="example_list">
    <option value="choose">Choose..</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
    <option value="option6">Option 6</option>
</select>

这是我想要的简单图像。

Answer 1

您所尝试的内容听起来像是一件奇怪的事情，至少，您所描述的内容在HTML中并不容易实现。

如果您只需要两个级别，我可以想到的最接近HTML的是<optgroup>标记，它允许您对选项进行分组：

<select>
    <optgroup label="Option 1">
        <option>Option 1.1</option>
        <option>Option 1.2</option>
        <option>Option 1.3</option>
    </optgroup>
    <optgroup label="Option 2">
        <option>Option 2.1</option>
        <option>Option 2.2</option>
        <option>Option 2.3</option>
    </optgroup>
</select>

这将导致以下结果：

http://jsfiddle.net/E3WZ4/

---

如果这不符合您的需求，我同意@Maritim留下的评论，您可能根本不需要<select>，而是选择下拉菜单，例如{{3 }}

Answer 2

正如您在图像中提到的那样，新列表将出现在第一个列表的右侧。 以下是使用<ul>和<li>标记的代码，使用纯CSS：

HTML代码：

<div id='cssmenu'>
<ul>
   <li class='has-sub'><a href='#'><span>Parent 1</span></a>
      <ul>
         <li><a href='#'><span>child 1.1</span></a></li>
         <li><a href='#'><span>child 1.2</span></a></li>
         <li class='last'><a href='#'><span>child 1.3</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Parent 2</span></a>
      <ul>
         <li><a href='#'><span>child 2.1</span></a></li>
         <li><a href='#'><span>child 2.2</span></a></li>
         <li class='last'><a href='#'><span>child 2.3</span></a></li>
      </ul>
   </li>
   <li class='has-sub last'><a href='#'><span>Parent 3</span></a>
      <ul>
         <li><a href='#'><span>child 3.1</span></a></li>
         <li><a href='#'><span>child 3.2</span></a></li>
         <li class='last'><a href='#'><span>child 3.3</span></a></li>
      </ul>
   </li>
</ul>
</div>

这是工作 DEMO 。 如果它满足您的要求，那么就投票给我。谢谢..

Answer 3

您无法以您绘制的方式加入select菜单，因为当用户点击第一个option中的select时，选项下拉缩进，只留下单行select，其中点击的option可见。如果你想要一个悬停（鼠标悬停）调用子菜单，你应该只使用由列表构建的多级CSS菜单，而不是选择。

有关如何在没有任何javascript（包括jQuery）的情况下制作这样的CSS菜单的教程，see here。该教程中有一小部分javascript，但这只是为了迎合IE6，这已经很久了。 （在这方面应该使tut现代化。）

该教程还提供了满足触摸屏的代码，人们无法悬停在触摸屏上。