i am using a simple piece of jquery to clear the contents of the select in a form, but in iE all versions, the select is not clearing. it is ok in FF, just not doing it in IE. can anyone see where i have gone wrong with this? i have posted the relevant part of the code. thanks
UPDATE:
what i am trying to achieve is when a form is submitted the inputs are cleared and the select/option returns to it default state like when the page was loaded.
Answer if it will help anyone else: $("select").prop('selectedIndex', 0);
/*Show submitted*/
//$(".done").show(500).slideUp(300).delay(800).fadeIn(400);
$(".done").html("<div id=\"boxSuccess\">Message sent successfully!</div><br />");
/*Clear input values*/
$("input").val("");
/*Clear slelect values*/
$("select").val("");
$(".done").fadeIn(4000).fadeOut(4000);
A single-selection <select> element can't really be "cleared"; some <option> in it must be showing. What you could do to make sure that (for example) the first option is showing is
$('select').get(0).selectedIndex = 0; // or $('select').prop('selectedIndex', 0);
edit — a look at the jQuery (1.5.2) source tells me that when the searched-for value can't be found as the value (or, if no "value" attribute, the text) of an option, then it sets the "selectedIndex" to -1. A quick jsfiddle should show what effect that has in IE.
edit again — a quick test suggests that IE doesn't pay attention to the "selectedIndex" being set to -1.
more Here is a relevant jQuery bug report. Personally I don't think it's really a bug in the case of a single-select dropdown. For a multi-select I could see an argument, though it's always possible to do:
$('select option').prop('selected', false);
to de-select everything in a multi-select. Doesn't work for a single-selection element however because, again, that doesn't really make sense. The element will always cause the value of one of its options to be submitted with the form, so it really can't be "cleared" unless one of the options has an empty value.
even more — If one of your options has the "defaultSelected" attribute (or property), then you could make it be the selected option with:
$('select option').each(function() {
this.selected = this.defaultSelected;
});
Because you are setting the value on a collection of objects i think.
I'd do it this way:
$("select").add("input").each(function(){
$(this).val("");
});
instead of
/*Clear input values*/
$("input").val("");
/*Clear slelect values*/
$("select").val("");
This is valid (obviously) only if you have an option with value='' and this is what you want to reset the select to. Like
<option value=''>Select a value</option>
$("select").val(""); should merely set as selected whichever item has "" as its value. If you want to actually remove the items, you want something like $("select option").remove();
Related
I have a dropdownlist with list of some values from database.
<asp:DropDownList Runat="server" ID="cmbSalut" data-bind="value: drSalut"></asp:DropDownList>
Depending on what kind of record are opened, I am selecting its proper value in dropdown, and in case if there are nothing, I am selecting default value.
I use this to select default value:
$('select[Id="cmbSalut"] > option:contains("")').prop('selected', true);
It works fine until one issue appeared. It works because my datatable for dropdown contains record with "" value (empty value), but if I change it to " " (or more white spaces), this select not working anymore (it will be ignoret and last one value will be selected).
So my question is, how can I select option which value is empty or white space by using jquery (what should I change in my existing select)?
P.S Sorry for my bad English.
EDIT:
Fixed it.
Instead of contains use, I needed to write this:
('select[Id="cmbSalut"]').find('option[text=""]').prop('selected', true);
Worked out as I wanted.
Try this : You can use .filter() and return true if option has empty value. make use of .trim() to handle any empty space.
$('select[Id="cmbSalut"] > option').filter(function(){
return ""==$(this).val().trim();
}).prop('selected', true);
In my project I need to update a backbone model with both the selected value and text from a <select>.
For this purpose I am calling
model.set 'value', $('select').val()
model.set 'value_text', $('select option:selected').text()
(I am using coffee script as well). Because of some problem in jQuery v2.0.3 which I am currently using I am receiving this warning:
Attr.specified is deprecated. Its value is always true.
I know there were questions on SO about this warning, but I want to ask something completely different:
Since updating to a newer version of jQuery (where the problem might be fixed) is not possible in next few months I would like to ask whether there is other way round to receive the selected option's text instead of that used above. I am not against pure JS solution if there is no other using jQuery.
Any help is highly appreciated.
EDIT for #KevinB: The warning is caused by asking whether there is selected attribute on that option.
To *fix* it without changing anything else, you can just use .filter.
$('select option').filter(function (i) { return this.selected; }).text();
I prefer do that in a different approach. See the code.
Inside view.
events:
"change input":"updateModel"
"change select" : "SelectedItem" //Just for example.
selectedItem:(element)->
selectedOption = element.target.selectedOptions
alert **selectedOption.item().value** // the value of the selected item. now you can set it on model.
updateModel:(element)->
#model.setNew(element.target.name, element.target.value)
Inside model.
setNew:(newName, newValue)->
#set newName, newValue
Html file.
<select>
<option value="renan">Renan</option>
<option value="carvalho">Carvalho</option>
</select>
<input type="text" name="customer" />
Hope it helps.
I am implementing this JQuery UI multiselect from http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
When I'm trying to validate my single select dropdownbox, even if nothing's been selected and the "Please Select" is visible, it still thinks that the first item in the list is the selected one.
$("#ddlAlternativeCode option:selected").val() just gets back the value of my first item in the dropdown. I need it to be 0 or null. Can anyone help me?
You dont need to write "option:selected" in the $("#ddlAlternativeCode option:selected").val()
Try this instead:
$("#ddlAlternativeCode").val();
You should be able to see it working by adding this following alert which should show NULL if nothing is selected:
alert("value= "+$('#ddlAlternativeCode').val());
where the id is the id of the selector.
If that doesn't work, your javascript has an error somewhere.
The other way of collecting selected values with Eric's script is via the "GetChecked" method call on the API. See example here:
var array_of_checked_values = $("select").multiselect("getChecked").map(function(){
return this.value;
}).get();
I am using ThreeDubMedia's drag and drop selection feature to check and uncheck a couple checkboxes. It will check and uncheck them once, but no more than that. What's more, when I look at the elements by using inspect, they start without the checked attribute, as they should; they gain it when selected, as they should; and they lose it when selected again, as they should. However, this is where it gets strange. If I select it a third time, it gains the checked attribute, but does not check! And if I select it a fourth time, nothing happens! I have no idea what's causing this.
http://i.snag.gy/AieOg.jpg
Currently, you are actually removing the attribute (using removeAttr()) instead of just turning it off (e.g. prop('checked', false)).
You should be using prop(). The following works:
if (this.checked) {
$(this).prop('checked', false);
} else {
$(this).prop('checked',true);
}
jsFiddle here.
Or better yet, as #Pointy mentioned:
.drop(function( ev, dd ){
this.checked = !this.checked;
});
jsFiddle here.
I'd like to do this simply without saving the starting value of the select in an object.
if i have (when i load the dom):
<select>
<option value='1' selected>one</option>
<option value='2' >Two</option>
and than i later change the selection so that another option is selected, is there some kind of property that stores the value of the option that was originally selected?
I think this sholud work:
$("select option[selected]").val()
fiddle: http://jsfiddle.net/4dCMd/
Tested this way in different browsers: seems to be broken in IE7/8, works in last Chrome, FF and IE9
You should use the defaultSelected property of the options object to test if it was selected by default.
http://www.javascriptkit.com/jsref/select.shtml
use this
$('select').find('option[selected]').val();
DEMO
$('select').each(function(){
$(this).data('originalValue',$(this).val());
});
You could do this on .ready. It'll store the default values of every select in it's data object.
Oh just re-read your question and you said that's exactly what you don't want.
Well, i don't think there's another efficient way to do it so i'll leave it here anyway.
simple to use filter to get any default selected options:
var def = $("select > option").filter(function () {
return this.defaultSelected;
});
DEMO
DefaultSelected
Reflects the value of the selected HTML attribute. which indicates whether the option is selected by default.