1

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 はわかりません。ここでは少し異なるアプローチを試みています。

選択フィルターを機能させると、 for が機能しなくなります。なぜ？私はこれで夢中になります。助けてください！！

4

3 に答える 3

0

Step1id -に変更class

ステップ 2 - jQuery クラス セレクターを使用して DOM 要素をトラバースします。このように置き換えdocument.getElementId('id)ます$('.className')

于 2013-05-22T18:36:20.307 に答える
0

最初に、間違っている同じ id を持つ複数の要素があります。原因getElementbyIdは、最初に検出された要素のみをフェッチします。

then を代わりにクラスに置き換えます

次に、反復ごとにHTMLを上書きするので、常に最後の項目が追加されます。

代わりに、それを変数に格納し、for ループの後に追加します。

要素を でバインドする必要がありますchange event。そうしないと、ページが初めて読み込まれたときに呼び出しが 1 回しか機能しません。

これを試して

// 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 をクラスに変更して、この関数を使用してみてください...

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 に答える