jquery .val（）更改屬性選擇狀態

我正在使用jquery更新選擇選項時，通過ajax調用返回值。我已經把這個回最簡單的形式，並同時可見值的變化，「選擇」屬性保持jquery .val（）更改屬性選擇狀態

jQuery(document).ready(function($) { 
 
    $("#fetchCAP").on('click',function (e) { 
 
     $('#used_car_colour').val('grey'); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="button" class="button button-primary" name="fetchCAP" id="fetchCAP" value="Fetch"> 
 

 
<select name="used_car_colour" id="used_car_colour"> 
 
    <option class="colour-option" value="">None</option> 
 
    <option class="colour-option" value="black" selected="">Black</option> 
 
    <option class="colour-option" value="brown">Brown</option> 
 
    <option class="colour-option" value="grey">Grey</option> 
 
    <option class="colour-option" value="white">White</option> 
 
</select>

點擊獲取按鈕將更改所選值灰色。選中的屬性也應該變成灰色，但保持黑色。

來源

2015-04-01 Jonathan Garrett

它工作正常，我https://jsfiddle.net/h4sqc3zd/ – 2015-04-01 11:58:32

你爲什麼要在這裏更改選定的屬性？ – empiric 2015-04-01 12:03:13

您不必擔心「選定」屬性 - 它只是定義在頁面加載時選擇哪個選項。當選擇更改（通過用戶選擇或腳本）時，「選定」屬性將保留並不再有用。當表單發佈或通過JavaScript讀取選擇時，將使用實際選定的值。

你總是可以得到當前選擇的值是這樣的：

var selected = $('#used_car_colour').val();

此外，「選擇」屬性應該沒有=「」寫的，如下：

<option class="colour-option" value="black" selected>Black</option>

如果您絕對必須改變哪個選項具有「selected」屬性，那麼當選擇改變時，你將不得不通過JavaScript改變它。但是我從來沒有見過這種情況是必要的，我懷疑你不需要這樣做。

來源

2015-04-01 11:58:11

您可以設置通過attribute-selector所選擇的選項，並設置selected -attribute：

$("#fetchCAP").on('click', function (e) { 
    $('#used_car_colour option').attr('selected', false); 
    //remove all other selected-attributes 

    $('#used_car_colour').val('grey'); 
    $('#used_car_colour option[value=grey]').attr('selected', true); 
    //set the selected attribute to the selected option 
});

Demo

來源

2015-04-01 12:00:12 empiric

我的理解是.val（）應該爲你做到這一點？ – 2015-04-01 12:03:31

@JonathanGarrett否，並且'val（）'函數的getter不取決於'selected'屬性。它僅取決於用戶的輸入，因此在該功能觸發時選擇該輸入。 – empiric 2015-04-01 12:05:16

@JonathanGarrett在一般情況下，除非存在一些例如不需要設置「selected」屬性的屬性， CSS取決於它。 – empiric 2015-04-01 12:06:43

你能做到這way-

$("#fetchCAP").on('click',function (e) { 
     $('#used_car_colour').find('option[value="grey"]').attr('selected','selected'); 
});

https://jsfiddle.net/08dxqsxu/

同時去除其他選項的選擇屬性，這將是─

$('#used_car_colour').find('option[value="grey"]').attr('selected','selected').siblings().removeAttr('selected');

https://jsfiddle.net/sng620x1/

來源

2015-04-01 12:04:45 Manoj

jquery .val（）更改屬性選擇狀態

回答

相關問題