Filterelemente nach tagName

Question

Example Fiddle.

Ich muss Bedingungen hinzufügen, damit mein Code Eingaben unterstützt (1 Knopf muss den ganzen Json erzeugen).

Ich habe versucht, eine Filterung mit:

elements.tagName 

Aber es gibt mir eine undefinierte, nehme ich es, weil

var elements = document.getElementsByClassName('selectVal'); 

eine Nodelist zurück. Wie kann ich meinen Code filtern oder anpassen, damit die gleiche Funktion Eingaben unterstützt?

Ich muss das ausgewählte Element in der Liste und die Strings in den Eingängen nur mit einer Taste speichern.

Answer 1

elements ist das Array von Elementen, die Sie von getElementsByClassName erhalten. Sie sollten stattdessen tagName auf elements[index] innerhalb der Schleife überprüfen.

Fügen Sie den Eingang (ersetzen Sie die selectVal mit einer besseren Klasse alle Form obwohl Objekte):

<input id="textbox" class="selectVal" value="text value"> 

Sie können den inneren Teil der Schleife

für den Tag suchen ändern

... 
var strSel = ''; 
if (element.tagName == 'SELECT') 
    strSel = element.options[element.selectedIndex].text; 
else if (element.tagName == 'INPUT') 
    strSel = element.value; 
... 

Answer 2

Ich kenne keine elegante Art der Filterung der Liste außer etwas wie jQuery verwenden. Sie könnten mit einer alten Schule Lösung stecken:

var elements = document.getElementsByClassName('selectVal'); 
for (var i = 0; i < elements.length; ++i) { 
    var element = elements[i]; 
    if (i.tagName == 'DIV') { 
     // whatever 
    } 
} 

Das heißt, das finden Sie die alle <div> s der Klasse selectVal:

var elements = document.querySelectorAll('div.selectVal'); 

das genug sein könnte, je nach Anwendungsfall.

Answer 3

Als @adeneo, das in dem obigen Kommentar erwähnt wird, könnten Sie querySelectorAll mit Mehrfachselektor verwenden, der durch Komma getrennt wird , Um die .selectVal und input Werte zu erhalten:

document.querySelectorAll('.selectVal, input'); 

Hoffe, das hilft.

function getSelectedItems(){ 
 
    var elements = document.querySelectorAll('.selectVal, input') 
 

 
    for (var i = 0; i < elements.length; i++) { 
 
    var element = elements[i]; 
 

 
    if (element.tagName==='SELECT') 
 
     console.log(element.options[element.selectedIndex].text); 
 
    else 
 
     console.log(element.value); 
 
    } 
 
}

<select id="Sobre" class="selectVal"> 
 
    <option value="1" selected>fasfaf</option> 
 
    <option value="2">afsaf</option> 
 
    <option value="3">Fraasfsafe</option> 
 
</select> 
 

 
<select id="asdafa" class="selectVal"> 
 
    <option value="1">fassad</option> 
 
    <option value="2" selected>fasfsa</option> 
 
    <option value="3">asdasf</option> 
 
</select> 
 

 
<select id="asdf" class="selectVal"> 
 
    <option value="1">fdsa</option> 
 
    <option value="2">asdfg</option> 
 
    <option value="3" selected>dsaf</option> 
 
</select> 
 

 
<input name="test" value='input value' /> 
 
<button onClick="getSelectedItems()">Añadir</button>