通過jQuery文本內容選擇選項

我想設置一個下拉框，通過使用jquery通過querystring傳遞的任何內容。通過jQuery文本內容選擇選項

如何將選定的屬性添加到選項中，使「TEXT」值等於查詢字符串中的某個參數？

$(document).ready(function() { 
     var cat = $.jqURL.get('category'); 
     if (cat != null) { 
      cat = $.URLDecode(cat); 
      var $dd = $('#cbCategory'); 
      var $options = $('option', $dd); 
      $options.each(function() { 
       if ($(this).text() == cat) 
        $(this).select(); // This is where my problem is 
      }); 
     }; 
    });

來源

2009-06-17 OneSmartGuy

可能重複 - 設置的選定值選擇控制通過它的文字描述]（http://stackoverflow.com/questions/496052/jquery-setting-the-selected-value-of-a-select-control-via-its-text-description） – 2013-07-01 21:44:46

171

替換此：

var cat = $.jqURL.get('category'); 
var $dd = $('#cbCategory'); 
var $options = $('option', $dd); 
$options.each(function() { 
if ($(this).text() == cat) 
    $(this).select(); // This is where my problem is 
});

有了這個：

$('#cbCategory').val(cat);

選擇列表上調用val()將自動選擇與該值的選項，如果有的話。

來源

2009-06-17 22:01:48

不能用這種方法選擇多個選項？ – 2012-10-19 21:14:21

此方法不會觸發$（'＃cbCategory'）元素上的事件。 – 2012-10-22 10:48:42

我知道這個問題是太舊了，不過，我覺得這個方法是清潔劑：

cat = $.URLDecode(cat); 
$('#cbCategory option:contains("' + cat + '")').prop('selected', true);

在這種情況下，你不會需要去在整個方案與each()。雖然那個時候prop()沒有爲舊版本的jQuery的存在，因此使用attr()。

UPDATE

你必須使用contains時候，因爲你可以找到多個選項，在字符串的情況下，內部cat比你打算匹配一個不同選項的子字符串匹配是肯定的。

那麼你應該使用：

cat = $.URLDecode(cat); 
$('#cbCategory option') 
    .filter(function(index) { return $(this).text() === cat; }) 
    .prop('selected', true);

來源

2012-11-30 11:43:22

如果您<option>元素沒有value屬性，那麼你可以使用.val：

$selectElement.val("text_you're_looking_for")

但是，如果你<option>元素具有價值屬性，或在將來可能會做，那麼這將無法工作，因爲只要有可能.val將其value屬性，而不是通過選擇一個選項，它的文本內容。有沒有內置的jQuery的方法，如果選擇有value屬性，將選擇其文本內容的選項，所以我們需要增加一個我們用一個簡單的插件：

/* 
    Source: https://stackoverflow.com/a/16887276/1709587 

    Usage instructions: 

    Call 

     jQuery('#mySelectElement').selectOptionWithText('target_text'); 

    to select the <option> element from within #mySelectElement whose text content 
    is 'target_text' (or do nothing if no such <option> element exists). 
*/ 
jQuery.fn.selectOptionWithText = function selectOptionWithText(targetText) { 
    return this.each(function() { 
     var $selectElement, $options, $targetOption; 

     $selectElement = jQuery(this); 
     $options = $selectElement.find('option'); 
     $targetOption = $options.filter(
      function() {return jQuery(this).text() == targetText} 
     ); 

     // We use `.prop` if it's available (which it should be for any jQuery 
     // versions above and including 1.6), and fall back on `.attr` (which 
     // was used for changing DOM properties in pre-1.6) otherwise. 
     if ($targetOption.prop) { 
      $targetOption.prop('selected', true); 
     } 
     else { 
      $targetOption.attr('selected', 'true'); 
     } 
    }); 
}

就包括這個插件後某處你添加jQuery到頁面上，然後做

jQuery('#someSelectElement').selectOptionWithText('Some Target Text');

來選擇選項。

插件方法使用filter挑選出僅option匹配targetText，並使用任一.attr.prop或取決於jQuery的版本選擇它（參見.prop() vs .attr()用於解釋）。

這裏有一個的jsfiddle你可以用給定了這個問題，這表明這個人是可靠地工作的唯一一個所有三個答案玩：jQuery的的http://jsfiddle.net/3cLm5/1/

來源

2013-06-02 21:01:06

通過jQuery文本內容選擇選項

回答

相關問題