jsはselectタグで選択された値を取得します

不言
リリース: 2018-03-31 14:15:22
オリジナル
1749 人が閲覧しました

この記事では、js の select タグで選択された値を取得する方法を説明します。必要な方はぜひご覧ください

var obj = document.getElementById("testSelect") //Positioning id

var Index = obj .selectedIndex; // 選択されたインデックス

var text = obj.options[index].text; // 選択されたテキスト

var value = obj.options[index].value; // 選択された値

を取得します。 jQueryから選択値を選択します

最初の方法

$('#testSelect option:selected').text();//選択されたテキスト


$('#testSelect option:selected') .val();// Selected

$("#testSelect ").get(0).selectedIndex;//index の値

2 番目の方法

$("#tesetSelect").find("option:selected").text ( );//選択されたテキスト

…….val();
…….get(0).selectedIndex;

----------------- --------------------

如果select标签是有id属性的,如
<select id=xx>...
则用下述方法获取当前选项的值:
var v = xx.value;
或
var v = document.getElementById("xx").value;   //此方法兼容性好

如果select标签是有name属性的,如
<form name=form1>
<select name=xx>...
则用下述方法获取当前选项的值:
var v = form1.xx.value;
或
var v = document.getElementsByName("xx")[0].value;
如果同一页面含有多个name属性相同的标签,则上述[0]中的数字要改为相应的物理顺序号(从0起算)

如果select标签不含有任何可供定位的属性,如
<select>...
则用下述方法获取当前选项的值:
var v = document.getElementsByTagName("select")[0].value;
如果同一页面含有多个select标签,则上述[0]中的数字要改为相应的物理顺序号(从0起算)
----------------------------------------



对于以下select标签,获取当前选择的值得方式如下:

<select id="test" name="">
<option value="1">text1</option>
<option value="2">text2</option>
</select>
code:
一:javascript原生的方法
1:拿到select对象: var myselect=document.getElementById("test");
2:拿到选中项的索引:var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
3:拿到选中项options的value: myselect.options[index].value;
4:拿到选中项options的text: myselect.options[index].text;
ログイン後にコピー

2: jqueryメソッド(jqueryライブラリがロードされている場合)

1:var options=$("#testオプション: selected"); //選択されたアイテムを取得します

2:alert(options.val()); //選択された項目の値を取得します

3:alert(options.text()) //選択された項目のテキストを取得します

以上がjsはselectタグで選択された値を取得しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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