The change event is not thrown in select bootstrap in chrome [closed]

Navigation
0

My problem is this and it is that this code: 

$("#consultas").change(function(){
    console.log("opcion2");
    alert("Hola");
});

It works correctly in Firefox but I do not know why not in Chrome (In other browsers I have not tried). It is an event that I want to launch in a select with classes of Bootstrap , that is, in a project using jQuery and Bootstrap .

I have tried solutions that give on the web as: 

$('#consultas').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {
  var selected = $(e.currentTarget).val();
});

The weird thing is that it works in one browser and not in another.

    
asked by Javier Sánchez 02.01.2017 в 15:57
source

2 answers

1

In Select2 programatic control use instead of DOM

Example using select2:select 

$('.Select2').select2().on("select2:select", function (e) {
  console.log('Cambio')
  console.log(e.params.data)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select class="Select2" style="width: 100px;">
  <option>&nbsp;</option>
  <option>uno</option>
  <option>dos</option>
  <option>tres</option>
</select>

Example using change 

$('.Select2').select2().on("change", function (e) {
  console.log('Cambio')
  console.log(e.params)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select class="Select2" style="width: 100px;">
  <option>&nbsp;</option>
  <option>uno</option>
  <option>dos</option>
  <option>tres</option>
</select>

There is no difference in the form of change but if what you occupy is to capture id , clase , etc. of the selected item is better to use select2:select

    
answered by 02.01.2017 в 17:16
0

You can prove with this if onchange does not work for you 

document.getElementById('consultas').addEventListener('change', function() {
    alert('cambiado');
}, false);
 <select id="consultas">
  <option>uno</option>
  <option>dos</option>
 </select>
    
answered by 02.01.2017 в 16:24
Change class and name to an input depending on a radio input with jquery Overwriting rows with python