1

我正在尝试显示具有与选择选项匹配的相同 ID 的完整列表。但是我不知道如何通过使用名称来从属性中获取 id 以便能够过滤它。

html示例：

<select id='groopy' onchange='see();'>
    <option>default</option>
    <option>lista1</option>
    <option>list1</option>
 </select> 
 <ul id='grupo'>
    <li id='list1' name="lista">Playground (Rangbhoomi)</li>
    <li id='default' name="lista">Empire Made Me</li>
    <li id='default' name="lista">Transmission</li>
    <li id='lista1' name="lista">Hostel Room 131</li>
    <li id='default' name="lista">A Disobedient Girl</li>
    <li id='default' name="lista">Travels in the Land of Kubilai Khan</li>
    <li id='list1' name="lista">The Indian Mutiny</li>
    <li id='lista1' name="lista">Beauty and Sadness</li>
    <li id='default' name="lista">The Collaborator</li>
    <li id='list1' name="lista">I, Lalla</li>
    <li id='default' name="lista">No Full Stops in India</li>
    <li id='lista1' name="lista">For Lust of Knowing</li>
    <li id='default' name="lista">On the Road to Kandahar</li>
</ul>

我正在尝试的脚本：

<script>
    function see(){
        var listita = document.getElementById('groopy').options[document.getElementById('groopy').selectedIndex].value;

        var items = document.getElementsByName("lista");
        var items_id = document.getElementsByName("lista").getAttribute('id');

        if(listita==items_id){

                    for(var i = 0; i < items.length; i++)
                        { 
                        document.getElementById("description").innerHTML = items[i].outerHTML;
                        }

            }
    }
    onload= see();

</script>

顺便说一句，select 和 ul 是动态生成的，所以我现在实际上并没有提供可以提供的 id。我在这里尝试一种不同的方法。

当我设法使选择过滤器工作时， for 停止工作。为什么？我要疯了。请帮忙！！

4

3 回答 3

0

首先，您有多个具有相同 id 的元素，这是错误的。因为getElementbyId只会获取它遇到的第一个元素。

然后用类代替

接下来，您将覆盖每次迭代的HTML ，因此您将始终将最后一项附加到它。

而是将其存储在变量中并将其附加到 for 循环之后。

您需要将元素与 a 绑定change event，否则您的调用仅在页面第一次加载时有效。

试试这个

// Cache the selector as you are using it multiple times
var dropdown = document.getElementById('groopy');

function see() {
     // set the selected option
     var listita = dropdown.options[dropdown.selectedIndex].value
        items = document.getElementsByClassName(listita);
        html = '';
    // For each item with class name, iterate over it and store in a string
    for (var i = 0; i < items.length; i++) {
         if (items[i].className == listita) {
            console.log((items[i].outerHTML));
             html += items[i].outerHTML
        }
    }
    // set the html after the for loop
    document.getElementById("description").innerHTML = html;
}
onload = see();

// attach the change event handler
dropdown.addEventListener('change', see);

检查小提琴

于 2013-05-22T18:34:39.960 回答
0

尝试在 li 标签中将 id 更改为 class 并使用此功能...

function see(){
    var selectedVal = document.getElementById('groopy').options[document.getElementById('groopy').selectedIndex]. value;                
    var items = document.getElementsByClassName(selectedVal);
    var html = '';
    for(var i = 0; i < elements.length; i++)
    { 
        html += items[i].outerHTML;
    }
    document.getElementById("description").innerHTML = html;

}
onload= see();
于 2013-05-22T18:34:55.490 回答
0

第 1步- 更改id为class

Step2 - 使用 jQuery 类选择器遍历 DOM 元素。这样替换document.getElementId('id)为$('.className')

于 2013-05-22T18:36:20.307 回答