ホームページ ウェブフロントエンド jsチュートリアル jQuery操作の選択値と設定の選択されたインスタンスの分析

jQuery操作の選択値と設定の選択されたインスタンスの分析

Jul 28, 2017 am 09:22 AM
jquery select

jquery操作 select (追加、削除、クリア)

jQuery Selectで選択されたTextValueを取得します:

$("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 
var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的text 

var checkValue=$("#select_id").val(); //获取Select选择的Value

var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 

var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值
ログイン後にコピー

jQuery追加/選択のオプション項目を削除します:

$("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项) 

$("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置) 

$("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个) 

$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个) 

$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Optiona 

$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Optiona
ログイン後にコピー

コンテンツを削除します:

$("#charCity").empty();
ログイン後にコピー

選択を操作するたびに、情報を自分でまとめてみませんか?未来。

例: <select class="selector"></select>

1.

     $(&quot;.selector&quot;).val(&quot;pxx&quot;);
ログイン後にコピー

を選択するには、値を含む項目をpxxに設定します。2.

    $(&quot;.selector&quot;).find(&quot;option[text=&#39;pxx&#39;]&quot;).attr(&quot;selected&quot;,true);
ログイン後にコピー

を選択するには、テキストを含む項目を設定します。ここには角括弧があります。使用上、角括弧内の等号の前に引用符を付けずに属性名を付けます。多くの場合、角括弧を使用するとロジックが非常に単純になります。

3. 現在選択されている項目の値を取得します

    $(&quot;.selector&quot;).val();
ログイン後にコピー

4. 現在選択されている項目のテキストを取得します

    $(&quot;.selector&quot;).find(&quot;option:selected&quot;).text();
ログイン後にコピー

ここではコロンが使用されており、その使い方と推論をマスターすると、コードも簡単になります。

selects のカスケードがよく使用されます。つまり、2 番目の選択の値は、最初の選択で選択された値で変化します。これはjQueryでは非常に簡単です。

例:

$(&quot;.selector1&quot;).change(function(){     // 先清空第二个
      $(&quot;.selector2&quot;).empty();     // 实际的应用中,这里的option一般都是用循环生成多个了
      var option = $(&quot;&lt;option&gt;&quot;).val(1).text(&quot;pxx&quot;);
      $(&quot;.selector2&quot;).append(option);
});
ログイン後にコピー

jQueryは、Selectで選択されたテキストと値を取得します: 構文の説明:

$(&quot;#select_id&quot;).change(function(){//code...});   //为Select添加事件,当选择其中一项时触发var 
checkText=$(&quot;#select_id&quot;).find(&quot;option:selected&quot;).text();  //获取Select选择的Textvar 
checkValue=$(&quot;#select_id&quot;).val();  //获取Select选择的Valuevar 
checkIndex=$(&quot;#select_id &quot;).get(0).selectedIndex;  //获取Select选择的索引值var 
maxIndex=$(&quot;#select_id option:last&quot;).attr(&quot;index&quot;);  //获取Select最大的索引值
ログイン後にコピー

jQueryは、Selectで選択されたテキストと値を設定します:

構文の説明:

$(&quot;#select_id &quot;).get(0).selectedIndex=1;  //设置Select索引值为1的项选中
$(&quot;#select_id &quot;).val(4);   // 设置Select的Value值为4的项选中
$(&quot;#select_id option[text=&#39;jQuery&#39;]&quot;).attr(&quot;selected&quot;, true);   //设置Select的Text值为jQuery的项选中
ログイン後にコピー

jQueryは、オプションを追加/削除しますSelect の項目:

構文説明:

$(&quot;#select_id&quot;).append(&quot;&lt;option value=&#39;Value&#39;&gt;Text&lt;/option&gt;&quot;);  //为Select追加一个Option(下拉项)
$(&quot;#select_id&quot;).prepend(&quot;&lt;option value=&#39;0&#39;&gt;请选择&lt;/option&gt;&quot;);  //为Select插入一个Option(第一个位置)
$(&quot;#select_id option:last&quot;).remove();  //删除Select中索引值最大Option(最后一个)
$(&quot;#select_id option[index=&#39;0&#39;]&quot;).remove();  //删除Select中索引值为0的Option(第一个)
$(&quot;#select_id option[value=&#39;3&#39;]&quot;).remove();  //删除Select中Value=&#39;3&#39;的Option
$(&quot;#select_id option[text=&#39;4&#39;]&quot;).remove();  //删除Select中Text=&#39;4&#39;的Option
ログイン後にコピー

jquery ラジオ値、チェックボックス値、選択値、ラジオ選択、チェックボックス選択、選択選択、および関連 ラジオ選択項目のセットの値を取得する

var item = $(&#39;input[name=items][checked]&#39;).val();
ログイン後にコピー

Get select 選択した項目のテキスト


var item = $(&quot;select[name=items] option[selected]&quot;).text();
ログイン後にコピー

select ドロップダウン ボックスの 2 番目の要素は、現在選択されている値です


$(&#39;#select_id&#39;)[0].selectedIndex = 1;
ログイン後にコピー

ラジオラジオ選択グループの 2 番目の要素は、現在選択されている値 です


$(&#39;input[name=items]&#39;).get(1).checked = true;
ログイン後にコピー

値:

テキストボックス、テキスト領域: $("#txt").attr("value");
複数選択ボックスチェックボックス: $("#checkbox_id").attr("value");
ラジオグループラジオ: $("input[type =radio][checked]").val();
ドロップダウンボックス選択: $('#sel').val();
コントロールフォーム要素:
テキストボックス、テキストエリア:

$(&quot;#txt&quot;).attr(&quot;value&quot;,&#39;&#39;);//清空内容 
$(&quot;#txt&quot;).attr(&quot;value&quot;,&#39;11&#39;);//填充内容
ログイン後にコピー

複数選択ボックスのチェックボックス:

$(&quot;#chk1&quot;).attr(&quot;checked&quot;,&#39;&#39;);//不打勾 
$(&quot;#chk2&quot;).attr(&quot;checked&quot;,true);//打勾 
if($(&quot;#chk1&quot;).attr(&#39;checked&#39;)==undefined) //判断是否已经打勾
ログイン後にコピー

ラジオ選択グループラジオ:

 $(&quot;input[type=radio]&quot;).attr(&quot;checked&quot;,&#39;2&#39;);//设置value=2的项目为当前选中项
ログイン後にコピー

ドロップダウンボックスの選択:

$(&quot;#sel&quot;).attr(&quot;value&quot;,&#39;-sel3&#39;);//设置value=-sel3的项目为当前选中项 
$(&quot;&lt;option value=&#39;1&#39;&gt;1111&lt;/option&gt;&lt;option value=&#39;2&#39;&gt;2222&lt;/option&gt;&quot;).appendTo(&quot;#sel&quot;)//添加下拉框的option 
$(&quot;#sel&quot;).empty();//清空下拉框
ログイン後にコピー

以上がjQuery操作の選択値と設定の選択されたインスタンスの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド Feb 27, 2024 pm 06:45 PM

jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?

jQueryで要素の高さ属性を削除するにはどうすればよいですか? jQueryで要素の高さ属性を削除するにはどうすればよいですか? Feb 28, 2024 am 08:39 AM

jQueryで要素の高さ属性を削除するにはどうすればよいですか?

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する

jQuery を使用してすべての a タグのテキスト コンテンツを変更する jQuery を使用してすべての a タグのテキスト コンテンツを変更する Feb 28, 2024 pm 05:42 PM

jQuery を使用してすべての a タグのテキスト コンテンツを変更する

徹底した分析: jQuery の長所と短所 徹底した分析: jQuery の長所と短所 Feb 27, 2024 pm 05:18 PM

徹底した分析: jQuery の長所と短所

jQuery における eq の役割と応用シナリオを理解する jQuery における eq の役割と応用シナリオを理解する Feb 28, 2024 pm 01:15 PM

jQuery における eq の役割と応用シナリオを理解する

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? Feb 29, 2024 am 09:03 AM

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか?

See all articles