jQuery - On button click trigger select option
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&id=35&max=424&min=0&order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&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?
javascript jquery html
add a comment |
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&id=35&max=424&min=0&order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&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?
javascript jquery html
stackoverflow.com/questions/4680075/…
– errand
Mar 23 '15 at 14:38
add a comment |
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&id=35&max=424&min=0&order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&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?
javascript jquery html
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&id=35&max=424&min=0&order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&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?
javascript jquery html
javascript jquery html
asked Mar 23 '15 at 14:30
Venelin VasilevVenelin Vasilev
94832549
94832549
stackoverflow.com/questions/4680075/…
– errand
Mar 23 '15 at 14:38
add a comment |
stackoverflow.com/questions/4680075/…
– errand
Mar 23 '15 at 14:38
stackoverflow.com/questions/4680075/…
– errand
Mar 23 '15 at 14:38
stackoverflow.com/questions/4680075/…
– errand
Mar 23 '15 at 14:38
add a comment |
6 Answers
6
active
oldest
votes
Try this function:
function triggerChange(){
$("#target_menu").val($("#target_menu #created_at" ).val());
$('#target_menu').trigger('change');
}
Okey but does it change and select the option with idcreated_at
?
– Venelin Vasilev
Mar 23 '15 at 14:41
I have updated the ans. according to your requirements
– PHP Worm...
Mar 23 '15 at 14:48
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 ?
– Cosmin
Mar 23 '15 at 15:09
Thanks @Kosmo I have modified the Answer. :)
– PHP Worm...
Mar 24 '15 at 6:37
add a comment |
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&id=35&max=424&min=0&order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&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");
}
add a comment |
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&id=35&max=424&min=0&order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=created_at">Дата</option>
</select>
<button class="FirstFilter">
Click me!
</button>
add a comment |
Use this
function triggerChange(){
$("#target_menu").eq(4).prop("selected","selected");
}
add a comment |
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");
});
});
add a comment |
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');
});
Why triggerchange
when there is no capture?
– lshettyl
Mar 23 '15 at 15:02
Before giving -1 search : stackoverflow.com/questions/4672505/…
– Cosmin
Mar 23 '15 at 15:06
1
Well, I didn't give -1 by the way! You're consfusingchange
to setting a selected value. What OP wants is to set the selected value by clicking on a button! So,change
is irrelevant here andchange
is not even bound to theselect
– lshettyl
Mar 23 '15 at 15:12
Oh! Right! :) .. I understand what you're trying to say. My mind exploded when I read his question :))
– Cosmin
Mar 23 '15 at 15:19
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f29212870%2fjquery-on-button-click-trigger-select-option%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
6 Answers
6
active
oldest
votes
6 Answers
6
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try this function:
function triggerChange(){
$("#target_menu").val($("#target_menu #created_at" ).val());
$('#target_menu').trigger('change');
}
Okey but does it change and select the option with idcreated_at
?
– Venelin Vasilev
Mar 23 '15 at 14:41
I have updated the ans. according to your requirements
– PHP Worm...
Mar 23 '15 at 14:48
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 ?
– Cosmin
Mar 23 '15 at 15:09
Thanks @Kosmo I have modified the Answer. :)
– PHP Worm...
Mar 24 '15 at 6:37
add a comment |
Try this function:
function triggerChange(){
$("#target_menu").val($("#target_menu #created_at" ).val());
$('#target_menu').trigger('change');
}
Okey but does it change and select the option with idcreated_at
?
– Venelin Vasilev
Mar 23 '15 at 14:41
I have updated the ans. according to your requirements
– PHP Worm...
Mar 23 '15 at 14:48
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 ?
– Cosmin
Mar 23 '15 at 15:09
Thanks @Kosmo I have modified the Answer. :)
– PHP Worm...
Mar 24 '15 at 6:37
add a comment |
Try this function:
function triggerChange(){
$("#target_menu").val($("#target_menu #created_at" ).val());
$('#target_menu').trigger('change');
}
Try this function:
function triggerChange(){
$("#target_menu").val($("#target_menu #created_at" ).val());
$('#target_menu').trigger('change');
}
edited Mar 24 '15 at 6:36
answered Mar 23 '15 at 14:38
PHP Worm...PHP Worm...
3,30811238
3,30811238
Okey but does it change and select the option with idcreated_at
?
– Venelin Vasilev
Mar 23 '15 at 14:41
I have updated the ans. according to your requirements
– PHP Worm...
Mar 23 '15 at 14:48
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 ?
– Cosmin
Mar 23 '15 at 15:09
Thanks @Kosmo I have modified the Answer. :)
– PHP Worm...
Mar 24 '15 at 6:37
add a comment |
Okey but does it change and select the option with idcreated_at
?
– Venelin Vasilev
Mar 23 '15 at 14:41
I have updated the ans. according to your requirements
– PHP Worm...
Mar 23 '15 at 14:48
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 ?
– Cosmin
Mar 23 '15 at 15:09
Thanks @Kosmo I have modified the Answer. :)
– PHP Worm...
Mar 24 '15 at 6:37
Okey but does it change and select the option with id
created_at
?– Venelin Vasilev
Mar 23 '15 at 14:41
Okey but does it change and select the option with id
created_at
?– Venelin Vasilev
Mar 23 '15 at 14:41
I have updated the ans. according to your requirements
– PHP Worm...
Mar 23 '15 at 14:48
I have updated the ans. according to your requirements
– PHP Worm...
Mar 23 '15 at 14:48
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 ?
– Cosmin
Mar 23 '15 at 15:09
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 ?
– Cosmin
Mar 23 '15 at 15:09
Thanks @Kosmo I have modified the Answer. :)
– PHP Worm...
Mar 24 '15 at 6:37
Thanks @Kosmo I have modified the Answer. :)
– PHP Worm...
Mar 24 '15 at 6:37
add a comment |
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&id=35&max=424&min=0&order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&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");
}
add a comment |
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&id=35&max=424&min=0&order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&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");
}
add a comment |
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&id=35&max=424&min=0&order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&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");
}
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&id=35&max=424&min=0&order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&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");
}
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&id=35&max=424&min=0&order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=created_at">Дата</option>
</select>
<button onclick="triggerChange()" class="FirstFilter">
Click me!
</button>
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&id=35&max=424&min=0&order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=created_at">Дата</option>
</select>
<button onclick="triggerChange()" class="FirstFilter">
Click me!
</button>
edited Nov 14 '18 at 7:33
PrakashG
615719
615719
answered Nov 14 '18 at 7:16
Rahul RahatalRahul Rahatal
758
758
add a comment |
add a comment |
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&id=35&max=424&min=0&order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=created_at">Дата</option>
</select>
<button class="FirstFilter">
Click me!
</button>
add a comment |
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&id=35&max=424&min=0&order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=created_at">Дата</option>
</select>
<button class="FirstFilter">
Click me!
</button>
add a comment |
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&id=35&max=424&min=0&order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=created_at">Дата</option>
</select>
<button class="FirstFilter">
Click me!
</button>
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&id=35&max=424&min=0&order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=created_at">Дата</option>
</select>
<button class="FirstFilter">
Click me!
</button>
$("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&id=35&max=424&min=0&order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=created_at">Дата</option>
</select>
<button class="FirstFilter">
Click me!
</button>
$("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&id=35&max=424&min=0&order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=created_at">Дата</option>
</select>
<button class="FirstFilter">
Click me!
</button>
edited Mar 23 '15 at 15:05
answered Mar 23 '15 at 15:00
lshettyllshettyl
6,82441528
6,82441528
add a comment |
add a comment |
Use this
function triggerChange(){
$("#target_menu").eq(4).prop("selected","selected");
}
add a comment |
Use this
function triggerChange(){
$("#target_menu").eq(4).prop("selected","selected");
}
add a comment |
Use this
function triggerChange(){
$("#target_menu").eq(4).prop("selected","selected");
}
Use this
function triggerChange(){
$("#target_menu").eq(4).prop("selected","selected");
}
answered Mar 23 '15 at 14:59
I'm GeekerI'm Geeker
4,04251738
4,04251738
add a comment |
add a comment |
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");
});
});
add a comment |
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");
});
});
add a comment |
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");
});
});
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 '15 at 16:56
answered Mar 23 '15 at 14:50
jrodjrod
6615
6615
add a comment |
add a comment |
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');
});
Why triggerchange
when there is no capture?
– lshettyl
Mar 23 '15 at 15:02
Before giving -1 search : stackoverflow.com/questions/4672505/…
– Cosmin
Mar 23 '15 at 15:06
1
Well, I didn't give -1 by the way! You're consfusingchange
to setting a selected value. What OP wants is to set the selected value by clicking on a button! So,change
is irrelevant here andchange
is not even bound to theselect
– lshettyl
Mar 23 '15 at 15:12
Oh! Right! :) .. I understand what you're trying to say. My mind exploded when I read his question :))
– Cosmin
Mar 23 '15 at 15:19
add a comment |
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');
});
Why triggerchange
when there is no capture?
– lshettyl
Mar 23 '15 at 15:02
Before giving -1 search : stackoverflow.com/questions/4672505/…
– Cosmin
Mar 23 '15 at 15:06
1
Well, I didn't give -1 by the way! You're consfusingchange
to setting a selected value. What OP wants is to set the selected value by clicking on a button! So,change
is irrelevant here andchange
is not even bound to theselect
– lshettyl
Mar 23 '15 at 15:12
Oh! Right! :) .. I understand what you're trying to say. My mind exploded when I read his question :))
– Cosmin
Mar 23 '15 at 15:19
add a comment |
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');
});
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 '17 at 11:54
Community♦
11
11
answered Mar 23 '15 at 14:44
CosminCosmin
1,7911535
1,7911535
Why triggerchange
when there is no capture?
– lshettyl
Mar 23 '15 at 15:02
Before giving -1 search : stackoverflow.com/questions/4672505/…
– Cosmin
Mar 23 '15 at 15:06
1
Well, I didn't give -1 by the way! You're consfusingchange
to setting a selected value. What OP wants is to set the selected value by clicking on a button! So,change
is irrelevant here andchange
is not even bound to theselect
– lshettyl
Mar 23 '15 at 15:12
Oh! Right! :) .. I understand what you're trying to say. My mind exploded when I read his question :))
– Cosmin
Mar 23 '15 at 15:19
add a comment |
Why triggerchange
when there is no capture?
– lshettyl
Mar 23 '15 at 15:02
Before giving -1 search : stackoverflow.com/questions/4672505/…
– Cosmin
Mar 23 '15 at 15:06
1
Well, I didn't give -1 by the way! You're consfusingchange
to setting a selected value. What OP wants is to set the selected value by clicking on a button! So,change
is irrelevant here andchange
is not even bound to theselect
– lshettyl
Mar 23 '15 at 15:12
Oh! Right! :) .. I understand what you're trying to say. My mind exploded when I read his question :))
– Cosmin
Mar 23 '15 at 15:19
Why trigger
change
when there is no capture?– lshettyl
Mar 23 '15 at 15:02
Why trigger
change
when there is no capture?– lshettyl
Mar 23 '15 at 15:02
Before giving -1 search : stackoverflow.com/questions/4672505/…
– Cosmin
Mar 23 '15 at 15:06
Before giving -1 search : stackoverflow.com/questions/4672505/…
– Cosmin
Mar 23 '15 at 15:06
1
1
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
– lshettyl
Mar 23 '15 at 15:12
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
– lshettyl
Mar 23 '15 at 15:12
Oh! Right! :) .. I understand what you're trying to say. My mind exploded when I read his question :))
– Cosmin
Mar 23 '15 at 15:19
Oh! Right! :) .. I understand what you're trying to say. My mind exploded when I read his question :))
– Cosmin
Mar 23 '15 at 15:19
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f29212870%2fjquery-on-button-click-trigger-select-option%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
stackoverflow.com/questions/4680075/…
– errand
Mar 23 '15 at 14:38