I have a form which has a select list associated with the field players.
To populate the listbox, user clicks on a button on the form to display a popup and from that popup select players' names and then click another button on the popup which closes the popup and displays the selected values in the listbox.
By default, i put selected="true" in the select tag so that when user saves the form, the values in the listbox are saved.
<select size=5 id="sub_player_ids" name="sub[player_ids][]" multiple selected="true">
The above code selects all options in the selectbox and those options are highlighted in blue.
However it can happen that user deselects an option in the player's select box by error.
I would like all options in the select box to be selected by default - whether they are highlighted or not
Is there is a way to select all options in the select box by default when saving the form?
Thanks a lot for any suggestion provided.
Cheers
Do you know the values in the select? You can loop over the select and set each options selected to true.
for (var i = 0, children = select.childNodes, l = children.length; i < l; i++) {
if (children[i].tagName === "OPTION") children[i].selected = true;
}
Fiddle is using the fact that Chrome/IE7+ should define window.select as the element found in the DOM by the ID select. If you run this in Firefox you'll need var select = document.getElementById('select');
http://jsfiddle.net/robert/VKF4E/
It's a one-liner if you're using jQuery.
$("#sub_player_ids option").attr("selected", "selected");
Explanation: the syntax in the JQuery Selector uses CSS style to identify the "SELECT" (listbox) using the '#id' pattern and then following it with "option" selects all of the options within the named element. the "attr" function will add an attribute to each element returned. In this case we are adding the "selected" attribute and setting the value to "selected"
Related
I want null option selected displayed as --Select-- by default in my dropDown. I'm trying to do it like this
<select class="form-control" asp-for="EducationId" asp-items="#(new SelectList(Model.educations, "Id", "Name"))"><option>--Select--</option></select>
It loads dropdown perfectly with --Select-- option selected but it does not make its value null. And when I try to get it value without selecting any option doing this
$('#EducationId option:selected').text()
It returns string having --Select--
But I want it to return null
I've tried this solution by adding disabled selected but according to its statement, once I select any option, it does not allow me to select that first option again. but in my case, this dropdown is optional and user can un-select any selected option.
How could I make this dropdown optional?
Any kind of help will be appreciated.
The educations is a bunch of items you are presenting to the user to select from. Simply add another item to it like this (I am assuming it is called Education):
Model.educations.Insert(0, new Education{Id = -1, Name = "--Select--" });
Then check if that item has been selected and do whatever you need to do.
I have an ordinary select list (single not multiple). The list is headed by a title such as "Events" :
<option selected = "selected" value = " " class = "hselect" > Events </option>
Under the title are the actual choices. The user has a form to fill in, and the Events select box will appear in the form. Once the user has chosen his event, such as "register", the choice appears in an input box next to the dropdown. I use a Javascript program to do that.
The selection also remains in the select box itself, so that the form shows
|register| |register| -- the first in the select box, the second in the input box. What I need, instead, is for the select box to return itself to the heading, so that the form shows |Events| |register|.
Using the same Javascript program I can pick up the "Events" option, but I don't know how to get the select box to go back to its original configuration with Events showing at the top, and the choices underneath.
Is there a way to do this in Javascript?
To select the first option from a <select> use the "selectedIndex" property:
var target = document.getElementById('target');
target.onchange=function(){
alert('select changed!');
target.selectedIndex = 0;
};
fiddle: https://jsfiddle.net/adriel_santos/n90s0mzm/
I am using this code here, it pulls out the selected option value from a drop-down box named "attribute[466]" then puts that value into an input field with the id of text_qty_
jQuery(function($){
var $idval = $('#text_qty_');
$('select[name="attribute[466]"]').change(function(){
$idval.val($(this).val())
}).triggerHandler('change')
});
What I can't figure out is how to get the text from the option selected rather than the value.
As an added challenge the select element that contains the drop-down box has a randomly generated ID attribute.
Find the selected option and read the text
var txt = $(this).find('option:selected').text();
JSFiddle
Although this may sound dead simple, the matter is complicated by the fact I can only use the change() trigger on the select element. I am using the 'Chosen' jQuery plugin which basically modifies the multi select box on the page.
Whenever a item is selected or unselected, the plugin triggers the change event on the original select element. I am obviously able to get all the unselected items, but I need the one that was just unselected that caused the change event to trigger.
So I have the following function, the bit in the middle is what I need to capture the item that was just unselected. #cho is the id of the original select element.
$("#cho").chosen().change( function() {
// Need code here to capture what item was just unselected, if any...
})
Store value when the user changes the the check box.
var preVal;
$("input[name='g']").on("change",function(e){
if(preVal){
alert(preVal);
}
preVal=$(this).val();
});
Check this http://jsfiddle.net/fcpfm/
1.Use hidden field
2.Hidden field value initially empty.
3.Onchange put the selected value in a hidden field.
4.If onchange is happening again , hidden field value is the previously selected value.
$("#cho").chosen().change( function() {
var hidvalue = $('#hiddenfield').val();
if (hidvalue ) {
//Get the previously selected ids
var prev_ids = $('#hiddenfield').val();
//Then Update currently selected ids
$('#hiddenfield').val('currently selected ids');
} else {
//Update currently selected ids
$('#hiddenfield').val('currently selected ids');
}
})
Try using a variable to store the selected item. Update it each time when item changed. I cant add comment. That is why I am posting it as an answer.
How to set option selected when using jqtransform on select element.
I'm using jqtransform for my form , and I want to set appropriate option value to be selected when I'm retrieving saved data from database.
I believe you would set the value of select the same way as without using the jqTransform.
E.g.
$('#mySelect').val('myVal');
Edit:
Well, this is really ugly but should work:
var mySelect = $('#mySelect');
//find the current selected option
var myOption = mySelect.find('option[value='+mySelect.val()+']');
//find the index of that option
var index = $('#mySelect option').index(myOption);
//trigger the click on the corresponding jqTranfsform element
mySelect.prev('ul').find('li').eq(index).find('a').click();
You can call onchange event. jqtransform has change() method.
$('#mySelect').val('myVal').trigger('change');
It work's :)