jqueryでselectを操作するにはどうすればよいですか?

jqueryでselectを操作するにはどうすればよいですか?次の記事ではjqueryを使ってselect（値の取得、選択の設定）を操作する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

1. 基本的な値の問題

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

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=&#39;Value&#39;>Text</option>");  //为Select追加一个Option(下拉项)
$("#select_id").prepend("<option value=&#39;0&#39;>请选择</option>");  //为Select插入一个Option(第一个位置)
$("#select_id option:last").remove();  //删除Select中索引值最大Option(最后一个)
$("#select_id option[index=&#39;0&#39;]").remove();  //删除Select中索引值为0的Option(第一个)
$("#select_id option[value=&#39;3&#39;]").remove();  //删除Select中Value=&#39;3&#39;的Option
$("#select_id option[text=&#39;4&#39;]").remove();  //删除Select中Text=&#39;4&#39;的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=&#39;1&#39;>1111</option><option value=&#39;2&#39;>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 サイトの他の関連記事を参照してください。