Jquery по проблеме изменения

Привет У меня есть следующий код (HTML + Jquery):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» будет появляться, то на («изменение») jQuery событие работает, но если я нажимаю кнопку выбора CSV после загрузки страницы, выбирается опция CSV в выпадающем меню, но кнопка CSV не появляется. Как я могу сделать операцию включения (изменения) для выпадающего меню на кнопке «выбрать CSV»?

Спасибо.

источник

2015-03-31 oussama kamal

Это довольно просто - просто вызвать change событие вручную после установки значения, а именно:

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

Причина, почему change событие не срабатывает, когда вы манипулируете значение на .val() происходит потому, что событие вызвано только взаимодействием пользователя, а не программным. Поэтому изменение значения JS не распознается как событие change (другими словами, событие change не запускается). Это necessites с помощью .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>

источник

2015-03-31 17:24:50 Terry

Спасибо вам, это работает. –

Jquery по проблеме изменения

ответ

Смежные вопросы