jQuery選択ボックス操作

コアポイント

• jQueryは、append()、remove()、val()などのメソッドを使用してオプションを追加、削除、変更するなど、ドロップダウンボックスを操作するさまざまな方法を提供します。メソッドを適用する前に、必ず$()関数を使用してドロップダウンボックスを選択してください。
• 選択したオプションの現在の値を取得するには、val()メソッドを使用します。選択したオプションのテキストは、text()メソッドを使用して取得できます。 each()関数を使用して複数の値を取得できます。
JQueryでの イベントを使用して、ドロップダウンボックスで選択したオプションを識別できます。このイベントは、選択したオプションのテキストを探す関数をトリガーします。
• onChange

はじめに

jQueryでドロップダウンボックスを操作するには、余分なトリックと相互作用が必要ですが、複雑ではありません。この記事は、ドロップダウンボックス操作を簡単に処理するのに役立ちます。

ドロップダウンボックスを作成します

これは非常にシンプルで簡単なはずです：

jQuery('#some_element').append('');

2011年1月6日更新 - ドロップダウンボックスを選択するための3つの異なる方法オプション：

// 选择下拉框选项
jQuery('#selectboxid option').attr('selected', true);
jQuery('#selectboxid option').attr('selected', selected);
$("#selectboxid").attr('selectedIndex', indexnumber);

jqueryを使用して、ドロップダウンボックスオプションを操作します

以下は、ドロップダウンボックスにオプションを追加するコードです。あなたのニーズに合わせてパーツを貼り付けて編集するだけです。

あるいは、要素のリストにオプションを作成し、純粋なjQueryで添付することができます。

// obj 是选项值列表
function(obj) {
  var create = '';
  for (var i = 0; i < obj.length; i++) {
    create += '<option value="' + obj[i] + '">' + obj[i] + '</option>';
  }
  create += '';
  jQuery('#some_element').append(create);
}

ドロップダウンボックスに値を取得します

function(id, obj) {
  jQuery('#some_element').append('<select id="' + id + '"></select>');
  jQuery.each(obj, function(val, text) {
    jQuery('#' + id).append(
      jQuery('<option></option>').val(val).html(text)
    );
  });
}

選択したオプションの現在の値を知る必要がある場合があります。

オプションのテキストを取得できます。

// #selectbox 是下拉框的 ID
jQuery('#selectbox option:selected').val();

ドロップダウンボックスで複数の値を取得します

// #selectbox 是下拉框的 ID
jQuery('#selectbox option:selected').text();
jQuery('#selectList option[value=\'thisistheone\']').text();
jQuery('#selectList option:first').text();
jQuery('#selectList option:eq(3)').text();
jQuery('#selectList option:not(option:first, option:last)').each(function() {
  jQuery(this).text();
});

このコードを使用して、複数の値を取得します：

ドロップダウンボックスの要素を削除

jQuery('#some_element:selected').each(function() {
  alert(jQuery(this).text());
  alert(jQuery(this).val());
});

var current = [];
jQuery('#some_element:selected').each(function(index, selectedObj) {
  current[index] = jQuery(selectedObj).text();
});

var foo = jQuery('#multiple :selected').map(function() {
  return jQuery(this).val();
}).get();

ここには特別なものはありません。このコードを貼り付けて変更して、選択したアイテムを削除できるように変更してください。

ドロップダウンボックスでオプションを選択します

jQuery('#selectbox :selected').remove();

// 删除除第一个和最后一个元素之外的所有元素
// #selectbox 是下拉框的 ID
jQuery("#selectbox option:not(option:first, option:last)").remove();

これを行い、ドロップダウンボックスでオプションを選択します：

選択オプションの解除

上記のコードの逆操作：

jQuery('#selectbox option').attr('selected', 'selected');

オンチェンジイベント選択したオプションを見つけます

jQuery('#selectbox option').attr('selected', false);

結論

手順を正しく従うと、タスクを完了できるはずです。ご覧のとおり、それは難しくありません！

jQuery('#selectbox').change(function() {
  var val = jQuery(this).find('option:selected').text();
  alert('我选择了：' + val);
});

// onchange 查找下拉框中选定的项目
jQuery('#selectbox').change(function() {
  jQuery(this).find('option:selected').each(function() {
    alert('我选择了：' + jQuery(this).text());
  });
});

jQueryドロップダウンボックス操作に関するよくある質問

（以前のコンテンツからコンテンツが高度に複製されているため、FAQパーツはここでは省略されています。冗長性を避けるために、ここで繰り返されません。必要に応じて、より簡潔で明確な言語で質問と回答を再編成することができます。）

以上がjQuery選択ボックス操作の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。