Question

我正在尝试显示与select选项具有相同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。我正在尝试一种不同的方法here。

当我设法使选择过滤器工作时，停止工作。为什么？我为此疯狂。请帮忙!!

Answer 1

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

然后将替换为

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

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

您需要使用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);

<强> Check Fiddle

Answer 2

尝试在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();

Answer 3

第1步 - 将id更改为class

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

选择选项更改时的构建列表

3 个答案: