Develop Reference

Javascript need to keep "selected" option in view

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/

How to insert selected element from multiple selection into an input?

hi everyone i have a problem.
i have a multiple selection and i want to select something and put it into an input through a button i hope i have been clear :
i manage to get the select item with this jquery code :
var chosen= $('#droite option:selected').val();
droite is an id for the multiple selection
and i want to put it into the input wich has an id : chosen item here is my jquery code:
$("#chosenitem").prepend(chosen);
and it won't work do you have any idea why .?

You need to call val() on the select itself, not the options it contains:
var chosen = $('#droite').val();
Similarly, to set the value of the #chosenitem input, use val() with a parameter:
$("#chosenitem").val(chosen);
Note that if multiple options are selected in the #droite element, the value returned will be a comma delimited string, eg. foo,bar,baz.

You should call val() to set the value of #chosenitem
$("#chosenitem").val(chosen);

unexpected behaviour in option tag in HTML

I have the following code
<select id="part">
<option>noun</option>
<option>verb</option>
<option>adjective</option>
</select>
In the above code, I don't have any value attribute each option tag.
there is only text node.
when I access the option tag
$("#part").val(); I get what is selected in dropdown box. ie, "noun"
but when I access $("#part").text(), there is empty string.
but when I create, option tags dynamically in jquery for
<select id="part"></select>
using
var names=["noun","adjective","verb"];
for (var i =0;i<names.length;i++) {
var option=$("<option>",{
value:names[i],
text:names[i]});
$("#part").append(option);
}
Here the value is attribute is needed to get the option selected.
without value attribute, $("#part") is undefined.
can somebody explain the discrepancy here? of if my understanding is not correct. Thanks

Check here DEMO http://jsfiddle.net/yeyene/yH4Fb/
You need to get only the selected option text coz there are three options,
when you get $("#part").val(); you directly get the selected value (only one selected value). But when you get $("#part").text().. you are getting the text of the whole select text where you have three options and three types of text.
JQUERY
$(document).ready(function(){
var names=["noun","adjective","verb"];
for (var i =0;i<names.length;i++) {
var option=$("<option>",{
value:names[i],
text:names[i]});
$("#part").append(option);
}
$("#part").on('change', function() {
alert('Value is '+$(this).val());
var text = $("#part option:selected").text();
alert('Text is '+text);
});
});

$("#part").text() doesn't return nothing but it won't return what you expect (see this fiddle).
Explanation: text returns the text of the object strips out the html (see jQuery docs examples), so what you will be getting is the inner contents of the select after the html was stripped out.
If you want the text of the selected value, include the selected option in your jquery selector: i.e. $('#part option:selected').text() which uses the jQuery psuedo-selector (also in my fiddle).

Unable to select first element from select using Jquery

I am filling a drop down based on the value selected in the first drop down.Data being sent back from server is in JSON format and using JQuery to parse and fill the second select tag
<select name="abc" id="jobName">
<option value="-1">Please select a Job</option>
</select>
This is my Jquery code
var selectedGroup = document.getElementById(groupDropDownId);
var groupdata = selectedGroup.options[selectedGroup.selectedIndex].value;
var formInput='group='+groupdata;
$.getJSON('search/getSchedulerJobListForGroup',formInput,function(data) {
$('.result').html('' + data.jobList + '');
$.each(data.jobList,function(index, value){
var jobId = document.getElementById(resetDropDownId);
var option=new Option(value,value);
try{
jobId.add(option);
}
catch(e){
jobId.appendChild(option);
}
});
});
$("#jobName")[0].selectedIndex = 1;
// $("#jobName").val($("#triggerjobName option:first").val());
in above code groupDropDownId is ID of the drop down based on whose value, second drop down will be filled.resetDropDownId is ID of second drop down which i am trying to fill from JSON data getting from the server.
Upon filling the drop down, its also creating an empty option tag and it is getting select by default.
I am not sure if i can add some default value to that empty option so that i can select that default option value like "please select bla bla."
also i tried to select first element from the drop down but nothing seems working for me.I am wondering what i am doing wrong here?

Based on your question, it looks like you want to know how to change the value and text of an element within a dynamically populated select list.
Currently, you have this statement $("#jobName")[0].selectedIndex = 1; sitting outside of your getJSON request. If you move this inside of the getJSON function, it will work as expected.
If you want to set the value and text of that object, you'll want to use ->
$('#jobId option:first').val("Some Value").text("other stuff");
You can see a working JS Fiddle using dynamically populated select list from a JSON object.
Fiddle

select all options in select listbox by default -- javascript

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"