selectで指定したオプションが選択された場合のトリガーイベントの詳細説明

小云云
リリース: 2018-03-17 15:17:54
オリジナル
11203 人が閲覧しました

ドロップダウン リスト ボックスを使用する場合、選択した

select のすべての値を取得したい場合は、for ループを使用してそれを実現できます。コードは次のとおりです:

var vi = document.all['list'].length;
for(var i=0;i<vi;i++){
document.form2.list(i).value; //form2是<form>的名称
}
ログイン後にコピー
js方法:
‍‍<select id="pid" onchange="gradeChange()">
    <option grade="1" value="a">选项一</a>
    <option grade="2" value="b">选项二</a>
</select>
<script type="text/JavaScript">
       function gradeChange(){
        var objS = document.getElementById("pid");
        var grade = objS.options[objS.selectedIndex].grade;
        alert(grade);
       }
</script>
jq方法:
<select name="myselect" id="myselect">
    <option value="opt1">选项1</option>
    <option value="opt2">选项2</option>
    <option value="opt3">选项3</option>
</select>
 
$("#myselect").change(function(){
    var opt=$("#myselect").val();
    ...
});
ログイン後にコピー

JavaScript は、選択ドロップダウン ボックスの選択された値を取得します
id=test のドロップダウン ボックスがあります。選択された値を取得するにはどうすればよいですか?
ネイティブ JavaScript メソッドと jquery メソッドをそれぞれ使用します

<select id="test"  name="">   
  <option   value="1">text1</option>   
  <option   value="2">text2</option>   
 </select>
ログイン後にコピー

1: ネイティブ JavaScript メソッド
1: 選択オブジェクトを取得します: var myselect=document.getElementById("test");
2: 選択されたオブジェクトのインデックスを取得しますitem: varindex=myselect.selectedIndex; // selectedIndex は選択した項目のインデックスを表します
3: 選択した項目の値を取得します options: myselect.options[index].value;
4: 選択した項目のテキストを取得しますoptions: myselect.options[index].text;
2: jquery メソッド (jquery ライブラリがロードされている場合)
1:var options=$("#test option:selected"); //選択された項目を取得します
2:console .log(options.val()); //選択した項目の値を取得します
3:console.log(options.text()) //選択した項目のテキストを取得します

:

select オプションオーバーレイの対処方法

selectコード共有のすべてのオプションを削除するJavaScript

HTMLでSelectオプションのデフォルトの選択を設定する方法

以上がselectで指定したオプションが選択された場合のトリガーイベントの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!