Question

您好我有以下代码（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>

如果我选择＆＃34; CSV＆＃34;从下拉列表中标有＆＃34; CSV＆＃34;将apear，on（＆＃39; change＆＃39;）jQuery事件工作，但如果我在加载页面后单击选择CSV按钮，则会在下拉列表中选择CSV选项，但CSV按钮不会显示。如何让on（更改）事件适用于＆＃34;选择CSV＆＃34;按钮点击了吗？

感谢。

Answer 1

这很简单 - 只需在设置值后手动触发change事件，即：

$('#FileType').val("CSV").trigger("change");

当您通过change操作值时，.val()事件未触发的原因是因为事件仅由用户交互触发 - 而不是以编程方式触发。因此，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

1 个答案: