Question

一直在谷歌搜索但没有结果。所以，我在构建一个js scipt时遇到这个问题，以便从另一个下拉菜单中自动从optgroup中选择一个选项。

所以，它看起来像：

下拉菜单

<ul class="dropdown-menu">
<li><a href="#">A*</a></li>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li></ul>

以上是成绩列表，据推测从optgroup中选择特定选项。以下是html中的optgroup。

<optgroup label="Grade Comments">
<option value="Category 1">Comment for A*</option>
<option value="Category 2">Comment for A</option>
<option value="Category 3">Comment for B</option>
<option value="Category 4">Comment for C</option>
<option value="Category 5">Comment for D</option></optgroup>

因此，当用户某个等级时，将选择具体的评论。我如何约束成绩和评论？

Answer 1

很久以前，似乎另一个用户问了这个问题。请查看：Stackoverflow Question。

尝试了解帮助。 Aju Mon是对的。只是复制和粘贴并不是解决问题的正确方法。

度过愉快的一天。

Answer 2

仅限高级浏览器的乐趣：http://jsfiddle.net/Eqwst/ 和<select id="myselect">...</select>

var select = document.getElementById('myselect');
function fselect(index, ev) {
    ev.preventDefault();
    select.value = 'Category ' + index;
}

[].forEach.call(document.querySelectorAll('.dropdown-menu li a'), function(el, i) {
    el.addEventListener('click', fselect.bind(el, i+1), false);
})

Answer 3

请检查以下代码。

    <ul class="dropdown-menu" id="category">
    <li><a href="#">A*</a></li>
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
    <li><a href="#">D</a></li></ul>

    <select id="selectCmt">
    <optgroup label="Grade Comments">
    <option value="A*">Comment for A*</option>
    <option value="A">Comment for A</option>
    <option value="B">Comment for B</option>
    <option value="C">Comment for C</option>
    <option value="D">Comment for D</option></optgroup>
    </select>

js：

    $("#category").on("click","a",function(e){
            e.preventDefault();
            $('#selectCmt').val($(this).text());
    })

工作示例：http://jsfiddle.net/Ms49j/

JavaScript - 从其他下拉菜单中选择optgroup中的选项

3 个答案: