CODEWITHSUNDEEP
javascriptjquery
vogel22
vogel22

Reputation: 15

jQuery changes select value but doesn't trigger page refresh

I created radio buttons on mobile that need to trigger the hidden select option in order for the page to refresh. I have this code and it does change the select value on radio button click, but it doesn't refresh the page. When I click on it with my mouse the page refreshes with the selected option, but not when I do it just with jQuery. What can I do about it?

Radio buttons:

<div class="m-box">
<input type="radio" class="sort-radio" name="r" value="featured">
<label>Featured Items</label>
<input type="radio" class="sort-radio" name="r" value="newest">
<label>Newest Items</label>
<input type="radio" class="sort-radio" name="r" value="bestselling"><label>Best 
Selling</label>
</div>

Select:

<select class="form-select form-select--small " name="sort" id="sort" role="listbox">
    <option value="featured" selected="">Featured Items</option>
    <option value="newest">Newest Items</option>
    <option value="bestselling">Best Selling</option>
</select>

Code:

$(".sort-radio").change(function () {                
$("#sort")
        .val($(this).val())
        .trigger('change');
});

I tried trigger('change') and change()...it does change the select option value, but how can I "fake" a mouse click in order for the whole page to refresh?

Upvotes: 0

Views: 1031

Answers (1)

Markus Lima
Markus Lima

Reputation: 147

$(".sort-radio").change(function() {

$("#sort").val($(this).val()).trigger('click');

});

Upvotes: 1

Related Questions