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

Build list when select option change

本文关键字：构建 列表 选项 选择      更新时间：2023-09-26

我试图显示与选择选项匹配的相同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停止工作。为什么?我要疯了。请帮助! !

首先，您拥有多个具有相同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);

检查小提琴

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

Step1 -将id更改为class

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

相关文章：