I have tried many ways to select an option with jquery including .val("0") .attr('selected', 'selected') and .attr('selected', 'true') and the TexoTela plugin. They all seem to update the html but the browser still shows the last item selected by the user.
Try out this fiddle... Select the dropdown value 1 and then click the link.
Is there any way to actually update the displayed value?
You mean change which item is selected?
$('select').val('0');
There are other ways, but this is the basic, following your example.
jsfiddle
You can read up on the documenation for .val() here, and the snippet:
checks, or selects, all the radio
buttons, checkboxes, and select
options that match the set of values.
EDIT for jQuery Mobile
For jQuery Mobile you also need to refresh the select as mentioned in the mobile docs:
If you manipulate a select via
JavaScript, you must call the refresh
method on it to update the visual
styling.
You can do this by:
$('select').selectmenu("refresh",true);
You're setting the option value to zero.
Set the select not the option val
$('select').val('0');
and you'll probably want to use an #id instead just a 'select' selector.
Still use your .val("0") to set the value, and to update in the browser you have to use one of the following:
.trigger("liszt:updated");
or
.trigger("chosen:updated");
Just one will work, depending on how you create your select.
It's gonna be like:
$("#Your_select").val('0');
$("#Your_select").trigger("liszt:updated");
Related
In a select tag with multiple attribute.
When I was using old multi-select JQuery plugin, I find out that I can't select previously deselected options. Actually, I can see that they are selected in UI that created with that plugin, but they were not selected when I submit the form.
Then, I tried to remove selection and select it again from the console without any JQuery plugin.
After deselecting the selection by removing attribute selected from option:
document.getElementById('option_1').removeAttribute('selected');
I was able to select that option again without any problem using JS code:
document.getElementById('option_1').setAttribute('selected', '');
But, when I tried to remove the selected attribute with JQuery removeAttr or prop:
$("#option_1").removeAttr('selected');
$("#option_1").prop('selected',false);
It removes the selection, but I can't select that same option again. Tried both JQuery and JS:
$("#option_1").attr('selected','selected');
document.getElementById('option_1').setAttribute('selected', '');
Again, I can't select the same option with code when I manually deselect option with ctrl+(right-click to selected option)
1. Why it happens?
2. I really liked that plugin and tried to change JQuery code .removeAttr('selected'); to JS code .removeAttribute('selected');. But I got an error. How can I fix that?
How to reset selected value in yii2 widget select2 using jQuery or JavaScript? I've tried to use $("#select2id").val("").trigger("change"); and it show the placeholder, but the first item is always automatically selected.
EDIT: I'm using this widget for make dependency dropdown. the widget that the first item always automatically selected is the dependent widget.
You should do it the select2 way:
$("#select2id").select2("val", "", true);
With the first two parameters you assign an empty string as a value and the last one is for triggering the change.
I've solved the problem. That code is actually working. The order of the code that make the problem. So, be sure to check the code order.
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 am building a search tool with various select drop downs that populate with options via AJAX. The possible options populated are based on the the option chosen in the preceding select drop down. For the purpose of this tool, I want to have the first select box hidden but still need to select an option in that box so that it triggers the AJAX call on the following box, something that is supposed to happen as the result of an "onchange" event.
I've tried all kinds of different code to simulate a mouse click selection of a particular option but, while I can get the option selected, it still isn't triggering the event properly to set off the AJAX call in the following select. This is as far as I've gotten:
jQuery('#form select').first().val('the-value').trigger('click').trigger('change');
From everything I've read, that should set the option value and trigger a change event much like clicking the option. Still, this isn't working. Thanks!
You only have to use val(), like any other field...
$("select").val("2").change();
http://jsfiddle.net/Loenix34/3LbjY/
We also use change() to call associated events.
Instead of setting the value of the select, set the selected property of the given option, and then trigger a change.
$("option[value='the-value']").prop('selected', true);
$("#form select:first").change();
Fiddle Demo
I have an HTML select element (combo box) in a form with a couple if options in it. As always each option has a specific value. During the page's initialization I get a value from the server that I must use as the selected option in the list. Sometimes however I get a value from the server that does not match any of the available options. (grrrr)
I want to let the user know that the value I got from the server is not a valid option. What I'd like to do is show an empty select box (as if no selection was made) without having an actual empty option as one of the options. Also I'd like to use the default select element if possible. Is something like this possible?
Edit: When you set the value for a combox to '' in IE9 (I used $('select').val('') ) it empties the text in the combo box which is exactly what I need. Unfortunately only IE9 does this, so this is not an option.
Out of the box, HTML selects do not provide such functionality. You will have to add an empty <option value="somethingwrong">Please, pick a value</option> element and use scripting to check if the user has selected this specific value. I'd suggest catching both onchange event of the dropdown and onsubmit event of whole form.
You can insert option in select, and remove that whenever it is changed to reduce problems with that options
Check the Demo here