Run select change event by clicking on a button

user_3044737 0
Viewed 36

The below code works, but I need to fire sela on change event by clicking on button, so console is written ipsum.

Something like this: 

$('button').on('click', function(){
    $('.sela').change('ipsum');  // console...
});

Is it possible? 

$('.sela').on('change', function(){
    if($(this).val() == 'ipsum'){console.log('ipsum');}
});

$('button').on('click', function(){
    $('.sela').val('ipsum');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class='sela'>
<option>lorem</option>
<option>ipsum</option>
</select>

<button>CLICK</button>

jquery javascript
2 Answers

$('.sela').val('ipsum').change(); you need to trigger the change event after change the value.

$('.sela').on('change', function(){
    if($(this).val() == 'ipsum'){console.log('ipsum');}
});

$('button').on('click', function(){
    $('.sela').val('ipsum').change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class='sela'>
<option>lorem</option>
<option>ipsum</option>
</select>

<button>CLICK</button>

user_33858270

Change event is fired when the value is changed by users interaction on page and not when value is modified using code.

Here you need to use .change() or .trigger("change") after changing the value:

$('.sela').on('change', function(){
    if($(this).val() == 'ipsum'){console.log('ipsum');}
});

$('button').on('click', function(){
    $('.sela').val('ipsum').change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class='sela'>
<option>lorem</option>
<option>ipsum</option>
</select>

<button>CLICK</button>

user_17197520
Related