将optgroups嵌套在下拉列表中/选择

Question

将optgroups嵌套在下拉列表中/选择

我创建了一个客户c#DropDownList控件,它可以呈现出来的内容是optgroups(不是从头开始,我编辑了一些在互联网上找到的代码,虽然我确实理解它正在做什么),但它工作正常.

但是,我现在遇到的情况是我需要在下拉列表中有两个级别的缩进,即

<select>
  <optgroup label="Level One">
    <option> A.1 </option>
    <optgroup label="Level Two">
      <option> A.B.1 </option>
    </optgroup>
    <option> A.2 </option>
  </optgroup>
</select>

Run Code Online (Sandbox Code Playgroud)

但是,在上面的示例代码段中,它呈现为好像Level Two与缩进量相同Level One.

有没有办法生成我正在寻找的嵌套optgroup行为？

Answer 1

Rap*_*ert 62

这里的HTML规范真的坏了.它应该允许嵌套的optgroup并建议用户代理将它们渲染为嵌套菜单.相反,只允许一个optgroup级别.但是,他们必须在这个主题上说以下内容:

注意.建议实现者,HTML的未来版本可以扩展分组机制以允许嵌套组(即,OPTGROUP元素可以嵌套).这将允许作者代表更丰富的选择层次.

并且用户代理可以开始使用子菜单来呈现optgoups,而不是像现在那样在optgroup中的第一个选项元素之前显示标题.

