Develop Reference

setting an option value empty in a dynamically changing select list

How can I modify this code:
https://jsfiddle.net/nn83qf3y/
so that the '--None--' selections are outputted as
<option value="">--None--</option>
instead of
<option value="--None--">--None--</option>
Thanks.

Didn't put much time into your question, So here's a simple fix.
if(programs[i][1] == '--None--') {
var opt = new Option(programs[i][1],'' );
}else{
opt = new Option(programs[i][1]);
}
https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Option

How to change the value of a var from a form with javascript

I have a form in which users may choose which data they want to see.
<form>
<div class="myvalues">
<select id="mySelect">
<option value="data1">value 1</option>
<option value="data2">value 2</option>
<option value="data3">value 3</option>
</select>
</div>
</form>
In my Javascript section (in the head section of a html page) I have the next variable,
var dataFile = 'data1';
This is now a static value ('data1')
But I want to replace the 'data1' value with the selected value which was choosen in my form above
How do I achieve that?

You can use the document.getElementById() function of javascript to retrieve the current value:
dataFile = document.getElementById('mySelect').value;
Have a look here for a simple demo.

If I understood you well, in JavaScript you can ask for the value of the element.
var element = document.getElementById("mySelect");
var dataFile = element.options[element.selectedIndex].value;
If the second option was selected, this should make dataFile having the value "data2"
If you want the text value, you could use this.
var element = document.getElementById("mySelect");
var dataFile = element.options[element.selectedIndex].text;
If the second option was selected, this should make dataFile having the value "value 1"
Does this help you?

As Arthur said u can get the option value selected with this code.
var dataFile = document.getElementById("mySelect").value;
To update the dataFile variable when you change the select value you can create a function on the onchange event of the element.
var selectElement = document.getElementById('mySelect');
selectElement.onchange = function(e){
dataFile = document.getElementById("mySelect").value;
console.log(dataFile);
}
Example

Get attributes values from select2 selected option

I'm using the Select2 plugin from http://ivaynberg.github.io/select2/select2-latest.html what works fine but i'm having a problem to get the values from the options attributes.
I've got a select menu like this:
<select name="invoice_line[0][vat]" class="vat">
<option value="20440" data-value="21.00" data-name="20440" selected="selected">21%</option>
<option value="20441" data-value="6.00" data-name="20441">6%</option>
<option value="20442" data-value="0.00" data-name="20442">0%</option>
</select>
How can I get the values of the attributes 'data-value', 'data-name' and 'value' of the selected option?

obj = $("#dropdown").select2("data")
in obj variable i will get all the data of the selected node.

This was answered in another SO question
There is no direct method with select2, you can use a combinaison of select2 data and jQuery :
$("#example").select2().find(":selected").data("id");
First you get the select2 data then you find your selected option with jQuery and finally the data-attribute.

We can use a combination of select2 data and jQuery :
$("#example").select2('data').element[0].attributes['data-name'].value

Following worked for me. Idea is to use "change" function as follows
<select class="drop-down">
<option value="0">A</option>
<option value="1">B</option>
</select>
$('.drop-down').select2().on("change", function(e) {
var obj = $(".drop-down").select2("data");
console.log("change val=" + obj[0].id); // 0 or 1 on change
});

var return_option = $("#your-select-input-id").select2().find(":selected")[0];
above given statement will return select option and then put that return result as given below:
var name_of_attribute = $( return_option ).attr('name-of-attribute');
This will return the attribute value.

No idea about the pluggin, and without checking if the code works i imagine it would be something like this:
$('.vat li').each(function(){
var me = $(this),
mevalue = me.attr('value'),
datavalue = me.data('value'),
dataname = me.data('name');
//do what you want with the data?
});

Put select2 into tagging mode , it will help you.
Or
Try below similar code, it may work for you ...
$("$id").select2("val", option);
$("$id").attr("data-name");

I know that this is an old post, but I was struggling with this same problem. This is the solution that me and my good friend Thys finally got to work:
<script type="text/javascript">
$(document).ready(function ()
{
$("#e1").select2();
$("#e1").change(function () {
var theID = $("#e1").val();
$('#staffNr').val(theID);
$('#staffNr').val();
//var theID = $(test).select2('data').id;
var theSelection = $(test).select2('data').text;
$('#selectedID').text(theID);
$('#selectedText').text(theSelection);
});
});
#Html.Hidden("fieldName","staffNr");
This worked in my MVC 4 view with the last line in my html form where it is correctly added to the model. Don't forget to up-vote if you use my answer please :) I haven't got much of a reputation...

I hope you solved the issue. Here we dont use select2(), if we use select2() it will not work all other functions like formatNoMatches, on-change....
$("#example").find(":selected").data("id");

el = document.getElementsByName("invoice_line[0][vat]")
el.options[[el.selectedIndex]].attributes["data-id"].value

The params.data.element object of the selected item holds the data you're looking for.
Where .foo is the select element I'm calling, and the data attribute within the options I want to access is data-bar="some value" The following works for me:
var $fooSelect = $('.foo');
$fooSelect.on(function (e) {
console.log($(e.params.data.element).data('bar'));
});

You can access to attributes looking in DOM structure:
<select id="select_name">
<option value="20440" data-value="21.00">21%</option>
<option value="20441" data-value="6.00">6%</option>
<option value="20442" data-value="0.00">0%</option>
</select>
$('#select_name option').each(function (index) {
console.log($(this).attr("data-value"));
});

