I have tried the rateit plugin but this does not seem to work correctly with the <option selected="selected">
UPDATE:
Updated the JSfiddle to the latest jquery and now I have the issue back where it is only displaying 4 stars when I have 5 options in the select?
I have been looking for a couple of hours now to find a rating plugin which:
Doesn't require extra HTML.
Displays the option text on hover of each each using the title attribute.
Only works with full star rating.
HTML
<select class="test" id="rating1" name="Rating">
<option value="1">Poor</option>
<option value="2">Fair</option>
<option value="3" selected="selected">Good</option>
<option value="4">Very Good</option>
<option value="5">Excellent</option>
</select>
You need to make the selectbox update the rating value. Add:
$('#rating1').change(function() {
$('div#rating2').rateit('value',$(this).val());
});
See example.
Edit:
RateIt requires jQuery 1.6.0+, which is why updating the jQuery version causes the selectbox to (properly) disappear. Have a look at this fiddle to see if it meets your needs. This will "progressively enhance" the selectbox so that users without JavaScript enabled will still be able to use the select, and those with JS enabled will get the nicer version.
If you want the backing field to be shown, you have to toggle it after the rateit() call. Also, to prevent the "reset" option from showing up, you need to set another data attribute and extend the select a bit:
Example.
Your jQuery version is old, you need 1.6 or newer.
Related
I have a problem which deals with selecting an option element. In the shop I maintain there is an old script which selects disabled option element this way:
$(this).find('....., .bundle-article select option:selected');
And that works. From some reason in a new theme, which has bootstrap 4 instead of bootstrap 3 and newer jquery, that .find() does not select the desired element. But if I do:
$(this).find('#some-id-of-that-option-tag');
pointing to the same element as the previous selector I get the result I need. But from some reasons, it is better not to change script I did not write.
I am not a JS developer and I need help or advice on how to solve this. Is there some change how jquery selects disabled elements in diff versions?
html:
<div class="bundle-article config-option">
<select name="grundbauteil-7-ankerplatte" id="select-grundbauteil-7-ankerplatte" class="form-control" >
<option id="product-2764" value="2764" selected="selected" disabled>
Any suggestion is welcome.
I have a page that loads with a dropdown in it with a select dropdown list with an id = "accounts". When the page loads it is already on the Account Orange page. I would like to use JQuery to find the select id element and then force it click on the 3 option which should be index 2.
<select id="accounts" onChange="changeAccount(this.form,this[this.selectedIndex].value)">
<OPTION value="">Select One...</OPTION>
<OPTION value="111">Account Red</OPTION>
<OPTION value="222">Account Yellow</OPTION>
<OPTION value="333">Account Blue</OPTION>
<OPTION value="444" selected>Account Orange</OPTION>
</select>
Something like this works:
jQuery('#accounts>option:eq(2)').prop('selected', true);
Currently when the page loads it does select the correct option despite the "selected" tag but it does not fire it to the OnChange function to select "Account Yellow" and then it would reload the page. That's what I would like it to do.
First, it's better to set the value of the SELECT by value instead of index. Because you might want to add extra OPTION's later (in your source code or dynamically) and then your index count is off.
Second, I find it better practice to change the value of the SELECT, instead of changing HTML attributes/properties which make it selected (e.g. not setting/changing the selected property of the OPTION, but changing the value of the SELECT). Otherwise, you might end up with more than one selected OPTION's which might work, but is not very clean coding.
Third, the suggested >option:eq(2) selector might not work if you're using OPTGROUP's, because then the OPTION is not a direct descendant of SELECT.
So, my suggestion is to use:
jQuery('#accounts').val('222').change();
It selects the right SELECT field, then sets the value to 333 and then fires the onchange event (you need to do that manually in this case).
$('#accounts>option:eq(2)').prop('selected', true).promise().then(function(){
changeAccount(this.form,this[this.selectedIndex].value)
});
Try the following:
jQuery('#accounts>option:eq(2)').prop('selected', true).closest('select').trigger('change');
I know this may be kind of a simple question, but cant seem to find an answer anywhere, I have a form in my site, with multiple form elements like combobox, text, radio buttons, checks etc, My requirement is to change the values of those form elements when a user from dropdown combobox is selected, I have successfully implemented that functionality with all the form elements except for the comboboxes, I cant seem to find any way to change the options of the combobox...
Since you included the jQuery tag,
select.val(value);
where select is the jQuery select element and value is the value.
JSFiddle
<select>
<option value="1">First option</option>
<option value="2">Second option</option>
<option value="3">Third option</option>
</select>
<script>
$('select').val('2');
</script>
New option can be added to the combobox as below
$('< option value=’Value’ > Sample Value < /option >').appendTo('#ComboId');
a dropdown value can be selected by
$('#ComboId').val('Value');
I can't find any solution to simple value change in select, code works corretly in Chrome and in IE but doesn't work in FF
<select id='testsel' name='test'>
<option value="">-- select something --</option>
<option value="1">selected</option>
</select>
and if I try
$('#testsel').val("1");
value is selected but not displayed (you can see if you expand select). What is strange
$('#testsel').val();
returns "" (first value)
Same problem if I try
$('#testsel > option[value="1"]').attr("selected", "selected");
but this time result is bit different
$('#testsel > option[value="1"]').attr("selected");
I see "selected" as a result, but on screen nothing.
Any idea?
Are you using some styling plugin for the select ?
Usually those plugins will replace the element, and altering the values through code will not reflect on the replaced element. (although i find it strange that it does work on other browsers)
For normal elements your example code should work (as verified in the comments).
What I need is a simple color picker (max 6-8 color) so the user can choose a color for an event that will be entered in a calendar.
I have tested several jQuery colopicker plugins and none have worked well in my project.
Either they are too complex (like Farbtastic) or are simple but don't run on the most recent version of jQuery.
So I decided to provide a good ol' dropdown menu with a list of colors
<select id="evt_color">
<option value="#3366CC">Blue</option>
<option value="#E070D6">Fuchsia</option>
<option value="#808080">Gray</option>
<option value="#4bb64f">Green</option>
<option value="#ed9d2b">Orange</option>
<option value="#FF9CB3">Pink</option>
<option value="#EA4A4A">Red</option>
</select>
This works well. But I would like to give the user some feedback on the color they choose, before submitting the form.
I wonder if somehow we could create a small square DIV next to the dropdown, and have its background-color change to the value of the selected color onChange, via something like getElementById or other method. By default, the first color would be selected (Blue).
Anyone have suggestions for this? jQuery or raw JS suggestions are welcome!
Thanks for helping!
$(document).ready(function() {
$("#evt_color").change(function() {
$("#someDiv").css("background-color", $(this).val());
}).change(); // trigger change event so div starts out with a colour
// on page load
});
You can try it here.