更改 function 在 Edge 或 IE 中未触发

Question

I'm trying to figure out how to get the change function to fire on IE and Edge. I'm trying to have two select fields feed into a hidden input, overriding any previous selected values. For example, I select option 1 from the first select, 1 will be the value of the hidden input. If I select option 3 from the second select, 3 will be the new value of the hidden input.

<select id="select1">
<option value="1">1</option>
<option value="2">2</option>
</select>

<select id="select2">
<option value="3">3</option>
<option value="4">4</option>
</select>

<input type="hidden" id="hiddenInput">

<script>
$(document).ready(function() {
$('#select1').on("change", function() {
   $('#hiddenInput').val($(this).val());
});
$('#select2').on("change", function() {
   $('#hiddenInput').val($(this).val());
});
});
</script>

Answer 1

Although your code should work there's no need to call the 'on' method twice. You can call it once by using the element as a selector or assign a class to it.

Ex:

$('select').on('change', function() {
    $('#hiddenInput').val($(this).val());
});

or

$('.selectClass').on('change', function() {
    $('#hiddenInput').val($(this).val());
});