在下拉列表嵌套optgroups /选择在下拉列表嵌套optgroups /选择(Nesting o

2019-05-13 16:57发布

站内文章 / 后端开发

31 0

别忘想泡老子

女 | 书童

私信

我创建了一个客户C＃DropDownList控件，可以呈现出它的内容是optgroups（而不是从头开始，我编辑在互联网上找到了一些代码，但我不明白究竟它在做什么），并能正常工作。

不过，我现在所遇到的情况，我需要在我的下拉菜单，即缩进两个层次

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

然而，在该示例片段上方，则渲染仿佛Level Two是在相同量的压痕为Level One 。

有没有产生我找嵌套OPTGROUP行为的方法吗？

Answer 1:

这里的HTML规范是真正打破。它应该允许嵌套optgroups，并建议用户代理使其嵌套的菜单。相反，只有一个OPTGROUP允许一级。然而，他们必须说关于这个问题的以下内容：

注意。实施者告知未来版本的HTML可延伸的分组机制，以允许嵌套组（即，OPTGROUP元件可以嵌套）。这将允许作者代表的选择更丰富的层次。

和用户代理可以开始使用子菜单来渲染optgoups，而不是在OPTGROUP第一个选项元素之前显示的标题，因为他们现在要做的。

Answer 2:

这仅仅是罚款，但如果你添加选项，这是不是在OPTGROUP它得到马车。

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

是，如果你使用的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"> AB1 </option> <option style="padding-left:15px"> A.2 </option> <option> A </option> </select>

Answer 3:

好吧，如果没有人读这样的：最好的办法是增加四个  s的压痕每增加一级，似乎！

所以：

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

Answer 4:

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

Answer 5:

我认为，如果你有一些结构化的和复杂的，你可以考虑多单下拉框以外的东西。

Answer 6:

我真的很喜欢这个断箭的解决方案在这个岗位上面。我刚才改善/改变了它一下，让什么是所谓的标签可以切换，并且不考虑的方案。我用一小块的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>

一个小的JavaScript / jQuery的功能：

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

和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;
}

在运行的jsfiddle样本

Answer 7:

我需要清洁和轻量级的解决方案（所以没有jQuery和一样），这将看起来就像普通的HTML，也将继续工作时，只有纯HTML是预先设定的（这样的JavaScript只会增加它），这将使通过启动字母搜索（包括国家UTF-8个字母），如果可能的话它不会增加额外的重量。它也必须在很慢的浏览器工作速度快（RPI思考 - 所以最好不JavaScript页面加载后执行）。

在Firefox它使用CSS identing从而允许字母搜索，并在其他浏览器将使用  预先考虑（但它不支持用字母快速搜索）。无论如何，我与结果非常高兴。

你可以尝试在这里的行动

它是这样的：

CSS：

.i0 { }
.i1 { margin-left: 1em; }
.i2 { margin-left: 2em; }
.i3 { margin-left: 3em; }
.i4 { margin-left: 4em; }
.i5 { margin-left: 5em; }

HTML（类 “I1”， “I2” 表示等电平identation）：

<form action="/filter/" method="get">
<select name="gdje" id="gdje">
<option value=1 class="i0">Svugdje</option>
<option value=177 class="i1">Bosna i Hercegovina</option>
<option value=190 class="i2">Babin Do</option>  
<option value=258 class="i2">Banja Luka</option>
<option value=181 class="i2">Tuzla</option>
<option value=307 class="i1">Crna Gora</option>
<option value=308 class="i2">Podgorica</option>
<option value=2 SELECTED class="i1">Hrvatska</option>
<option value=5 class="i2">Bjelovarsko-bilogorska županija</option>
<option value=147 class="i3">Bjelovar</option>
<option value=79 class="i3">Daruvar</option>  
<option value=94 class="i3">Garešnica</option>
<option value=329 class="i3">Grubišno Polje</option>
<option value=368 class="i3">Čazma</option>
<option value=6 class="i2">Brodsko-posavska županija</option>
<option value=342 class="i3">Gornji Bogićevci</option>
<option value=158 class="i3">Klakar</option>
<option value=140 class="i3">Nova Gradiška</option>
</select>
</form>

<script>
<!--
        window.onload = loadFilter;
// -->   
</script>

JavaScript的：

function loadFilter() {
  'use strict';
  // indents all options depending on "i" CSS class
  function add_nbsp() {
    var opt = document.getElementsByTagName("option");
    for (var i = 0; i < opt.length; i++) {
      if (opt[i].className[0] === 'i') {
      opt[i].innerHTML = Array(3*opt[i].className[1]+1).join("&nbsp;") + opt[i].innerHTML;      // this means "&nbsp;" x (3*$indent)
      }
    }
  }
  // detects browser
  navigator.sayswho= (function() {
    var ua= navigator.userAgent, tem,
    M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*([\d\.]+)/i) || [];
    if(/trident/i.test(M[1])){
        tem=  /\brv[ :]+(\d+(\.\d+)?)/g.exec(ua) || [];
        return 'IE '+(tem[1] || '');
    }
    M= M[2]? [M[1], M[2]]:[navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
    return M.join(' ');
  })();
  // quick detection if browser is firefox
  function isFirefox() {
    var ua= navigator.userAgent,
    M= ua.match(/firefox\//i);  
    return M;
  }
  // indented select options support for non-firefox browsers
  if (!isFirefox()) {
    add_nbsp();
  }
}

Answer 8:

我知道这是相当长一段时间以前，但我有一点点额外的补充：

这是不可能的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>

作为一个额外的好处是，这也意味着你可以允许的选择<optgroups>自己。如果你有，例如这可能是有用的，嵌套类所在类别进入重细节，要允许用户选择了较高的层次。

这将不使用JavaScript的所有工作，但您可能希望增加一些隐藏的单选按钮，然后更改所选项目或某事的背景颜色。

请记住，这远非一个完美的解决方案，但如果你确实需要一个嵌套的选择与合理的跨浏览器兼容，这可能是接近你会得到。

文章来源: Nesting optgroups in a dropdownlist/select