I am new to jQuery and found a couple of different approaches for this online but nothing worked for me so I hope someone can help me.
I have a number of Selects. Each of them has one option with a class "defaultSel" to indicate that this should be selected as the default when a certain event is triggered.
My approach was the following which does change the Selects value but I can't get it to actually trigger the change (neither adding .change() nor .trigger('change') worked for me here).
Also, if there is a way to avoid .each here at all please let me know as well.
My jQuery:
$(this).closest('div').nextAll('div.hiddenDiv').show().find('.defaultSel').each(function(){
$(this).prop('selected', true).change();
});
Many thanks in advance for any help,
Mike
If your option is the thing with the defaultSel class then this should work:
$(this).closest('div').nextAll('div.hiddenDiv').show().find('select:has(option.defaultSel)').each(function(){
$(this).find('option.defaultSel').prop('selected', true).end().change();
});
Just changing two things here:
find('select:has(option.defaultSel)')
will get the select set you're actually wanting, and
$(this).find('option.defaultSel').prop('selected', true).end().change();
this here is the select so you need to find the default option, then end() will return you to the select and you can trigger change() on it.
Related
I am trying to pick a default value from dropdown and disable it to user not change it with bellow code,
function brandPickerHn() {
$("#Search__32Page__32Layout__46dropdownlist5 option[value='Value2']").attr("selected", "selected");
$("#Search__32Page__32Layout__46dropdownlist5").attr("disabled", true);
}
Issue here is that, dropdown is mandatory and I can not move forward because even tough I used,
.attr("selected", "selected")
.prop("selected", true)
.click()
.change()
I can see the selected option in dropdown but like I didn't set it so still asking me to go and select any value from dropdown. If I not use code for disabling Dropdown there is no problem.
Can you please assist, where I am making mistake ? Please not tell me to see older posts as I already dig whole site but nothing working found, thats why asking it.
Thank you in advance.
You need to set the value of the select element directly, as this is where the value is stored:
function brandPickerHn() {
$("#Search__32Page__32Layout__46dropdownlist5").val('Value2');
$("#Search__32Page__32Layout__46dropdownlist5").attr("disabled", true);
}
Normally, when a user selects an item in a <select>, the 'change' event gets fired.
However, when you change the value of the same <select> with $('select').val('something'), the event doesn't get fired.
I know I could do:
$('select').val('something').trigger('change');
but that's not the problem I'm trying to solve...
Is there a way to get the change event working, without manually triggering it?
I put together a quick JsFiddle to better explain the problem, check it out:
http://jsfiddle.net/W723K/1/
Cheers
It's not possible, unless you manually trigger the change function. If you don't like typing that code several times, extend the jQuery object. Fiddle: http://jsfiddle.net/W723K/2/
(function($){
$.fn.changeVal = function(value){
return this.each(function(){
$(this).val(value).trigger('change');
});
}
})(jQuery);
//Usage:
$('select').changeVal('something');
I'm trying to use FancySelect.js to style the select boxes used on WooCommerce and have managed a few but I'm struggling with the Variation form on product pages.
While FancySelect triggers a change event on the original select box, it appears to affect nothing. Looking at the javascript used in the variations form, it looks like they've unbinded the change event on the select box and are handling it some other way, by triggering events on the .variations_form instead. I can't seem to get it to work though.
My code is something along the lines of:
$('.summary select').fancySelect().on('change.fs', function() {
$(this).trigger('change.$');
$('.variations_form').trigger('woocommerce_variation_select_change');
});
I've tried triggering multiple events but none seem to have any affect.
Any ideas?
Thanks.
So it turns out that the original trigger didn't work, for reasons I can't quite work out. However, manually triggering a change event on the original select box worked to some degree, but it wouldn't update fancySelect's "Trigger" element. I think this was because the original select's options didn't get a :selected attribute (for whatever reason). I've had to add a custom event to fancySelect to manually trigger it's updateText() method.
Updated code:
$('.summary .options li').on('click', function(){
$('.summary select').trigger('change').trigger('select.fs');
});
And the additional event for fancySelect (which I'll try contribute to if I get chance):
sel.on('select.fs', function(){
updateTriggerText();
});
Cheers.
I have this code setup in JS Fiddle so that everyone can see it. I have a piece of code that with the help of the JQuery UI library will make it into a JQuery Select.
$("select").selectbox();
but now my question is, how do i revert to the old select ?
the reason why i want to do this is people should be able to click on one of the radio buttons and it should filter the select by that gender (the class of each option has the gender) but this doesnt work when the select has already been converted
This shoud work:
$('select').selectbox('detach');
you could add a class to the the selected object instead of altering it completely, you can then always select it again quickly
I used a jquery combobox for autocompletion and I needed to clean its value.
I got into a solution which is like this: http://jsfiddle.net/BbWza/30/
The problem is that the code below clears all textboxes of all combos in the screen. I'd like to clear only ONE combo (let's say the first one, for example).
$('.ui-autocomplete-input').focus().val('');
Although there is only one clear link button, it doesn't matter which combo will be cleared as long as only one is.
The solution should work for N combos in the screen. E.g. Each button should empty its corresponding combo.
You can add ids to the generated fields by adding this line as the last line of _create():
input.attr( 'id', $(select).attr( 'id' )+'-input' );
Now you can select individual fields with the ids:
$('#combobox-input').focus().val('');
To clear just only one combo you must select it with it's id:
$('#combobox').focus().val('');
$('#combobox').autocomplete('close');
with your code you are selecting all comboboxes because you are using a class selector.
EDIT if you want to make two buttons (one for each combobox) you could do:
$('.clicky').click(function() {
var combo= $(this).prevAll('input:first');
combo.focus().val('');
combo.autocomplete('close');
return false;
});
fiddle here: http://jsfiddle.net/BbWza/39/
Your jsfiddle is a little ambiguous as to which combo box should be cleared - there are two combo boxes but only one clear link, so it's not obvious if the link is supposed to clear just one or both combo boxes.
I suspect in the real world that each combo box would have it's own clear link. Selecting the right text box for your clear link all depends on your html. One simple case would be where the clear link is the next sibling to your <select> element:
<select class="combo">
...
</select>
Clear
Then you could create the combos in one call by using class. Then create the clear click handlers all at once. The handler would use .prevAll(".ui-autocomplete-input") to find its associated textbox.
$("select.combo").combobox();
$("a.clearCombo").click(function () {
$(this).prevAll('.ui-autocomplete-input').first()
.focus()
.val('')
.autocomplete('close');
return false;
});
Working demo at jsfiddle
If your link is not a sibling of your combo box, that's ok. Either find its parent that is a sibling and use the above approach. Or, if that won't work, find the common parent of both the combo and the link. This only works if the common parent contains only one combo and one link:
<span class="comboContainer">
<span>
<select class="combo">
...
</select>
</span>
Clear
</span>
You use .closest(".comboContainer") and .find(".ui-autocomplete-input"):
$("select.combo").combobox();
$("a.clearCombo").click(function () {
$(this).closest(".comboContainer").find('.ui-autocomplete-input')
.focus()
.val('')
.autocomplete('close');
return false;
});
Working demo at jsfiddle
The nice thing about these techniques is that the link doesn't need to know the id of its associated combobox. We can just infer it from the html. This makes it very easy to move combos around and add new ones.
Two suggestions:
Add a clear method to your plugin. Your widget users shouldn't have to know its internal workings. In your example, you have to know that widget uses .autocomplete(). This also prevents you from changing your implementation later. Adding a "clear" method would simplify your click handler to just $(this).prevAll("select.combo").combobox("clear").
Give your widget the option to create the clear button itself. Users can always disable it and add their own clear button if they want.
Well, in the example the following would only clear the last combobox:
$('.ui-autocomplete-input').last().focus().val('');
This would clear the first one:
$('.ui-autocomplete-input').first().focus().val('');
You can clear it in event "close" of the autocomplete
$("#your-input").autocomplete({
source: items,
close: function (event, ui) {
$(this).val("");
}
});
How to give clear button for autocombobox please tell me
You can add ids to the generated fields by adding this line as the last line of _create():
input.attr( 'id', $(select).attr( 'id' )+'-input' );
Now you can select individual fields with the ids:
$('#combobox-input').focus().val('');