タグで要素をフィルタリングする

Question

Example Fiddle

私のコードが入力をサポートするように条件を追加する必要があります（1ボタンはJson全体を生成する必要があります）。

私はフィルタリングを試してみた：

elements.tagName 

しかし、それは私に未定義を与える、私は

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

はノードリストを返しますので、それがあるとします。同じ機能が入力をサポートするように、コードをフィルタリングまたは適応するにはどうすればよいですか？

リスト内の選択したアイテムと入力ボタンを1つのボタンだけで入力する必要があります。

Answer 1

elementsは、getElementsByClassNameから得られる要素の配列です。代わりにループ内のelements[index]のtagNameをチェックする必要があります。

入力（ただし、すべてのフォームオブジェクトへのより良いクラスにselectValを置き換え）を追加します：あなたがタグ

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

Answer 2

jQueryのようなものを使用する以外に、エレガントなリストのフィルタリング方法がわかりません。あなたは、古い学校の溶液で立ち往生されることがあります。

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

をこれはあなたのクラスselectValのすべて<div>のでしょう、言った：

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

ユースケースによっては十分かもしれません。

Answer 3

を探すために、ループの内側の一部を変更することができます

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

を上記のコメントで述べたように、querySelectorAllに複数のセレクタをカンマで区切って,を使用すると、.selectValとinputの値を得ることができます：

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

これが役立ちます。

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>