您好，我有以下代码(HTML + jQuery):
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn_CSV, #btn_XLS").hide();
$('#FileType').on('change', function() {
var selectedItem = $('#FileType option:selected').index();
if(selectedItem === 1){
$('#btn_XLS').hide();
$('#btn_CSV').show();
}else if(selectedItem === 2){
$('#btn_XLS').show();
$('#btn_CSV').hide();
}
});
$("#selector").on('click', function() {
$('#FileType').val("CSV");
});
});
</script>
</head>
<body>
<div>
<button id="selector">Select CSV</button>
<select id="FileType" >
<option value="default" disabled="disabled" selected="selected">--Select option--</option>
<option value="CSV">CSV</option>
<option value="XLS">XLS</option>
</select>
<button id="btn_CSV">CSV</button>
<button id="btn_XLS">XLS</button>
</div>
</body>
</html>
如果我从下拉列表中选择“CSV”，则会出现一个标有“CSV”的按钮，on('change') jQuery 事件有效，但如果我在页面加载后单击“选择 CSV”按钮，则 CSV 选项将在下拉列表已选择，但 CSV 按钮未出现。如何使 on(change) 事件也适用于“选择 CSV”按钮单击的下拉菜单？
谢谢。
最佳答案
这非常简单 - 只需在设置值后手动触发 change 事件即可，即:
$('#FileType').val("CSV").trigger("change");
当您通过 .val() 操作值时，change 事件不会触发的原因是该事件仅由用户交互触发，而不是以编程方式触发。因此，JS 的值更改不会被识别为 change 事件(换句话说，change 事件不会被触发)。这需要使用 .trigger() 手动触发事件;)
请参阅下面的工作片段:
$(document).ready(function() {
$("#btn_CSV, #btn_XLS").hide();
$('#FileType').on('change', function() {
var selectedItem = $('#FileType option:selected').index();
if (selectedItem === 1) {
$('#btn_XLS').hide();
$('#btn_CSV').show();
} else if (selectedItem === 2) {
$('#btn_XLS').show();
$('#btn_CSV').hide();
}
});
$("#selector").on('click', function() {
$('#FileType').val("CSV").trigger("change");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button id="selector">Select CSV</button>
<select id="FileType">
<option value="default" disabled="disabled" selected="selected">--Select option--</option>
<option value="CSV">CSV</option>
<option value="XLS">XLS</option>
</select>
<button id="btn_CSV">CSV</button>
<button id="btn_XLS">XLS</button>
</div>关于jQuery 关于更改问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29374624/