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);
Related
I have a bunch of select boxes used to filter a large complex table whose contents is loaded via a sequence of ajax queries. As the table loads, not just the table but the select box filter update to reflect the current available options. As the use may already have selected options to filter the table at this point, I have a bit of code to preserve the currently selected value:
if($('#CourseFilter').length) {
selected = $('#CourseFilter').val();
$('#CourseFilter').replaceWith(sel);
if(selected != '') $('#CourseFilter option[value="'+escape(selected)+'"]').prop('selected', true);
} else {
sel.appendTo('#filters'); // Adding fitler for first time.
}
This works for most of the filters, but a couple, such as #CourseFilter, reset back to default instead of remembering current selection. It think it is because the values in these lists contain special characters such as -, / and \. I have tried using escape but it still doesn't work. Any ideas?
What you are probably looking for:
You should be able to just set the value of sel, instead of finding the right <option> and manually selecting that:
sel.val(selected);
If you want to find the right <option>:
You can avoid the escaping issue altogether by filtering for the right <option> using jQuery.filter:
$('#CourseFilter option').filter(function() {
return $(this).val() === selected;
}).prop('selected', true);
No need to look for each <option> since val() is both a getter and a setter.
Just use val() to set value on new <select>
if($('#CourseFilter').length) {
selected = $('#CourseFilter').val();
$('#CourseFilter').replaceWith(sel);
sel.val(selected);
} else {
sel.appendTo('#filters'); // Adding fitler for first time.
}
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 dynamically generating some dropdowns and then allowing them some of those to be removed on board dyanmically. so that time, i have encountered an error of selection option (dropdown) elements id mismatch. something like below is.
newly added dropdowns.
select name="CSSAtapsClient[client_time_window_arr][0]" id="client_time_window_0">/select>
select name="CSSAtapsClient[client_time_window_arr][1]" id="client_time_window_1">/select>
select name="CSSAtapsClient[client_time_window_arr][2]" id="client_time_window_2">/select>
select name="CSSAtapsClient[client_time_window_arr][3]" id="client_time_window_3">/select>
after i dynamically remove them via javascript. (lets say i am removing the second one) so then new ones will be displayed as followings,
select name="CSSAtapsClient[client_time_window_arr][0]" id="client_time_window_0">/select>
select name="CSSAtapsClient[client_time_window_arr][2]" id="client_time_window_2">/select>
select name="CSSAtapsClient[client_time_window_arr][3]" id="client_time_window_3">/select>
So now the issue i have is, the names of the dropdowns are like this, (0,2,3)
CSSAtapsClient[client_time_window_arr][0],
CSSAtapsClient[client_time_window_arr][2],
CSSAtapsClient[client_time_window_arr][3]
So this is causing an error for me and i need to reorder this name and make it be like this, (0,1,2)
CSSAtapsClient[client_time_window_arr][0]
CSSAtapsClient[client_time_window_arr][1]
CSSAtapsClient[client_time_window_arr][2]
how can i simply rename these dropdowns name attribute (from 0 to how much ever dropdows are exisiting) ? appreciate an early reply
EDIT 1
I tried this, but didnt work.
$('#tbl_dynamic_call_dates select').each(function(i){
$(this).attr('name',"CSSAtapsClient[client_time_window_arr][i]");
});
You can simply reset the values using .attr() method:
$('#tbl_dynamic_call_dates select').attr('name', function(i) {
return 'CSSAtapsClient[client_time_window_arr]['+ i +']';
});
I did this,
$('#tbl_dynamic_call_dates select').each(function(i){
$(this).attr('name',"CSSAtapsClient[client_time_window_arr][" + i + "]");
});
I have a problem with my price calculator when I've tried to add options. (jsFiddle here = http://jsfiddle.net/wemdragon/ZG8m)
What I'm trying to do is where it says:
var firstoption=$('select#myselect')
I would like the options' value turned into the price value but I can't seem to do it. It works in my shopping cart but not in the JavaScript.
Maybe I'm trying to add the value in the wrong place, I don't know what's going wrong.
Your select id (at least in the fiddle) was camelCased as mySelect but you were trying to access the id #myselect. This should look like the following unless you change your markup's id:
var firstoption = $('select#mySelect');
I also noticed that you specified a default value of 0 for not selecting an option. For some reason, !firstoption.val(), when the val() was zero, returns false instead of true like your if statement seemed to be expecting. !0 is apparently true in this instance.
I changed the logic to match your mark-up and it seemed to behave like you might have expected or want:
if (firstoption.val() == 0) {
error.html('Please include an option!');
firstoption.focus();
}
Edit Updated fiddle: http://jsfiddle.net/ZG8mv/8/
Now the focus() executions will show in the order that they are wrong. I.e., if there is no width and no option specified, that box will receive focus. Previously, the option message would trump the other two.
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();