jQuery-テキストの説明を介して選択コントロールの選択された値を設定する

選択コントロールがあり、JavaScript変数にテキスト文字列があります。

jQueryを使用して、selectコントロールの選択された要素を、（私が持っていない値ではなく）私が持っているテキストの説明を持つ項目に設定したいと思います。

値で設定するのはかなり簡単です。例えば

$("#my-select").val(myVal);

しかし、私はテキストの説明を介してそれを行うことに少し困惑しています。テキストの説明から価値を引き出す方法があるに違いないと思いますが、私の脳は金曜日の午後になっていてそれを解決することができません。

jQuery v1.6以降の説明で選択

var text1 = 'Two';
$("select option").filter(function() {
  //may want to use $.trim in here
  return $(this).text() == text1;
}).prop('selected', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

1.6未満で1.4以上のjQueryバージョン

var text1 = 'Two';
$("select option").filter(function() {
  //may want to use $.trim in here
  return $(this).text() == text1;
}).attr('selected', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

このアプローチは1.6以上1.9未満のバージョンでも機能しますが、1.6以降は非推奨となっていることに注意してください。それは動作しません 1.9+ jQueryのでは。

以前のバージョン

val() 両方のケースを処理する必要があります。

$('select').val('1'); // selects "Two"
$('select').val('Two'); // also selects "Two"

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

私はこれをテストしていませんが、これはあなたのために働くかもしれません。

$("select#my-select option")
   .each(function() { this.selected = (this.text == myVal); });

これを試してください... myTextというテキストでオプションを選択します

$("#my-Select option[text=" + myText +"]").prop("selected", true);

私はこのようにしています（jQuery 1.9.1）

$("#my-select").val("Dutch").change();

注：change（）を忘れないでください。そのため、私は長い間検索する必要がありました:)

$("#myselect option:contains('YourTextHere')").val();

テキストの説明を含む最初のオプションの値を返します。これをテストして動作します。

すべてのjQueryバージョンの複雑化を避けるために、これらの本当に単純なJavaScript関数の1つを使用することを正直にお勧めします...

function setSelectByValue(eID,val)
{ //Loop through sequentially//
  var ele=document.getElementById(eID);
  for(var ii=0; ii<ele.length; ii++)
    if(ele.options[ii].value==val) { //Found!
      ele.options[ii].selected=true;
      return true;
    }
  return false;
}

function setSelectByText(eID,text)
{ //Loop through sequentially//
  var ele=document.getElementById(eID);
  for(var ii=0; ii<ele.length; ii++)
    if(ele.options[ii].text==text) { //Found!
      ele.options[ii].selected=true;
      return true;
    }
  return false;
}

私はこれが古い投稿であることを知っていますが、jQuery 1.10.3と上記のソリューションを使用してテキストで選択することはできませんでした。私は次のコード（spoulsonのソリューションのバリエーション）を使用してしまいました。

      var textToSelect = "Hello World";

      $("#myDropDown option").each(function (a, b) {
            if ($(this).html() == textToSelect ) $(this).attr("selected", "selected");
        });

それが誰かを助けることを願っています。

この行は機能しました：

$("#myDropDown option:contains(myText)").attr('selected', true);

 $("#Test").find("option:contains('two')").each(function(){
     if( $(this).text() == 'two' ) {
        $(this).attr("selected","selected");
     }
 });

ifステートメントは "two"および "two three"と完全に一致しません。

1.7以降で最も簡単な方法は次のとおりです。

$("#myDropDown option:text=" + myText +"").attr("selected", "selected"); 

1.9以上

$("#myDropDown option:text=" + myText +"").prop("selected", "selected"); 

テストされ、動作します。

これは非常に簡単な方法です。それを使用してください

$("#free").val("y").change();

jquery selectedboxプラグインを見てください

selectOptions(value[, clear]): 

パラメータとして文字列$("#myselect2").selectOptions("Value 1");または正規表現を使用して、値でオプションを選択します$("#myselect2").selectOptions(/^val/i);。

すでに選択されているオプションをクリアすることもできます： $("#myselect2").selectOptions("Value 2", true);

余談です。選択した値が設定されていませんでした。そして、ネット全体を検索しました。実際、Webサービスからデータを取得していたため、Webサービスからのコールバック後に値を選択する必要がありました。

$("#SelectMonth option[value=" + DataFromWebService + "]").attr('selected', 'selected'); 
$("#SelectMonth").selectmenu('refresh', true);

したがって、セレクターの更新だけが欠けていたものでした。

私はattrあなたを使用すると、あなたがしたくないときに複数のオプションが選択されてしまうことに気づきました-解決策は次のものを使用することpropです：

$("#myDropDown option:text=" + myText +"").prop("selected", "selected");

上記の例に問題がありました。問題は、選択ボックスの値に6文字の固定長文字列が事前に入力されているが、渡されるパラメーターが固定長ではなかったことが原因です。

文字列を指定された長さに、指定された文字で右パディングするrpad関数があります。そのため、パラメーターをパディングした後、機能します。

$('#wsWorkCenter').val(rpad(wsWorkCenter, 6, ' '));


function rpad(pStr, pLen, pPadStr) {
if (pPadStr == '') {pPadStr == ' '};
while (pStr.length < pLen)
    pStr = pStr + pPadStr;
return pStr; 
} 

 $('#theYear').on('change', function () {
 FY = $(this).find('option:selected').text();
 $('#theFolders').each(function () {
     $('option:not(:contains(' + FY + '))', this).hide();
 });
 $('#theFolders').val(0);
});

$('#theYear').on('mousedown', function () {
 $('#theFolders option').show().find('option:contains("Select")', this).attr('selected', 'selected');
});

この受け入れられた答えは正しくないようですが、.val（ 'newValue'）は関数に対して正しいので、名前で選択を取得しようとしても機能しません。要素を取得するためにIDとクラス名を使用する必要がありました。

簡単なオプションがあります。リストオプションを設定し、そのテキストを選択した値として設定するだけです。

$("#ddlScheduleFrequency option").selected(text("Select One..."));

選択ボックスの子を取得します。それらをループします。必要なものが見つかったら、それを選択オプションとして設定します。ループを停止するにはfalseを返します。