ホームページ > 記事 > ウェブフロントエンド > jqueryでselectを操作するにはどうすればよいですか?
jqueryでselectを操作するにはどうすればよいですか?次の記事ではjqueryを使ってselect(値の取得、選択の設定)を操作する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
1. 基本的な値の問題
例 f47b572de00409da02ec5e7a3675b5d312a444272d549ac5add23bac6d2d3de6
1. 値が pxx
$(".selector").val("pxx");
に設定された項目を選択します2. テキストが pxx
$(".selector").find("option:contains('pxx')").attr("selected",true);
に設定された項目を選択します注 : 以前は $(".selector").find("option[text='pxx']").attr("selected",true);
この書き方は間違っています。現在は, 私は個人的に、属性値を取得する入力このメソッドがサポートされていることを確認しています: "input[text='pxx']
" および "option:contains('pxx')
" 」は選択時に必須です。
角括弧が使用されています。角括弧内の等号の前に、引用符を付けずに属性名が続きます。多くの場合、角括弧を使用するとロジックが非常に単純になります。
3. 現在選択されている項目の値を取得します
$(".selector").val();
4. 現在選択されている項目のテキストを取得します
$(".selector").find("option:selected").text();
ここではコロンが使われています。他のケースについて推論を行うことも役立ちます。コードは簡潔になります。
2. select のカスケードがよく使用されます。つまり、2 番目の選択の値が最初の選択で選択された値で変化します。これはjQueryでは非常に簡単です。
例:
$(".selector1").change(function(){ // 先清空第二个 $(".selector2").empty(); // 实际的应用中,这里的option一般都是用循环生成多个了 var option = $("<option>").val(1).text("pxx"); $(".selector2").append(option); });
3. jQuery は、Select で選択された Text と Value を取得します:
構文の説明:
$("#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最大的索引值
4. jQuery は Select で選択した Text と Value を設定します:
文法説明:
$("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 $("#select_id ").val(4); // 设置Select的Value值为4的项选中 $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中
5. jQuery は Option 項目を追加/削除します選択:
文法説明:
$("#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'的Option $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
6. jquery ラジオ値、チェックボックス値、選択値、ラジオ選択、チェックボックス選択、選択選択、および関連する
1 ラジオで選択された項目のグループの値を取得します。
var item = $('input[name=items][checked]').val();
2 選択された項目のテキストを取得します。
var item = $("select[name=items] option[selected]").text();
3 選択ドロップダウン ボックスの 2 番目の要素現在選択されている値
$('#select_id')[0].selectedIndex = 1;
4 radio ラジオ グループの 2 番目の要素は、現在選択されている値
$('input[name=items]').get(1).checked = true;
7 です。値 :
を取得します。テキストボックス、テキスト領域: $("#txt").attr("value");
複数選択ボックスのチェックボックス: $("#checkbox_id").attr ("value" );
ラジオ選択グループラジオ: $("input[type=radio][checked]").val();
ドロップダウンボックス選択 : $('#sel').val();
8. コントロールフォーム要素:
Textボックス、テキスト領域:
$("#txt").attr("value",'');//清空内容 $("#txt").attr("value",'11');//填充内容
複数選択ボックスのチェックボックス:
$("#chk1").attr("checked",'');//不打勾 $("#chk2").attr("checked",true);//打勾 if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
単一選択グループのラジオ:
$("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
ドロップダウン ボックスの選択:
$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 $("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option $("#sel").empty();//清空下拉框
9. 特定の値のオプションがあるかどうかを判断します:
function is_Exists(selectid,value){ var theid='#'+selectid; var count=$(theid).get(0).options.length; var isExist = false; for(var i=0;i<count;i++){ if ($(theid).get(0).options[i].value == value){ isExist=true; break; } } return isExist; }
推奨される学習: jQuery チュートリアル
#以上がjqueryでselectを操作するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。