jQuery - การตั้งค่าที่เลือกของตัวควบคุมที่เลือกผ่านคำอธิบายข้อความ

ฉันมีการควบคุมที่เลือกและในตัวแปรจาวาสคริปต์ฉันมีสตริงข้อความ

การใช้ jQuery ฉันต้องการตั้งค่าองค์ประกอบที่เลือกของตัวควบคุมการเลือกให้เป็นรายการที่มีคำอธิบายข้อความที่ฉันมี (ตรงข้ามกับค่าที่ฉันไม่มี)

ฉันรู้ว่าการตั้งค่าตามตัวอักษรนั้นค่อนข้างน่ารำคาญ เช่น

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

แต่ฉันก็นิ่งงันกับการทำมันผ่านคำอธิบายข้อความ ฉันเดาว่าต้องมีวิธีในการรับค่าออกมาจากคำอธิบายข้อความ แต่สมองของฉันมันเกินไปบ่ายวันศุกร์ - ed เพื่อให้สามารถทำงานได้

เลือกตามคำอธิบายสำหรับ 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>

jQuery เวอร์ชันต่ำกว่า 1.6 และมากกว่าหรือเท่ากับ 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>

โปรดทราบว่าแม้ว่าวิธีการนี้จะใช้งานได้ในเวอร์ชันที่สูงกว่า 1.6 แต่น้อยกว่า 1.9 แต่ก็ไม่ได้รับการสนับสนุนตั้งแต่ 1.6 มันจะไม่ทำงานใน jQuery 1.9+

รุ่นก่อนหน้า

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();

หมายเหตุ: อย่าลืมการเปลี่ยนแปลง () ฉันต้องค้นหานานเพราะสิ่งนั้น :)

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

จะคืนค่าของตัวเลือกแรกที่มีคำอธิบายข้อความของคุณ ทดสอบสิ่งนี้และใช้งานได้

เพื่อหลีกเลี่ยงภาวะแทรกซ้อนทุกรุ่น jQuery ฉันขอแนะนำให้ใช้ฟังก์ชั่นจาวาสคริปต์อย่างง่าย ๆ เหล่านี้ ...

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 และวิธีแก้ไขด้านบน ฉันลงเอยด้วยการใช้โค้ดต่อไปนี้ (ความหลากหลายของวิธีแก้ปัญหาของสปูลสัน):

      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 จะจับคู่แบบตรงกับ "สอง" และ "สองสาม" จะไม่ถูกจับคู่

วิธีที่ง่ายที่สุดด้วย 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);

เพียงสังเกตด้านข้าง ไม่ได้ตั้งค่าที่ฉันเลือกไว้ และฉันค้นหาทั่วทั้งเครือข่าย ที่จริงฉันต้องเลือกค่าหลังจากโทรกลับจากบริการเว็บเพราะฉันได้รับข้อมูลจากมัน

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

ดังนั้นการรีเฟรชตัวเลือกจึงเป็นสิ่งเดียวที่ฉันขาดหายไป

ฉันพบว่าการใช้attrคุณจะจบลงด้วยการเลือกหลายตัวเลือกเมื่อคุณไม่ต้องการ - โซลูชันคือการใช้prop:

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

ฉันมีปัญหากับตัวอย่างข้างต้นและปัญหาเกิดจากความจริงที่ว่าค่ากล่องที่เลือกของฉันถูกเติมข้อมูลล่วงหน้าด้วยสตริงความยาวคงที่จำนวน 6 ตัวอักษร แต่พารามิเตอร์ที่ส่งผ่านนั้นไม่ได้มีความยาวคงที่

ฉันมีฟังก์ชั่น rpad ซึ่งจะทำให้สตริงถูกต้องตามความยาวที่ระบุและด้วยอักขระที่ระบุ ดังนั้นหลังจาก padding พารามิเตอร์มันใช้งานได้

$('#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 และ classname เพื่อรับองค์ประกอบของฉัน

นี่เป็นตัวเลือกที่ง่าย เพียงตั้งค่าตัวเลือกรายการของคุณจากนั้นตั้งค่าข้อความเป็นค่าที่เลือก:

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

รับลูกของกล่องที่เลือก; วนรอบพวกเขา; เมื่อคุณพบสิ่งที่คุณต้องการให้ตั้งเป็นตัวเลือกที่เลือก กลับเท็จเพื่อหยุดการวนลูป