set an id for your select element and this would work
$('select#your-id').find('option[value="'+$('#your-id').val()+'"]').attr('data-attribute');

You haveto do it with on("change"... because of this is a dynamicly generated option list.
$('.select_class').on("change",function(){
var selected_value= $('.hakemler').val();
var wanted= $('.select_class').find('option[value="'+selected_value+'"]').attr('data-foo');
alert(selected_value+" "+wanted);
});

Why I can not get the correct value of my <select> field?

In my index.html, I have a selection drop down menu:
<select id="car">
<option value="bmw">BMW</option>
<option value="toyota">TOYOTA</option>
</select>
My js:
var c = $('#car');
var selection;
c.change(function(){
if(c.val()==='bmw'){
selection = 'BMW';
}else if(c.val()==='toyota'){
selection = 'TOYOTA';
}
});
console.log(c.val());
console.log(selection);
When page firstly loaded, the initial selection is BMW, and I got console output "BMW" which is fine, then I select "TOYOTA", but the two console outputs are still "BMW".
How to get the current
value of the selection outside jQuery .change(...) function after the selection has been changed??
________________typo have been fixed____________
car.val() and Selection are both my typo here in the post, in my code I do use selection, and c.val().
My point is how to get the current selection value out side jQuery change() function. Please do not discuss on my typo any more. Thank you.

You're looking at car when you should be using c. car does not have a val() method.
if(c.val()==='bmw'){
selection = 'BMW';
} else if(c.val()==='toyota'){
selection = 'TOYOTA';
}
Also note that var Selection; will not be the same variable as selection (lowercase).
A better approach might be:
c.change(function(){
selection = c.find(":selected").text();
});
working example: http://jsfiddle.net/hunter/XespU/

You should define your var selection with lowercase, as this:
var selection;
Why? Javascript is case sensitive, so, Sensitive and sensitive are distinct variables.
Also, you should define your car var, like this:
var selection;
c.change(function(){
var car = $(this); //declare it
if(car.val()==='bmw'){
selection = 'BMW';
}else if(car.val()==='toyota'){
selection = 'TOYOTA';
}
});

Getting the text from a drop-down box

This gets the value of whatever is selected in my dropdown menu.
document.getElementById('newSkill').value
I cannot however find out what property to go after for the text that's currently displayed by the drop down menu. I tried "text" then looked at W3Schools but that didn't have the answer, does anybody here know?
For those not sure, here's the HTML for a drop down box.
<select name="newSkill" id="newSkill">
<option value="1">A skill</option>
<option value="2">Another skill</option>
<option value="3">Yet another skill</option>
</select>

Based on your example HTML code, here's one way to get the displayed text of the currently selected option:
var skillsSelect = document.getElementById("newSkill");
var selectedText = skillsSelect.options[skillsSelect.selectedIndex].text;

Simply You can use jQuery instead of JavaScript
$("#yourdropdownid option:selected").text();
Try This.

This should return the text value of the selected value
var vSkill = document.getElementById('newSkill');
var vSkillText = vSkill.options[vSkill.selectedIndex].innerHTML;
alert(vSkillText);
Props: #Tanerax for reading the question, knowing what was asked and answering it before others figured it out.
Edit: DownModed, cause I actually read a question fully, and answered it, sad world it is.

document.getElementById('newSkill').options[document.getElementById('newSkill').selectedIndex].value
Should work

This works i tried it my self i thought i post it here in case someone need it...
document.getElementById("newSkill").options[document.getElementById('newSkill').selectedIndex].text;

Attaches a change event to the select that gets the text for each selected option and writes them in the div.
You can use jQuery it very face and successful and easy to use
<select name="sweets" multiple="multiple">
<option>Chocolate</option>
<option>Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<div></div>
$("select").change(function () {
var str = "";
$("select option:selected").each(function() {
str += $( this ).text() + " ";
});
$( "div" ).text( str );
}).change();

function getValue(obj)
{
// it will return the selected text
// obj variable will contain the object of check box
var text = obj.options[obj.selectedIndex].innerHTML ;
}
HTML Snippet
<asp:DropDownList ID="ddl" runat="server" CssClass="ComboXXX"
onchange="getValue(this)">
</asp:DropDownList>

Here is an easy and short method
document.getElementById('elementID').selectedOptions[0].innerHTML

Does this get the correct answer?
document.getElementById("newSkill").innerHTML

var ele = document.getElementById('newSkill')
ele.onchange = function(){
var length = ele.children.length
for(var i=0; i<length;i++){
if(ele.children[i].selected){alert(ele.children[i].text)};
}
}

var selectoption = document.getElementById("dropdown");
var optionText = selectoption.options[selectoption.selectedIndex].text;

Please try the below this is the easiest way and it works perfectly
var newSkill_Text = document.getElementById("newSkill")[document.getElementById("newSkill").selectedIndex];

Found this a tricky question but using ideas from here I eventually got the solution using PHP & Mysqli to populate the list : and then a bit of javascript to get the working variable out.
<select id="mfrbtn" onchange="changemfr()" >
<option selected="selected">Choose one</option>
<?php
foreach($rows as $row)
{
echo '<option value=implode($rows)>'.$row["Mfrname"].'</option>';
}
?>
</select>
Then :
<script language="JavaScript">
function changemfr()
{
var $mfr2=document.getElementById("mfrbtn").selectedOptions[0].text;
alert($mfr2);
}
</script>