ตัวเลือกใดที่ฉันต้องเลือกตัวเลือกด้วยข้อความ


207

ฉันต้องตรวจสอบว่า<select>มีตัวเลือกที่ข้อความเท่ากับค่าเฉพาะ

ตัวอย่างเช่นหากมี<option value="123">abc</option>ฉันจะมองหา "abc"

มีตัวเลือกให้ทำเช่นนี้หรือไม่?

ฉันกำลังมองหาสิ่งที่คล้ายกับ$('#select option[value="123"]');แต่สำหรับข้อความ


อืม ... hasคำตอบใน SLaks มีประโยชน์ แต่ประเด็นในคำตอบของ Floyds ก็ดีเช่นกัน ... ฉันไม่รู้ว่าจะยอมรับอะไร
Hailwood

กรณีเหล่านี้อ่อนไหวไหม? (ฉันกำลังมองหาตัวพิมพ์เล็กและตัวพิมพ์ใหญ่และสามารถแปลงให้ต่ำลงได้เสมอ
Hailwood

1
ฉันใช้ฟังก์ชันหลัก JavaScript. toLowerCase () และเปรียบเทียบหากจำเป็นต้องใช้ตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ นอกจากนี้ยอมรับเป็นคำตอบที่มีประโยชน์มากที่สุดสำหรับคำถามที่คุณถาม :)
Hari Pachuveetil

มันใช้งานไม่ได้กับ dropdown ที่มีหลายตัวเลือก API ?? ฉันพยายามแก้ปัญหาที่เป็นไปได้ทั้งหมดโดยไม่มีโชค ฉันใช้ multiselect dropdowm API ของ eric hynd ใครสามารถแก้ปัญหานี้ได้บ้าง
Chaitanya Chandurkar

คำตอบ:


320

สิ่งนี้สามารถช่วย:

$('#test').find('option[text="B"]').val();

ซอสาธิต

นี้จะให้คุณเลือกที่มีข้อความและไม่ได้คนที่มีข้อความที่มีB Bหวังว่านี่จะช่วยได้

สำหรับ jQuery รุ่นล่าสุดข้างต้นใช้งานไม่ได้ ตามที่แสดงความคิดเห็นโดยQuandaryด้านล่างนี่คือสิ่งที่ใช้ได้กับ jQuery 1.9.1:

$('#test option').filter(function () { return $(this).html() == "B"; }).val();

อัพเดทซอ


1
สิ่งนี้ใช้ไม่ได้กับ jquery เวอร์ชันล่าสุด (หากคุณลบ 'value =' จาก <option>)
KevinDeus

27
@KevinDeus: ทำไมต้องลงคะแนน! คำตอบสำหรับรุ่นของ jQuery นั้น!
Hari Pachuveetil

11
ให้ใช้ $ ('# test option') แทน filter (function () {return $ (this) .html () == "B";}). val ();
Stefan Steiger

84
@ คำถามยังไม่มีเหตุผลที่ถูกต้องในการโหวตคำตอบเมื่อความคิดเห็นสั้น ๆ พอเพียง หรือคุณคาดหวังให้เขาทดสอบคำตอบทั้งหมดของเขาสำหรับการเปิดตัว jQuery ใหม่ทุกครั้ง?
WynandB

2
ฉันคิดว่า downvote นั้นเกิดจากความจริงที่ว่าตัวอย่างข้างต้นเพิ่งพบค่าที่เลือกและไม่ได้ตั้งค่าที่เลือก
nivs1978

133

คุณสามารถใช้:contains()ตัวเลือกเพื่อเลือกองค์ประกอบที่มีข้อความเฉพาะ
ตัวอย่างเช่น:

$('#mySelect option:contains(abc)')

ในการตรวจสอบว่า<select>องค์ประกอบที่กำหนดมีตัวเลือกดังกล่าวหรือไม่ให้ใช้.has()วิธีการ :

if (mySelect.has('option:contains(abc)').length)

ในการค้นหาทั้งหมด<select>ที่มีตัวเลือกดังกล่าวให้ใช้:has()ตัวเลือก :

$('select:has(option:contains(abc))')

3
:containsตอนนี้ยังไม่ชัดเจนใช่ไหม
Hari Pachuveetil

ปัญหาเกี่ยวกับการบรรจุประกอบด้วยอะไร?
Ogier Schelvis

