web-dev-qa-db-ja.com

jQuery-値またはテキストを使用して選択ボックスの選択オプションを設定し、オプションをoptgroupsにネストします

したがって、私はアドレス入力を必要とするアプリを作成しており、ユーザーが州/県を選択するためのselect要素を持っています。 USとCanadaをサポートする必要があるため、それらを分離するためにoptgroupsをネストし、デフォルト値として単一の第1レベルオプションを使用します。基本的な例は次のとおりです。

<select name="state" id="state">
  <option class="co" value="" data-placeholder="true" disabled selected>Choose your state...</option>
  <optgroup label="United States">
    <option class="co" value="AL">Alabama</option>
    <option class="co" value="AK">Alaska</option>
    <option class="co" value="AZ">Arizona</option>
  </optgroup>
  <optgroup label="Canada">
    <option class="co" value="AB">Alberta</option>
    <option class="co" value="BC">British Columbia</option>
    <option class="co" value="MB">Manitoba</option>
  </optgroup>

次に、外部ソースからの入力に一致するオプションをプログラムで選択する必要があり、option要素の値またはそのテキストの両方に基づいて一致を確認します。一致するオプションが選択されたオプションとして設定されます。選択したオプションを値を使用して設定できることを知っています

$("#state").val(myValue)

このようにテキストに基づいてオプションを設定できることを知っています

var myText = "The state I want.";
$("#state").children().filter(function() {
  return $(this).text() == myText;
}).prop('selected', true);

各子を実行してoptgroupであるかどうかを確認し、すべての子を実行して一致を確認する必要なしに、これを行うクリーンな方法はありますか？選択したオプションを設定する値とテキストのメソッドをjQueryを介して組み合わせる簡単な方法はありますか？

もう1つの厄介な問題は、外部のjQueryプラグイン内でこれを実行することです。変更する必要がある関数内で、select要素を変数として使用しています

$element

だから私は可能であればそれをこのように行う方法が必要です：

$element.descendents(":option").filter(function() {
  //do the selecting here
}).prop('selected', true);
javascriptjqueryhtmlhtml-select
4
climbak

解決しました。私の要素はすでにjQuery変数$ elementとして関数に渡されているため、次の形式で標準セレクターを使用することはできません。

$("#state option").filter(
  // filter function
).prop('selected', true);

多くの試みの後、私はこれを得て、それはうまくいきました：

function functionIHadToChange($element, value) {
  // other code
  $element.find("option").filter(function(){
      return ( ($(this).val() == value) || ($(this).text() == value) )
    }).prop('selected', true);
}
15
climbak

オプション値で選択する場合は、値セレクターを使用します。

var myText = "AZ";
$('#state option[value="' + myText + '"]').prop('selected', true);

オプションのラベルで検索する場合は、フィルターを使用します。

var myText = "Arizona";
$('#state option').filter(function () { return $(this).html() == myText; }).prop('selected', true)
24
asgallant

私はあなたの質問を完全に理解したかどうかわかりませんが、これに答えようとしています fiddle

トリックは、選択ボックスの値を直接設定することで選択できることです

$("#state").val( a_value );
6
ochi

$("#select_id").prop("selectedIndex", 3); // Select index starts from zero.で設定できます

this の例をここで読んでください。

2
varadha

私はここに遅れましたが、将来の訪問者にとって、それを行う最も簡単な方法は次のとおりです。

html

<select name="dept">
<option value="">This doctor belongs to which department?</option>
<option value="1">Orthopaedics</option>
<option value="2">Pathology</option>
<option value="3">ENT</option>
</select>

jQuery

$('select[name="dept"]').val('3');

出力：これはアクティブになります[〜＃〜] ent [〜＃〜]。

1
Pran
_$element = $('select#state');
$options = $element.find('option');
$wanted_element = $options.filter(function () {
  return $(this).val() == "Alabama" || $(this).text() == "Alabama"
});
$wanted_element.prop('selected', true);
_

それを行う1つの方法でしょう。

しかし、.find()メソッドの正確な内部を知らなくても、結局jQueryは少なくとも2つのループを使用してこれを実行します...

1
Manuel Görlich