javascriptを使用して自己申告フォームから値を取得しようとしています

Question

私は、ユーザーが選択できるオプションを生成するデータベースを用意しています。この選択に基づいて、これらの値を同じページに提出し、javascriptを使用して選択を取得します。

同じフォームで、ラジオボタンと複数選択メニューがあります。

HTMLは、のように生成される：

ラジオボタンと、複数のオプション選択コード：

htmlstr+="<select multiple>"; 
for (i=0; i<g.length;i++) { 
     htmlstr+="<option name='ges[]' value='" + g[i] + "'>" + g[i] + "</option>"; 
} 
htmlstr+="</select><br>"; 
for (i=0; i<st.length;i++) { 
    htmlstr+="<input type='radio' name='sts' value='" + st[i] + "'>" + st[i] + "<br>"; 
} 

これらは両方次いで送信ボタンを持つフォーム内に配置されています。 送信ボタンをクリックすると、選択肢の値を知りたいと思います。複数選択が配列になることは理解していますが、値の配列を取得するにはどうすればよいのですか？また、選択したラジオボタンの値を取得できません。私はすでに.value属性を使用して値を取得しようとしましたが、これは機能しません。

Answer 1

本当に簡単な方法はありません。それぞれのオプションを確認する必要があります。

説明されているHTMLSelectElement.selectedOptionsインターフェイスがあります。しかし、それはあまり使われていないし、私はブラウザのサポートが不明だ。さらに、選択コントロールにのみ適用され、ラジオコントロールには適用されません。 https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement

をしかし、より信頼性の高い方法のために、これを試して...セレクト制御のために

、selectControl.options配列を反復処理し、selectedのための各項目を確認してください：あなたはかかわらず、ここでそれをチェックアウトすることができます属性。 selected属性がtrueの場合は、その値を独自の配列に追加します。

擬似コード：ラジオボタンの

for (var i in select.options) { 
    if (select.options[i] && select.options[i].selected) { 
     selectedOptions.push(select.options[i].value); 
    } 
    } 

、DOM（getElementsByName）内のオブジェクトの配列を反復し、checked属性をチェックします。それは本当です、あなたの配列にその値を追加します。

擬似コード：

for (var i in radios) { 
    if (radios[i] && radios[i].checked) { 
     selectedOptions.push(radios[i].value); 
    } 
    } 

ここでは、あなたのコードを使用して完全に動作するサンプルです：

jsFiddle：https://jsfiddle.net/mspinks/u890j86j/3/