คุณจะทำอย่างไรกับตัวเลือกที่เลือกเท่านั้น
toddmo

สิ่งนี้ไม่ได้คว้าตัวเลือกด้วย123abcdefหรือไม่
Teepeemm

@Teepeemm ใช่นั่นคือข้อแตกต่างระหว่างสองคำตอบยอดนิยม การตรวจสอบด้านบนเท่านั้นส่งกลับตัวเลือกที่มีข้อความเฉพาะเท่านั้นอันนี้ส่งกลับตัวเลือกที่มี แต่ไม่เพียง แต่ข้อความที่เฉพาะเจาะจง ซึ่งบังเอิญเป็นสิ่งที่ฉันต้องการในขณะนี้ดังนั้นฉันดีใจมากที่ได้โพสต์มัน
Lee A.

30

ข้อเสนอแนะก่อนหน้านี้ไม่เหมาะกับฉันใน jQuery 1.7.2 เพราะฉันกำลังพยายามตั้งค่าดัชนีที่เลือกของรายการตามค่าจากกล่องข้อความและค่าข้อความบางอย่างมีอยู่ในหลายตัวเลือก ฉันลงเอยด้วยการใช้สิ่งต่อไปนี้:

$('#mySelect option:contains(' + value + ')').each(function(){
    if ($(this).text() == value) {
        $(this).attr('selected', 'selected');
        return false;
    }
    return true;
});

1
ฉันคิดว่านี่เป็นคำตอบที่ดีที่สุดเพราะจริง ๆ แล้วให้ผลลัพธ์ที่ถูกต้อง แต่ฉันอดไม่ได้ที่containsจะคิดว่าการข้ามไปโดยสิ้นเชิงอาจทำให้ทุกอย่างเร็วขึ้น
สไตล์

สิ่งนี้ใช้ได้ผลสำหรับฉัน แต่ในสถานการณ์ของฉันฉันสามารถคลิกแก้ไขบนกริดได้หลายครั้งดังนั้นจึงต้องลบรายการที่เลือกเมื่อไม่มีการจับคู่มิฉะนั้นตัวเลือกแรกที่เลือกจะยังคงอยู่สำหรับการแก้ไขในภายหลัง อื่น {$ (นี่) .attr ('ถูกเลือก', ''); กลับเท็จ }
esp

วิธีนี้ใช้ได้ผลสำหรับฉัน แต่แทนที่จะตั้งค่าคุณลักษณะตัวเลือกเพื่อเปลี่ยนเมนูเลือกที่ฉันต้องทำจริง ๆ : $(this).parent().val($(this).val()); คุณอาจทำทั้งสองอย่าง แต่สำหรับฉันการตั้งค่าเฉพาะผู้ปกครองval()ทำเคล็ดลับ
billynoah


15

สิ่งนี้ใช้ได้กับฉัน: $("#test").find("option:contains('abc')");


3
คุณควรเพิ่มคำอธิบายว่าทำไมจึงทำงานได้ดี
Hannes Johansson

@HannesJohansson หรืออย่างน้อยเขาก็ควรจะอธิบายว่ามันแตกต่างจากหรือเพิ่มสิ่งใหม่สำหรับคำตอบ SLaks ที่เกือบห้าปีแล้ว ; ^)
ruffin

4
ให้แน่ใจว่าคุณรู้ว่านี่จะพบตัวเลือกนี้เช่นกัน: <option> abcd </option>
ชาร์ลส์

ขอบคุณนี้ถูกต้องแน่นอนและสิ่งที่ทุกคนพลาดคือการเพิ่ม. atr ('ค่า'); ไปยังจุดสิ้นสุด นี่เป็นวิธีที่ง่ายที่สุดในการรับค่าเพื่อใช้งานในแบบไดนามิก! ดังนั้นรหัสเต็มควรเป็นแบบนี้ $("#testselect").find("option:contains('option-text')").attr('value'); ด้วยวิธีนี้คุณสามารถใช้กิจกรรมเช่น.click()เปลี่ยนการตั้งค่า
ChrisKsag

12

นี่เป็นวิธีที่ดีที่สุดสำหรับเลือกข้อความในรายการแบบเลื่อนลง

$("#dropdownid option:contains(your selected text)").attr('selected', true);

3
this is your selected text plus moreเช่นเดียวกับคำตอบที่คล้ายกันนี้จะได้พบกับตัวเลือกที่มี
Teepeemm

4

ฉันลองบางสิ่งเหล่านี้จนกว่าฉันจะได้ทำงานในทั้ง Firefox และ IE นี่คือสิ่งที่ฉันมาด้วย

$("#my-Select").val($("#my-Select" + " option").filter(function() { return this.text == myText }).val());

อีกวิธีในการเขียนมันในแฟชั่นที่อ่านง่ายขึ้น:

var valofText = $("#my-Select" + " option").filter(function() {
    return this.text == myText
}).val();
$(ElementID).val(valofText);

pseudocode:

$("#my-Select").val( getValOfText( myText ) );

เข้าท่ากับ jQuery รุ่นล่าสุด
Fr0zenFyr

จุดประสงค์"#my-Select" + " option"คืออะไร ทำไมไม่เพียง"#my-Select option"?
Teepeemm

3

ใช้ดังต่อไปนี้

$('#select option:contains(ABC)').val();

1
รหัสที่คุณระบุอาจแก้ไขปัญหาได้ แต่โปรดเพิ่มคำอธิบายสั้น ๆ ว่าวิธีนี้แก้ไขปัญหาได้อย่างไร ยินดีต้อนรับสู่กองมากเกินแนะนำอ่านวิธีการตอบ
Dan Beaulieu

3
หากมีตัวเลือกบางอย่าง: ABC, ABCD, ABCDEF แล้ว
hungndv

1

สิ่งนี้จะทำงานใน jQuery 1.6 (โคลอนบันทึกย่อก่อนวงเล็บเปิด) แต่ไม่สำเร็จในรุ่นที่ใหม่กว่า (1.10 ในเวลานั้น)

$('#mySelect option:[text=abc]")

5
น่าสนใจ แต่น่าเสียดายที่มันใช้งานไม่ได้ (jQuery 1.10.2)
WynandB

คุณต้องการที่จะรวมสิ่งที่ชอบ$("#mySelect option").filter(function() { return this.text == "abc"; });จะทำงานร่วมกับ jQuery รุ่นล่าสุด .. หรืออาจเป็นวิธีอื่นที่คุณต้องการใช้ ..
Fr0zenFyr

1

สำหรับ jquery เวอร์ชั่น 1.10.2 ด้านล่างใช้งานได้สำหรับฉัน

  var selectedText="YourMatchText";
    $('#YourDropdownId option').map(function () {
       if ($(this).text() == selectedText) return this;
      }).attr('selected', 'selected');
    });


0

สิ่งนี้ใช้ได้กับฉัน:

var result = $('#SubjectID option')
            .filter(function () 
             { return $(this).html() == "English"; }).val();

resultตัวแปรจะกลับดัชนีของค่าข้อความที่ตรงกับที่ ตอนนี้ฉันเพิ่งจะตั้งมันโดยใช้ดัชนี:

$('#SubjectID').val(result);

-1

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


-1

สิ่งนี้จะได้ผล

$ ('# test'). find ("ตัวเลือกเลือก: มี ('B')"). ตัวกรอง (": เลือก");


2
ABCนอกจากนี้ยังจะคว้าตัวเลือก
Teepeemm

-1

ตามที่อธิบายไว้ในคำตอบนี้คุณสามารถสร้างตัวเลือกของคุณเองสำหรับ hasText สิ่งนี้ช่วยให้คุณค้นหาตัวเลือกด้วย$('#test').find('option:hastText("B")').val();

นี่คือวิธีการ hasText ที่ฉันเพิ่ม:

 if( ! $.expr[':']['hasText'] ) {
     $.expr[':']['hasText'] = function( node, index, props ) {
       var retVal = false;
       // Verify single text child node with matching text
       if( node.nodeType == 1 && node.childNodes.length == 1 ) {
         var childNode = node.childNodes[0];
         retVal = childNode.nodeType == 3 && childNode.nodeValue === props[3];
       }
       return retVal;
     };
  }

-2

มันใช้งานได้สำหรับฉัน

var options = $(dropdown).find('option');
var targetOption = $(options).filter(
function () { return $(this).html() == value; });

console.log($(targetOption).val());

ขอบคุณสำหรับการโพสต์ทั้งหมด

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.