Question

当通过ajax调用返回值时，我正在使用jquery更新select选项。我把它放回到最简单的形式，当可见值改变时，'selected'属性保持

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>

单击“获取”按钮会将所选值更改为“灰色”。 selected属性也应该更改为Gray，但保持为Black。

Answer 1

你不应该担心选择＆＃34;选择＆＃34; attribute - 它只是定义页面加载时选择的选项。当选择改变时（通过用户选择或脚本），＆＃34;选择＆＃34;属性保持不再有用。发布表单或通过JavaScript读取选择时，将使用实际选定的值。

您可以随时获取当前选定的值：

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

此外，＆＃34;选择＆＃34;属性应该写成没有=＆＃34;＆＃34;，如下所示：

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

如果你绝对必须改变哪个选项有＆＃34;选择＆＃34;属性，然后您必须在选择更改时通过JavaScript更改它。但我从来没有见过这种必要的情况，我怀疑你真的不需要这样做。

Answer 2

您可以通过attribute-selector设置所选选项并设置selected - 属性：

$("#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

Answer 3

你可以这样做 -

$("#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/

jquery .val（）改变属性选择状态

3 个答案: