HTML option 标签的 selected 属性
http://www.w3school.com.cn/tags/att_option_selected.asp
1、一般做WEB的时候，Chrome的兼容性会比较好，但是这里有个特殊的情况，下面的方法，Chrome会有问题。
Chrome版本：版本67.0.3371.0（正式版本） （32 位）
效果图
这里写图片描述
反例如下：（Chrome连续点击resetOption、setOption、resetOption、setOption就会出现问题）
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
//取消选中
function resetOption(id) {
$(‘#‘ + id).find("option").each(function() {
$(this).removeAttr("selected");
});
}
// 选中。这里强调的是：Chrome的BUG（版本67.0.3371.0（正式版本） （32 位））
function setOption(id, optionID) {
if (optionID == null) {
return;
}
$(‘#‘ + id).find("option").each(function() {
if ($(this).val() == optionID) {
$(this).attr("selected", "selected");
}
});
}
</script>
</head>
<body>
<div>
<select id="selectID">
<option value=‘0‘></option>
<option value=‘1‘>Volvo</option>
<option value=‘2‘ selected="selected">Saab</option>
<option value=‘3‘>Mercedes</option>
<option value=‘4‘>Audi</option>
</select>
<button type="button" onClick="resetOption(‘selectID‘)">resetOption</button>
<button type="button" onClick="setOption(‘selectID‘, ‘1‘)">setOption</button>
</div>
</body>
正例，推荐以下方法：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
//取消选中
function resetOption(id) {
$(‘#‘ + id).find("option").each(function() {
$(this).removeAttr("selected");
});
}
// 选中。--------------------------这部分代码不同
function setOption(selectID) {
var data = [ {
id : ‘0‘,
name : ‘‘
}, {
id : ‘1‘,
name : ‘Volvo‘
}, {
id : ‘2‘,
name : ‘Saab‘
}, {
id : ‘3‘,
name : ‘Mercedes‘
}, {
id : ‘4‘,
name : www.douniu157.com‘Audi‘
} ];
// default value
var id = ‘id‘;
var name = www.thd580.com‘name‘;
// empty value
var option = ‘<option value="0"></option>‘;
// other value
for ( var i in data) {
if (selectID != undefined && data[i][id] == selectID) {
option += ‘<option value="‘ + data[i][id] + ‘" selected="selected" >‘ + data[i][name] + ‘</option>‘;
continue;
}
option += ‘www.thd580.com<option value="‘ + data[i][id] + ‘">‘ + data[i][name] + ‘</option>‘;
}
$(‘#selectID‘).html(option);
}
</script>
</head>
<body>
<div>
<select id="selectID">
<option value=‘0‘>www.douniu178.com </option>
<option value=‘1‘>Volvo</option>
<option value=‘2‘ selected="selected">Saab</option>
<option value=‘3‘>Mercedes</option>
<option value=‘4‘>Audi</option>
</select>
<button type="button" onClick="resetOption(‘selectID‘)">resetOption</button>
<button type="button" onClick="setOption(‘1‘)">setOption</button>
</div>
</body>
</html>
2、测试地址（把上面的代码贴进去，提交代码，右侧就会出现效果）
http://www.w3school.com.cn/tiy/t.asp?f=jquery_hide
原文地址：https://www.cnblogs.com/qwangxiao/p/8666643.html