jQuery - On button click trigger select option

Question

Guys i want to ask how can i make a function in jQuery when i click a button to trigger a select of an option in a select menu.

Here is my HTML code:

<select id="target_menu" name="sort_by">
    <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
    <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
    <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
    <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
    <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
</select>

The option which i want to be triggered as selected is created_at.

Here is the code of the button that i want when it is clicked to select option with id created_at of select menu with id target_menu:

<button onclick="triggerChange()" class="FirstFilter">
    Click me!
</button>

When i click on the button -> Click Me! i want jQuery to force/trigger a selection of option with id created_at at select menu with id target_menu.

How my function triggerChange() must look like ?

So guys, how can i make it?

stackoverflow.com/questions/4680075/…

errand
– errand

2015-03-23 14:38:41 +00:00
Commented Mar 23, 2015 at 14:38 — errand
– errand, Commented Mar 23, 2015 at 14:38

PHP Worm... · Accepted Answer · 2015-03-24 06:36:36Z

3

Try this function:

 function triggerChange(){
        $("#target_menu").val($("#target_menu #created_at" ).val());
        $('#target_menu').trigger('change');
   }

edited Mar 24, 2015 at 6:36

answered Mar 23, 2015 at 14:38

PHP Worm...

4,2341 gold badge28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Venelin Over a year ago

Okey but does it change and select the option with id created_at ?

PHP Worm... Over a year ago

I have updated the ans. according to your requirements

Cosmin Over a year ago

What you wrote works only when you manually change the select element and no matter what a user will choose it will select option with 'created_at' id. He wanted to set 'created_at' as a selected option on button click. How your answer helps him ?

lshettyl · Accepted Answer · 2015-03-23 15:05:07Z

There are few ways of doing it. One is below. A piece of advise is that do not use inline event handlers!

$("button").on("click", function() {
    $("#target_menu option").filter(function(opt, el) {
        return el.id === 'created_at' && $(el)
    }).prop("selected", true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="target_menu" name="sort_by">
    <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
    <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
    <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
    <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
    <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
</select>

<button class="FirstFilter">
    Click me!
</button>

PrakashG · Accepted Answer · 2018-11-14 07:33:37Z

function triggerChange()
{
  $("#target_menu").val($("#created_at").val());
}

<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
<select id="target_menu" name="sort_by">
    <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
    <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
    <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
    <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
    <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
</select>

<button onclick="triggerChange()" class="FirstFilter">
    Click me!
</button>

Here is an answer to your question.

function triggerChange()
{
  $("#target_menu").val("created_at");
}

I'm Geeker · Accepted Answer · 2015-03-23 14:59:30Z

0

Use this

function triggerChange(){    
$("#target_menu").eq(4).prop("selected","selected");     
}

answered Mar 23, 2015 at 14:59

I'm Geeker

4,6575 gold badges25 silver badges42 bronze badges

Comments

jrod · Accepted Answer · 2015-03-23 16:56:53Z

0

as you have an id applied to each option you can target that id then use the .prop() method.

$(document).ready(function(){
 $(".firstFilter").click(function(){
    var id = $("#created_at").prop("selected","selected");   
 });
});

edited Mar 23, 2015 at 16:56

answered Mar 23, 2015 at 14:50

jrod

661 silver badge6 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:54:22Z

-1

I made this fiddle for you

Fiddle

First step is to get value from element with id created_at:

var wantedValue= $('#created_at').attr('value');

And next, you need to set selected value for your select element:

$('#target_menu').val(wantedValue).trigger('change');  // need to call .trigger('change') here
// you can also call .trigger() - without 'change' keyword

Explanation about why you need to trigger .change HERE

For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

Update ( thanks LShetty )

$('.FirstFilter').click(function(){
       $("#position").removeAttr("selected");
       $("#created_at").attr('selected','selected');
    });

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Mar 23, 2015 at 14:44

Cosmin

2,2141 gold badge23 silver badges39 bronze badges

4 Comments

lshettyl Over a year ago

Why trigger change when there is no capture?

Cosmin Over a year ago

Before giving -1 search : stackoverflow.com/questions/4672505/…

lshettyl Over a year ago

Well, I didn't give -1 by the way! You're consfusing change to setting a selected value. What OP wants is to set the selected value by clicking on a button! So, change is irrelevant here and change is not even bound to the select

Cosmin Over a year ago

Oh! Right! :) .. I understand what you're trying to say. My mind exploded when I read his question :))

Collectives™ on Stack Overflow

jQuery - On button click trigger select option

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related