jQuery - thiết lập giá trị được chọn của điều khiển chọn thông qua mô tả văn bản của nó


530

Tôi có một điều khiển chọn và trong một biến javascript tôi có một chuỗi văn bản.

Sử dụng jQuery Tôi muốn đặt phần tử được chọn của điều khiển chọn là mục có mô tả văn bản mà tôi có (trái ngược với giá trị mà tôi không có).

Tôi biết thiết lập nó theo giá trị là khá nhỏ. ví dụ

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

Nhưng tôi hơi bối rối khi thực hiện nó thông qua mô tả văn bản. Tôi đoán phải có một cách để lấy giá trị từ mô tả văn bản, nhưng bộ não của tôi quá chiều thứ sáu để có thể giải quyết nó.


1
@DanAtkinson cũng sắp làm điều tương tự. chọn hoàn toàn không có gì để làm với câu hỏi này.
thecoshman

Câu trả lời:


757

Chọn theo mô tả cho 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>

Các phiên bản jQuery dưới 1.6 và lớn hơn hoặc bằng 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>

Lưu ý rằng mặc dù cách tiếp cận này sẽ hoạt động trong các phiên bản trên 1.6 nhưng dưới 1.9, nhưng nó đã bị từ chối kể từ 1.6. Nó sẽ không hoạt động trong jQuery 1.9+.


Những phiên bản trước

val() Nên xử lý cả hai trường hợp.

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


6
Cảm giác như nó không nên hoạt động (có vẻ như nó có thể mơ hồ) nhưng nó thực sự sẽ hoạt động tốt với tôi. Cảm ơn.
DanSingerman

69
Lưu ý rằng jQuery 1.4 hiện đã thay đổi hành vi này để chọn valuenếu thuộc tính đã được chỉ định và chỉ chọn theo văn bản nếu valuethuộc tính bị thiếu. Vì vậy, trong ví dụ $('select').val('Two')này sẽ chọn tùy chọn thứ hai trong 1.3.x, nhưng sẽ không làm gì trong 1.4.x.
Lưỡi liềm tươi

18
Vì vậy, cách tốt nhất để làm điều đó trong 1.4 bây giờ là gì?
JR Lawhorne

4
Trong các phiên bản gần đây hơn của jQuery, .val ('không phải là tùy chọn-giá trị') sẽ đặt lại lựa chọn về tùy chọn đầu tiên.
dland

5
Câu trả lời đầu tiên cho câu hỏi này dường như là bài giải pháp 1.3.x stackoverflow.com/questions/3644449/iêu
DA.

142

Tôi đã không kiểm tra điều này, nhưng điều này có thể làm việc cho bạn.

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

90

Hãy thử điều này ... để chọn tùy chọn với văn bản myText

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

Câu trả lời của @ spoulson đã làm việc cho tôi ... Tôi đã cố gắng thực hiện mà không cần .each
Jay Corbett

2
Trong nhiều trường hợp, cách tiếp cận này không hiệu quả. $("#my-Select option[text=" + myText +"]").get(0).selected = true;
Thỉnh thoảng

2
Hãy chắc chắn rằng bạn lần đầu tiên xóa thuộc tính đã chọn trước khi cài đặt lại, nếu không nó sẽ không hoạt động (hoạt động với tôi trong 1.9)
esse

3
@MarkW Cho 1.9, sử dụng .propthay vì .attr; Nguyên nhân của sự thay đổi là trong 1.9 jQuery đã vô hiệu hóa các bản hack cũ cho phép bạn sử dụng .attrđể thay đổi một số thuộc tính DOM cũng như các thuộc tính HTML. (Google javascript dom properties vs attributesnếu bạn không biết phân biệt.)
Mark Amery

Cập nhật câu trả lời để sử dụng .prop('selected', true)thay vì .attr('selected', 'selected')cho khả năng tương thích jQuery 1.9+.
erwaman

43

Tôi làm theo cách này (jQuery 1.9.1)

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

Lưu ý: đừng quên thay đổi (), tôi đã phải tìm kiếm lâu vì điều đó :)


2
Chúc tôi có thể upvote nhiều lần. Đã một giờ trôi qua và giờ tôi có thể về nhà.
Bob Jordan

Câu trả lời chính xác! ngắn gọn và đơn giản ... Điều này nên được đặt lên hàng đầu ... Hãy tiếp tục bỏ phiếu.
Muhammad Tarique

Điều này làm việc trong trường hợp của tôi, cảm ơn! Nhưng không phải lựa chọn này không phải bởi văn bản được hiển thị, như OP yêu cầu, mà bởi chính giá trị, mà OP không có?
Brandon Rhodes

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

sẽ trả về giá trị của tùy chọn đầu tiên chứa mô tả văn bản của bạn. Đã thử nghiệm điều này và hoạt động.


Cảm ơn - Tôi nghĩ rằng đây có thể là phiên bản tôi sử dụng, vì tôi cũng cần phải có logic khi không có văn bản phù hợp và đây có vẻ là cơ chế dễ nhất, để có thể làm điều đó.
DanSingerman

