I'm trying to autoselect a product sort filter with jQuery, but I'm having a bit of trouble getting it to work properly.
<select class="selectProductSort" id="selectPrductSort1" onchange="">
<option selected="selected" value="position:asc">Sorter efter</option>
<option value="price:asc">Pris: laveste først</option>
<option value="price:desc">Pris: højeste først</option>
<option value="name:asc">Varenavn: A til Å</option>
<option value="name:desc">Varenavn: Å til A</option>
<option value="quantity:desc">Lagervarer først</option>
<option value="reference:asc">Reference: Laveste først</option>
<option value="reference:desc">Reference: Højeste først</option>
</select>
I've tried the following so far, but no luck.
$('.selectProductSort option[value="price:asc"]').prop('selected', 'selected').change();
$('.selectProductSort option[value="price:asc"]').trigger( 'click' );
$('.selectProductSort option[value="price:asc"]').click();
I tried with $(document).ready and without.
The first example sets thedesired filter as selected, but the filter function isn't activated, so the products still are ín the same order.
When a filter is selected, the page doesn't reload.
Hope you guys can help me out
https://jsfiddle.net/azc66a0b/
Try this : set value of select and then call click() as shown below. But make sure that your click handler must be registered before calling click.
$('.selectProductSort').val("price:asc").click();
Check below jsfiddle demos before / after calling click
JSFIddle with Click handler registered before calling click
JSFIddle with Click handler registered after calling click
$('#selectPrductSort1').val("name:asc"); // Select by value
text1 = "Reference: Laveste først";
$("#selectPrductSort1 option:contains(" + text1 + ")").attr('selected', 'selected'); // select by text
Related
I tried googling this but I am getting only on event trigger searches instead of what I am looking for.
I want to dynamically click on any of the options in the select dropdown by using the value or the text if possible.
HTML
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
I am not sure if I need to use something with $("#certainspamselectid").click..... but I am not sure what to use after click. I would have tried more things but my google searches keep pinpointing me for on event triggers when I just want to click on one of these options using either JS or jQuery.
I have read your problem and honestly, I can't understand what you want exactly.
However, it looks like you want to select some certain option of the select dropdown.
If that's right, you don't need to call some kind of click function.
You can do it easily with jQuery.
For example, imagine that you are going to select third option - "moved to junk email folder". Then you can select it by code like below.
$("#certainspamselectid").val(1);
If my answer is not enough for you, let me know detail of your problem.
With <select> what you need is .change instead of .click
Here is a quick example .. change the $value and check again
$("#certainspamselectid").on('change' , function(){
console.log("Value Changed To: "+$(this).val());
if($(this).val() == 5){
console.log("value 5 is selected");
}
});
let $value = 4;
$("#certainspamselectid").val($value).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
why don't you simply change the value of the select like this
$("#certainspamselectid").val(4)
It will automatically show the text from the selected option
I don't think that clicking on an option would help you
with on click event i returned the below drop down element as ajax json response, without page refresh:
<select class='custom-select col-md-4' id='family'>
<option value''> Select family</option>
<option value='1'>familyName</option>
</select>
then I want to execute a function when changed the option using:
$('#family').on('change', function(){
alert("Yeey");
});
but doesn't seem to be working.
Your code seems to be working.
Just add one more option in select
For now, you have only one option which is by default selected so no change event applied.
your script is good.
example:
<select class='custom-select col-md-4' id='family'>
<option value=''>select family</option>
<option value='1'>familyName</option>
</select>
Needs more than 1 option.
By default, the first option is selected.
So there's no on change event triggering.
In my google chrome extension options.html, I use a chained select to get a value which I store in chrome.storage, which works great.
Now when I reopen my options.html I want to get the values out of my chrome.storage and set the chained select again to those values. My code works for setting the first select, but the 2nd one stays empty. How can I set both select to the chrome.storage values?
Here is a fiddle example of my problem: http://jsfiddle.net/timw1984/2hxzem1e/2/
As you can see the first select changes on button click but the 2nd one doesn't.
options.html:
<select id="choose-channel" name="accounts">
<option value="MLB">MLB</option>
<option value="NFL">NFL</option>
<option value="2">NBA</option>
</select>
<select id="choose-channel-2" name="searches">
<option class="MLB" value="Orioles">Orioles</option>
<option class="MLB" value="RedSox">Red Sox</option>
<option class="MLB" value="Yankees">Yankees</option>
<option class="NFL" value="49ers">49ers</option>
<option class="NFL" value="Bears">Bears</option>
<option class="NFL" value="Bengals">Bengals</option>
</select>
options.js:
var team, sport ;
$("select").addClass("ui-selectmenu-button ui-widget ui-state-default ui-corner-all");
$("#choose-channel-2").chained("#choose-channel");
chrome.storage.sync.get({
sport1:"MLB",
favoriteTeam: 'RedSox'
}, function(items) {
document.getElementById('choose-channel').value = items.sport1;
document.getElementById('choose-channel-2').value = items.favoriteTeam;
});
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
save_options);
Thanks!
Tim
Just setting the value through .val()/.value often does not trigger the same kind of processing as interacting with the input element does.
You should trigger an event that indicates that the value has changed:
$('#choose-channel').val(items.sport1).change(); // or .trigger("change")
$('#choose-channel-2').val(items.favoriteTeam).change();
Your JSFiddle, patched.
I have a multiselect dropdown menu where each option has a checkbox and more than one option can be selected at once. I'm using a jQuery multiSelect plugin generate the dropdown.
<select id="types" multiple="multiple" size="5">
<option value="">Show All</option>
#{
<option value="Gains">Gains</option>
<option value="Losses">Losses</option>
<option value="Adjustments">Adjustments</option>
<option value="Future">Future</option>
<option value="Deliveries">Deliveries</option>
<option value="Recoveries">Recoveries</option>
<option value="Full Payout">Full Payout</option>
<option value="Early Payout">Early Payout</option>
<option value="Charge Offs">Charge Offs</option>
<option value="Returns">Returns</option>
<option value="Transfers">Transfers</option>
<option value="Ins. Write-offs">Ins. Write-offs</option>
}
</select>
What I need to be able to do is separate the options into 2 sections. The first 4 in a section and the last 8 in a section. If an option is selected in one section, then any options that are selected in the other section are then unselected. This is already setup in a C# .NET application. I am having to replicate the functionality. I don't have access to the .NET code. At first I thought maybe I could put the different options into separate divs and just check whether an option was selected in each div but I get validation errors when I try to do that. I'm not really sure what else I could try. Any help with this would be great. Thanks.
try using classes, attach a jquery check box click(), check for class if ( $(this).hasClass("checkboxSection1") ) then uncheck all the other ones like so $(".checkboxSection2").prop('checked', false);
so some simple code is
$("myForm :checkbox").click( function(){
$(this).hasClass("checkboxSection1")?
$(".checkboxSection2").prop('checked', false):
$(".checkboxSection1").prop('checked', false);
});
How about giving them a set of classes e.g. 'option1' & 'option2', then you can do a little javascript/jquery to handle the logic of the selection process...
I've got a grid with dropdown in every row and I need to render it's state from DB.
So I've got dropdowns defined like that with selected option specified for preselecting the value from DB.
<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>
The problem is in that when I change the value of a dropdown defined like that in a browser it changes on UI but selected attribute don't move and stays where it was.
So when I then call $("#selectId").val() I get the old one value.
What's the appropriate way to initialize dropdown control and then have an ability to freely change it's value in browser or by jQuery?
This seems to be working fine (Firefox on Ubuntu):
HTML
<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>
JS
$('#selectId').change(function() {
var opt = $(this).find('option:selected');
console.log([opt.val(), opt.text()]);
});
var opt_sel = $('#selectId option:selected');
opt_sel.val(99);
opt_sel.text('Changed option');
If you select the options, you'll see that it will print the changed version. Working example:
http://jsfiddle.net/vm4Q8/
Hope this helps.
It should work fine. May be you are not setting it correctly.
You should pass the value of the option to val() method to select it.
E.g $('#selectId').val('1'); will set first option as selected and afterwards calling $('#selectId').val() will give you 1 and not 2.
Here is the working example http://jsfiddle.net/3eu85/
You can get the val of the option selected, instead of the select
$('select#selectId option:selected').val();
Docs: http://api.jquery.com/val/
Which browser are you trying this in? Your code looks fine to me, and appears to be working in this jsFiddle.
please use this code instead,
$('#selectId option:selected').val();