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（）更改属性选择状态

回答

相关问题