1
Hãy nhớ rằng, nó sẽ chỉ nhận được giá trị cho tùy chọn đầu tiên phù hợp với văn bản.
Nga Cam

Ngoài ra, bạn có thể xâu chuỗi attr ("đã chọn", "đã chọn") vào bộ được bọc thay vì val () và điều này sẽ hoạt động tương tự như câu trả lời của CarolinaJay65
Russ Cam

1
OP cho biết " giá trị cài đặt " không phải " nhận giá trị"
RousseauAlexandre

15

Để tránh tất cả các biến chứng của phiên bản jQuery, tôi thành thật khuyên bạn nên sử dụng một trong các hàm javascript thực sự đơn giản này ...

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

Nó cho phép lựa chọn một tùy chọn chọn thông qua giá trị hoặc văn bản (tùy thuộc vào chức năng được gọi). Ví dụ: setSelectByValue ('xúc xích', '2'); Sẽ tìm và chọn tùy chọn có giá trị "2" trong đối tượng lựa chọn có id "xúc xích".
Dave

2
@Neal Uh ... nó trả lời câu hỏi?
Đánh dấu Amery

10

Tôi biết đây là một bài viết cũ, nhưng tôi không thể chọn nó bằng văn bản bằng jQuery 1.10.3 và các giải pháp ở trên. Tôi đã kết thúc bằng cách sử dụng mã sau đây (biến thể của giải pháp spoulson):

      var textToSelect = "Hello World";

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

Hy vọng nó sẽ giúp được ai đó.


10

Dòng này hoạt động:

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

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

Câu lệnh if thực hiện khớp chính xác với "hai" và "hai ba" sẽ không được khớp


Không, đó không phải là ý tôi. Tôi nghĩ rằng nhận xét của tôi là một chút không rõ ràng, vì vậy tôi chỉ cần xóa nó. Tôi đã nêu lên câu trả lời của bạn, bởi vì nó làm việc cho tình huống của tôi.
Jagd

6

Cách dễ nhất với 1.7+ là:

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

1.9+

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

Đã thử nghiệm và hoạt động.


1
Không phải trong 1.9+ thì không. Vì 1.6 bạn nên sử dụng .propđể thay đổi các thuộc tính DOM chứ không phải .attr(dành cho các thuộc tính HTML / DOM). Xem stackoverflow.com/q/5874652/1709587
Đánh dấu Amery

Tôi sẽ sử dụng ("được chọn", đúng) thay vì giá trị trung thực của "đã chọn"
mplungjan

5

Đây là cách rất đơn giản. làm ơn sử dụng nó

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

4

hãy xem plugin jquery selectbox

selectOptions(value[, clear]): 

Chọn tùy chọn theo giá trị, sử dụng chuỗi làm tham số $("#myselect2").selectOptions("Value 1");hoặc biểu thức chính quy $("#myselect2").selectOptions(/^val/i);.

Bạn cũng có thể xóa các tùy chọn đã chọn: $("#myselect2").selectOptions("Value 2", true);


3

Chỉ cần một lưu ý phụ. Giá trị đã chọn của tôi không được đặt. Và tôi đã tìm kiếm trên mạng. Trên thực tế tôi đã phải chọn một giá trị sau khi gọi lại từ một dịch vụ web, bởi vì tôi đã nhận được dữ liệu từ nó.

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

Vì vậy, việc làm mới bộ chọn là thứ duy nhất tôi bị thiếu.


Đây là một trong những quyền - không ... tôi thấy không có lý do cho dòng thứ hai. Nên làm việc như là.
SEO Sagive 9/2/2015

2

Tôi thấy rằng bằng cách sử dụng, attrbạn sẽ kết thúc với nhiều tùy chọn được chọn khi bạn không muốn - giải pháp là sử dụng prop:

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


1

Tôi đã gặp vấn đề với các ví dụ ở trên và vấn đề xảy ra là do các giá trị hộp chọn của tôi được điền sẵn với các chuỗi có độ dài cố định là 6 ký tự, nhưng tham số được truyền theo chiều dài không cố định.

Tôi có một chức năng rpad sẽ đệm đúng một chuỗi, theo độ dài được chỉ định và với ký tự được chỉ định. Vì vậy, sau khi đệm tham số nó hoạt động.

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


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

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

0

Câu trả lời được chấp nhận này có vẻ không đúng, trong khi .val ('newValue') là đúng cho hàm, cố gắng truy xuất một lựa chọn theo tên của nó không hoạt động với tôi, tôi đã phải sử dụng id và tên lớp để lấy phần tử của mình


0

Đây là một lựa chọn dễ dàng. Chỉ cần đặt tùy chọn danh sách của bạn sau đó đặt văn bản của nó làm giá trị được chọn:

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

-1

Lấy con của hộp chọn; vòng qua chúng; khi bạn đã tìm thấy cái bạn muốn, hãy đặt nó làm tùy chọn đã chọn; trả về false để dừng lặp.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.