如何使用jQuery在文本中選擇一個選項

如何使用jQuery在文本選擇中設置選項？以下作品如何使用jQuery在文本中選擇一個選項

$("#selectID option:contains('optionText')").attr("selected", true);

有沒有更簡單/更短的方式？

例

<select id="fruit"> 
    <option value="">--select--</option> 
    <option value="1">apple</option> 
    <option value="2">pineapple</option> 
    <option value="3">orange</option> 
<select> 
<br> 
<button>apple</button> 
<button>orange</button> 
<button>pineapple</button> 

$(function() { 
    $("button").click(function() { 
     $("#fruit option:contains('" + $(this).text() + "')").attr("selected", true); 
    }) 
})

Demo

EDIT

張貼以上使用包含有一個錯誤的版本。由於Contains也會匹配部分字符串（例如，蘋果會匹配菠蘿），因此可以選擇不正確的選項。

// Doesn't work in FF4, IE9 using jQuery 1.4.4 
$('#fruit').val('apple'); // Doesn't work in FF4, IE9 using jQuery 1.4.4 

// Doesn't work either in FF4, IE9 using jQuery 1.4.4 
$('#fruit option[text="apple"]').attr("selected", true); 

// This works 
$("#fruit").children("option[text='apple']").attr("selected", true);

編輯 2012年2月14日

// The above doesn't work in jQuery 1.7.1 

// Using even more verbose version [Demo][2] 

var buttonText = $(this).text(); 

$("#fruit option:contains('" + buttonText + "')") 
    .filter(function(i){ 
     return $(this).text() === buttonText; 
    }) 
    .attr("selected", true)

來源

2011-05-13 amit_g

爲什麼你想要的東西更短？這看起來很好！ – 2011-05-13 18:06:23

實際上，當在一個頁面上碰到這個時，幾個輸入（type = text）以及選擇被選中，然後使用像elems.val（someCond？newValue：「」）這樣的設置進行設置。只要newValue是選擇的值，它對於輸入和選擇都可以正常工作。在某些情況下，選擇需要使用文本進行選擇。我試圖看看是否有一種通用的方法，以便腳本不必添加另一個如果確定elem是輸入還是選擇。 – 2011-05-13 18:11:30

發佈的版本有一個bug和$（'＃fruit選項[text =「apple」]'）。attr（「selected」，「selected」）;也不起作用。更新了問題。 – 2011-05-13 21:23:34

// Work in FF4, IE9 using jQuery 1.4.4 but has a bug (see original post) 
$("#selectID option:contains('optionText')").attr("selected", true); 

// Doesn't work in FF4, IE9 using jQuery 1.4.4 
$('#fruit').val('apple'); // Doesn't work in FF4, IE9 using jQuery 1.4.4 

// Doesn't work either in FF4, IE9 using jQuery 1.4.4 
$('#fruit option[text="apple"]').attr("selected", true); 

// This works 
$("#fruit").children("option[text='apple']").attr("selected", true);

Demo

編輯 2012年2月14日

// The above doesn't work in jQuery 1.7.1 

// Using even more verbose version [Demo][2] 

var buttonText = $(this).text(); 

$("#fruit option:contains('" + buttonText + "')") 
    .filter(function(i){ 
     return $(this).text() === buttonText; 
    }) 
    .attr("selected", true)

來源

2011-09-28 06:13:15

你應該能夠做到：

$('#fruit').val('apple');

其實，在新版本的jQuery，這是不行的，你是對的。唯一我能想到的是：

$('#fruit option[text="apple"]').attr("selected","selected");

這比你的還要好嗎？ ;）

來源

2011-05-13 18:06:24 slandau

嘗試了一個變化。在FF4和IE9中不起作用。 [Demo]（http://jsfiddle.net/c2cb9/4/） – 2011-05-13 18:12:56

這實際上不起作用，因爲所選列表不包含apple的值。請參閱：http://jsfiddle.net/c2cb9/4/ – Paramount 2011-05-13 18:13:58

請參閱我的編輯。謝謝。 – slandau 2011-05-13 18:20:11

-1

它可以實現像這樣：

<select id="fruit"> 
<option value="">--select--</option> 
<option value="1">apple</option> 
<option value="2">orange</option> 
<select> 
<br> 
<button data-id="1">apple</button> 
<button data-id="2">orange</button>

$(function() { 
    $("button").click(function() { 
     $("#fruit").val($(this).data('id')); 
    }); 
});

這只是一種方式是可以做到的。您也可以將選項值設置爲'apple'和'orange'，然後使用以下js代替。

$(function() { 
    $("button").click(function() { 
     $("#fruit").val($(this).text()); 
    }); 
});

來源

2011-05-13 18:12:29 Paramount

如何使用jQuery在文本中選擇一個選項

回答

相關問題