根据HTML5规范(http://dev.w3.org/html5/markup/optgroup.html#optgroup),`optgroup`唯一允许的父级是`select`,这表示不,HTML5不支持. (16认同)
有人知道嵌套的optgroup是否在路线图上？ (2认同)

Answer 2

小智 47

这很好,但如果你添加不在optgroup中的选项,它就会变成错误.

<select>
  <optgroup label="Level One">
    <option> A.1 </option>
    <optgroup label="&nbsp;&nbsp;&nbsp;&nbsp;Level Two">
      <option>&nbsp;&nbsp;&nbsp;&nbsp; A.B.1 </option>
    </optgroup>
    <option> A.2 </option>
  </optgroup>
  <option> A </option>
</select>

Run Code Online (Sandbox Code Playgroud)

如果您使用css并立即关闭optgroup会更好:

<select>
  <optgroup label="Level One"></optgroup>
  <option style="padding-left:15px"> A.1 </option>
  <optgroup label="Level Two" style="padding-left:15px"></optgroup>
  <option style="padding-left:30px"> A.B.1 </option>
  <option style="padding-left:15px"> A.2 </option>
  <option> A </option>
</select>

Run Code Online (Sandbox Code Playgroud)

不幸的是,这在safari中不起作用,因为`<option>`中的`padding`没有呈现 (3认同)
CSS救援:您可以删除左边的填充并使用文本缩进,而是将相同的数量添加到您的选择框宽度(来源:http://stackoverflow.com/questions/2966855/padding-is-not-working -in野生动物园和 - 即,在选名单) (3认同)
optgroup,从未听说过...... + 1 (3认同)

Answer 3

Ed *_*mes 40

好吧,如果有人读过这个:最好的选择是 在每个额外的缩进级别添加四个s,看起来好像!

所以:

<select>
 <optgroup label="Level One">
  <option> A.1 </option>
  <optgroup label="&nbsp;&nbsp;&nbsp;&nbsp;Level Two">
   <option>&nbsp;&nbsp;&nbsp;&nbsp; A.B.1 </option>
  </optgroup>
  <option> A.2 </option>
 </optgroup>
</select>

Run Code Online (Sandbox Code Playgroud)

通过这样做,你可以通过不允许用户按下项目的第一个字母快速滚动到那个字母来扼杀你的选择的可用性. (110认同)
矛盾的是,杰弗里,它同时通过提供视觉层次来改善可用性.有趣的旧世界. (39认同)
检查DOM ...`optgroups`是*实际上没有嵌套.至少在Firefox中.当它看到第二个时,它会关闭第一个optgroup. (11认同)
请改用填充。当您有其他带有填充样式的答案时，这确实是一个丑陋的解决方案。 (3认同)
@NetVicious 除非有人修复了 WebKit 浏览器中的填充（他们可能有，我没有看过），不幸的是这不是一个像样的解决方案。文本缩进可能是可能的，来自对另一个答案的评论，但我在_years_中没有看过这个，所以会将此答案标记为正确，直到有人提供更好的跨浏览器解决方案。 (2认同)

Answer 4

Bro*_*row 9

<style>
    .NestedSelect{display: inline-block; height: 100px; border: 1px Black solid; overflow-y: scroll;}
    .NestedSelect label{display: block; cursor: pointer;}
    .NestedSelect label:hover{background-color: #0092ff; color: White;}
    .NestedSelect input[type="radio"]{display: none;}
    .NestedSelect input[type="radio"] + span{display: block; padding-left: 0px; padding-right: 5px;}
    .NestedSelect input[type="radio"]:checked + span{background-color: Black; color: White;}
    .NestedSelect div{margin-left: 15px; border-left: 1px Black solid;}
    .NestedSelect label > span:before{content: '- ';}
</style>

<div class="NestedSelect">
    <label><input type="radio" name="MySelectInputName"><span>Fruit</span></label>
    <div>
        <label><input type="radio" name="MySelectInputName"><span>Apple</span></label>
        <label><input type="radio" name="MySelectInputName"><span>Banana</span></label>
        <label><input type="radio" name="MySelectInputName"><span>Orange</span></label>
    </div>

    <label><input type="radio" name="MySelectInputName"><span>Drink</span></label>
    <div>
        <label><input type="radio" name="MySelectInputName"><span>Water</span></label>

        <label><input type="radio" name="MySelectInputName"><span>Soft</span></label>
        <div>
            <label><input type="radio" name="MySelectInputName"><span>Cola</span></label>
            <label><input type="radio" name="MySelectInputName"><span>Soda</span></label>
            <label><input type="radio" name="MySelectInputName"><span>Lemonade</span></label>
        </div>

        <label><input type="radio" name="MySelectInputName"><span>Hard</span></label>
        <div>
            <label><input type="radio" name="MySelectInputName"><span>Bear</span></label>
            <label><input type="radio" name="MySelectInputName"><span>Whisky</span></label>
            <label><input type="radio" name="MySelectInputName"><span>Vodka</span></label>
            <label><input type="radio" name="MySelectInputName"><span>Gin</span></label>
        </div>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

Answer 5

Mat*_*ves 5

我认为如果你有一些结构化和复杂的东西,你可能会考虑除了一个下拉框之外的东西.

不是我的设计,我只是实施一些东西,虽然我同意它是合理的疯狂.被引入预先商定的设计的一部分乐趣. (4认同)

Answer 6

Jam*_*ham 5

我知道这是很久以前的事了，但我还有一些额外的补充：

这在 HTML5 或任何以前的规范中都是不可能的，在 HTML5.1 中也没有提出。我已经向邮件列表提出了请求public-html-comments，但我们会看看是否有结果。

无论如何，虽然目前还无法使用<select>，但您可以使用以下 HTML 以及一些漂亮的 CSS 来实现类似的效果：

<ul>
  <li>
	<input type="radio" name="location" value="0" id="loc_0" />
	<label for="loc_0">United States</label>
	<ul>
	  <li>
		Northeast
        <ul>
	      <li>
			<input type="radio" name="location" value="1" id="loc_1" />
			<label for="loc_1">New Hampshire</label>
		  </li>
          <li>
			<input type="radio" name="location" value="2" id="loc_2" />
			<label for="loc_2">Vermont</label>
		  </li>
          <li>
			 <input type="radio" name="location" value="3" id="loc_3" />
			 <label for="loc_3">Maine</label>
		  </li>
		 </ul>
	   </li>
       <li>
		   Southeast
           <ul>
			 <li>
				<input type="radio" name="location" value="4" id="loc_4" />
				<label for="loc_4">Georgia</label>
			 </li>
             <li>
				<input type="radio" name="location" value="5" id="loc_5" />
				<label for="loc_5">Alabama</label>
			 </li>
		   </ul>
		</li>
	  </ul>
    </li>
    <li>
	   <input type="radio" name="location" value="6" id="loc_6" />
	   <label for="loc_6">Canada</label>
       <ul>
		  <li>
			 <input type="radio" name="location" value="7" id="loc_7" />
			 <label for="loc_7">Ontario</label>
		  </li>
          <li>
			  <input type="radio" name="location" value="8" id="loc_8" />
		      <label for="loc_8">Quebec</label>
		  </li>
          <li>
			   <input type="radio" name="location" value="9" id="loc_9" />
			   <label for="loc_9">Manitoba</label>
		  </li>
		</ul>
	 </li>
  </ul>

Run Code Online (Sandbox Code Playgroud)

作为额外的好处，这也意味着您可以允许自行选择<optgroups>。例如，如果您有嵌套类别，其中类别包含大量详细信息，并且您希望允许用户选择层次结构中的更高层，则这可能很有用。

这一切都可以在没有 JavaScript 的情况下工作，但是您可能希望添加一些来隐藏单选按钮，然后更改所选项目的背景颜色或其他内容。

请记住，这远非完美的解决方案，但如果您绝对需要具有合理的跨浏览器兼容性的嵌套选择，那么这可能是您所能得到的最接近的解决方案。

Answer 7

Tri*_*eAC 5

我非常喜欢这篇文章中的Broken Arrow的解决方案.我刚刚改进/改变了一点,以便所谓的标签可以切换,不被视为选项.我使用了一小段jQuery,但这可以在没有jQuery的情况下完成.

我已经用链接替换了中间标签(没有叶子标签),这些链接在点击时调用了一个函数.此功能负责切换单击链接的下一个div,以便扩展/折叠选项.这避免了在层次结构中选择中间元素的可能性,这通常是期望的.制作允许选择中间元素的变体应该很容易.

这是修改后的html:

<div class="NestedSelect">
    <a onclick="toggleDiv(this)">Fruit</a>
    <div>
        <label>
            <input type="radio" name="MySelectInputName"><span>Apple</span></label>
        <label>
            <input type="radio" name="MySelectInputName"><span>Banana</span></label>
        <label>
            <input type="radio" name="MySelectInputName"><span>Orange</span></label>
    </div>

    <a onclick="toggleDiv(this)">Drink</a>
    <div>
        <label>
            <input type="radio" name="MySelectInputName"><span>Water</span></label>

        <a onclick="toggleDiv(this)">Soft</a>
        <div>
            <label>
                <input type="radio" name="MySelectInputName"><span>Cola</span></label>
            <label>
                <input type="radio" name="MySelectInputName"><span>Soda</span></label>
            <label>
                <input type="radio" name="MySelectInputName"><span>Lemonade</span></label>
        </div>

        <a onclick="toggleDiv(this)">Hard</a>
        <div>
            <label>
                <input type="radio" name="MySelectInputName"><span>Bear</span></label>
            <label>
                <input type="radio" name="MySelectInputName"><span>Whisky</span></label>
            <label>
                <input type="radio" name="MySelectInputName"><span>Vodka</span></label>
            <label>
                <input type="radio" name="MySelectInputName"><span>Gin</span></label>
        </div>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

一个小的javascript/jQuery函数:

function toggleDiv(element) {
    $(element).next('div').toggle('medium');
}

Run Code Online (Sandbox Code Playgroud)

和css:

.NestedSelect {
    display: inline-block;
    height: 100%;
    border: 1px Black solid;
    overflow-y: scroll;
}

.NestedSelect a:hover, .NestedSelect span:hover  {
    background-color: #0092ff;
    color: White;
    cursor: pointer;
}

.NestedSelect input[type="radio"] {
    display: none;
}

.NestedSelect input[type="radio"] + span {
    display: block;
    padding-left: 0px;
    padding-right: 5px;
}

.NestedSelect input[type="radio"]:checked + span {
    background-color: Black;
    color: White;
}

.NestedSelect div {
    display: none;
    margin-left: 15px;
    border-left: 1px black
    solid;
}

.NestedSelect label > span:before, .NestedSelect a:before{
    content: '- ';
}

.NestedSelect a {
    display: block;
}

Run Code Online (Sandbox Code Playgroud)

在JSFiddle中运行示例

归档时间：	16 年，5 月前
查看次数：	105987 次
最近记录：	7 年，1 月前