Строка списка при выборе варианта выбора

Question

Я пытаюсь отобразить полный список, который имеет тот же идентификатор, который совпадает с опцией выбора. Но я не могу понять, как получить идентификатор от атрибута, используя имя, чтобы иметь возможность его фильтровать.

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> 

К слову, выберите и уль генерируются динамически, так что я на самом деле не теперь идентификаторы, которые могут быть предоставлены. Я пытаюсь немного по-другому подойти here.

Когда мне удается сделать работу фильтра выбора, для прекращения работы. ЗАЧЕМ? Я схожу с ума от этого. Пожалуйста помоги!!

Answer 1

Во-первых, у Вас есть несколько элементов с таким же идентификаторами что неправильно .. Причина 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

попробуйте изменить идентификаторы в классе в тегах Ли и использовать эту функцию ...

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

Step1 - Изменение id до class

Этап 2 - Перемещение элементов DOM с помощью селектора классов jQuery. Таким образом, замените document.getElementId('id) на $('.className')