jQuery - mengatur nilai yang dipilih dari kontrol pilih melalui deskripsi teksnya

Saya memiliki kontrol pilih, dan dalam variabel javascript saya memiliki string teks.

Menggunakan jQuery, saya ingin mengatur elemen yang dipilih dari kontrol pilih menjadi item dengan deskripsi teks yang saya miliki (sebagai lawan dari nilai, yang tidak saya miliki).

Saya tahu pengaturannya dengan nilai cukup sepele. misalnya

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

Tapi saya agak bingung melakukannya melalui deskripsi teks. Saya kira harus ada cara untuk mendapatkan nilai dari deskripsi teks, tetapi otak saya terlalu Jumat sore-red untuk bisa menyelesaikannya.

Pilih menurut deskripsi untuk 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>

Versi jQuery di bawah 1.6 dan lebih besar dari atau sama dengan 1.4

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>

Perhatikan bahwa meskipun pendekatan ini akan berfungsi dalam versi yang di atas 1,6 tetapi kurang dari 1,9, itu telah ditinggalkan sejak 1.6. Ini tidak akan berfungsi di jQuery 1.9+.

Versi sebelumnya

val() harus menangani kedua kasus.

$('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>

Saya belum menguji ini, tetapi ini mungkin bekerja untuk Anda.

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

Coba ini ... untuk memilih opsi dengan teks myText

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

Saya melakukannya dengan cara ini (jQuery 1.9.1)

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

Catatan: jangan lupa perubahan (), saya harus mencari terlalu lama karena itu :)

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

akan mengembalikan nilai opsi pertama yang berisi deskripsi teks Anda. Menguji ini dan berhasil.

Untuk menghindari semua komplikasi versi jQuery, jujur ​​saya sarankan menggunakan salah satu dari fungsi javascript yang sangat sederhana ini ...

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;
}

Saya tahu ini adalah posting lama, tapi saya tidak bisa memilihnya dengan teks menggunakan jQuery 1.10.3 dan solusi di atas. Saya akhirnya menggunakan kode berikut (variasi solusi spoulson):

      var textToSelect = "Hello World";

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

Semoga ini bisa membantu seseorang.

Baris ini berfungsi:

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

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

Pernyataan if benar-benar cocok dengan "dua" dan "dua tiga" tidak akan cocok

Cara termudah dengan 1.7+ adalah:

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

1.9+

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

Diuji dan bekerja.

Ini cara yang sangat sederhana. tolong gunakan itu

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

lihat di plugin jquery selectedbox

selectOptions(value[, clear]): 

Pilih opsi berdasarkan nilai, menggunakan string sebagai parameter $("#myselect2").selectOptions("Value 1");, atau ekspresi reguler $("#myselect2").selectOptions(/^val/i);.

Anda juga dapat menghapus opsi yang sudah dipilih: $("#myselect2").selectOptions("Value 2", true);

Hanya sebagai catatan. Nilai yang saya pilih tidak disetel. Dan saya telah mencari di internet. Sebenarnya saya harus memilih nilai setelah panggilan balik dari layanan web, karena saya mendapatkan data darinya.

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

Jadi penyegaran pemilih adalah satu-satunya hal yang saya lewatkan.

Saya menemukan bahwa dengan menggunakan attrAnda akan berakhir dengan beberapa opsi yang dipilih ketika Anda tidak mau - solusinya adalah menggunakan prop:

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

Saya punya masalah dengan contoh di atas, dan masalah itu disebabkan oleh kenyataan bahwa nilai kotak pilih saya diawali dengan string panjang tetap 6 karakter, tetapi parameter yang diteruskan tidak panjang tetap.

Saya memiliki fungsi rpad yang akan menempel pad string, dengan panjang yang ditentukan, dan dengan karakter yang ditentukan. Jadi, setelah mengisi parameter itu berfungsi.

$('#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');
});

Jawaban yang diterima ini tampaknya tidak benar, sementara .val ('newValue') benar untuk fungsinya, mencoba untuk mengambil pilih dengan namanya tidak berfungsi untuk saya, saya harus menggunakan id dan nama kelas untuk mendapatkan elemen saya

Inilah opsi yang mudah. Cukup atur opsi daftar Anda lalu tetapkan teksnya sebagai nilai yang dipilih:

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

Dapatkan anak-anak dari kotak pilih; loop melalui mereka; ketika Anda telah menemukan yang Anda inginkan, aturlah sebagai opsi yang dipilih; return false untuk menghentikan perulangan.