Develop Reference

Get selected value of option with multiple dropdown menus using javascript

I have multiple features that have multiple options that need to be updated when an option is selected. I also need to pass a third piece of data through the attribute element.
.getElementById() works for a single dropdown menu, but how do I get it to work when there are multiple menus on the page?
I have tried var e = document.getElementsByClassName("testClass"); which did not work.
I also tried to create optionsText & optionsValue in the same way that optionsFtr is created with var optionsValue = $('option:selected', this).value; and that didn't work either.
http://jsfiddle.net/8awqLek4/4/
HTML Code
<ul>
<li>
<div class="ftrsTitle">BODY</div>
<select class="testClass" id="testId">
<option>Select</option>
<option ftr="bod" value="blk">Black</option>
<option ftr="bod" value="grn">Kelly Green</option>
<option ftr="bod" value="red">Red</option>
<option ftr="bod" value="roy">Royal</option>
</select>
</li>
<li>
<div class="ftrsTitle">TRIM</div>
<select class="testClass">
<option>Select</option>
<option ftr="trm" value="blk">Black</option>
<option ftr="trm" value="grn">Kelly Green</option>
<option ftr="trm" value="red">Red</option>
<option ftr="trm" value="roy">Royal</option>
</select>
</li>
</ul>
<div id="vars"></div>
Javascript Code
$(document).ready(function () {
$("select").on('change', function () {
var e = document.getElementById("testId");
var optionsText = e.options[e.selectedIndex].text;
var optionsValue = e.options[e.selectedIndex].value;
var optionsFtr = $('option:selected', this).attr('ftr');
$("#vars").html("<p>optionsText: " + optionsText + "</p><p>optionsValue: " + optionsValue + "</p><p>optionsFtr: " + optionsFtr + "</p>");
});
});

To read select value you can simply use $(this).val(). To get selected option label you should use text() method.
Fixed code looks like this:
$("select").on('change', function () {
var optionsText = $('option:selected', this).text();
var optionsValue = $(this).val();
var optionsFtr = $('option:selected', this).attr('ftr');
$("#vars").html("<p>optionsText: " + optionsText + "</p><p>optionsValue: " + optionsValue + "</p><p>optionsFtr: " + optionsFtr + "</p>");
});
Demo: http://jsfiddle.net/8awqLek4/3/

This should do it:
$(document).ready(function(){
$("select").on('change', function(){
var e = $(this).find("option:selected");
$("#vars").html("<p>optionsText: " + e.text() + "</p><p>optionsValue: " + $(this).val() + "</p><p>optionsFtr: " + e.attr("ftr") + "</p>");
});
});
use the this keyword. Than you can access the select targeted, and with find in combination with the :selected selector you can find the option element currently selected.
http://jsfiddle.net/8awqLek4/5/

jQuery set option in dynamic select

I'm using jQuery v1.10.2.
I've a select wich will be filled dynamicly by ajax:
<select id="mySelect"></select>
I'm trying to set an option in a nother ajax call:
function GetValues(id) {
LoadSelectOptions('#mySelect');
/* select has now following options:
<option value="0"></option>
<option value="1">Test 1</option> */
$.ajax({
..
success: function (data) {
$('#mySelect').val(data.value); // data.value = 1
},
..
});
}
This code
$('#mySelect').val(data.value);
in my success area of the ajax call don't sets the option to "Test 1". I've also tried to do following:
$('#mySelect').val(data.value).change();
$('#mySelect option[value="' + data.value + '"]').attr('selected', 'selected');
$('#mySelect option[value="' + data.value + '"]').attr('selected', true);
$('#mySelect option[value="' + data.value + '"]').prop('selected', 'selected');
$('#mySelect option[value="' + data.value + '"]').prop('selected', true);
But nothing works in Chrome + Firefox (both latest version).
Thanks for help :)

You can do this :-
$("select#mySelect").val(data.value);
WORKING DEMO

how to replace specfic value from the option tag using jquery

i want to append the text box values in the dropdown list when user can change the text box value that time the existing value should be replaced to changed value in the option tag without selected how i can do this
var valuedata
$('.txtbox1').click(function (){
valuedata = $(this).val();
});
$('.txtbox1').focusout(function (){
var data = $(this).val();
if ($('.ddl [value ="' + valuedata + '"]').val() == valuedata) {
alert(valuedata);
$('.ddl').append($("<option value=" + data + " ></option>").html(data).val(data));
}
else {
$(".ddl [value='" + valuedata + "']").val(data);
}
});

Try this :
$('select option:contains("old_text")').text('new_text');
To check for option is appended or not :
$("select option").each(function(i,obj){
if($(obj).text() == "your_text"){
console.log("yes");
}
})

DEMO: http://jsfiddle.net/c2Ry8/
$(document).ready(function() {
$('.txtbox1').focusout(function (){
var data = $(this).val();
$('.ddl').append("<option value=" + data + " >"+data+"</option>");
});
});

There are spaces before [value $(".ddl [value='" + valuedata + "']").val(data); which might be problem. So, remove that space:
$(".ddl[value='" + valuedata + "']").val(data);
Use html instead of append like this:
$('.ddl').html($("<option value=" + data + " ></option>")

javascript, selection option using for loop that return the selected value

I'm pretty new to javascript so please bear with me. I'm trying to create a drop down list of age choice from 1-100, with option 20 show as default. I also need to get the return value of the choice user selected so i can use to calculate the years. Here is the code i'm playing around with so far.
function createAgeList()
{
var myAgeOptions;
for (cntr=1; cntr<100; cntr++)
{
myAgeOptions = myAgeOptions + "<option value=" + cntr + ">" + cntr + "</option>";
}
var myAgeSelect = document.getElementById('agelist');
myAgeSelect.innerHTML = myAgeOptions;
}
HTML code:
<form name="yearsleptform" id="yearsleptform" method="post">
<select size="1" id="agelist" name="agelist">
</select>
</form>

document.yearsleptform.agelist.value
This is going to return you the value they have selected.

To set the default option:
function createAgeList()
{
var myAgeOptions;
for (cntr=1; cntr<100; cntr++)
{
myAgeOptions = myAgeOptions + "<option value=" + cntr + " "+(cntr===20?"selected=selected":"")+ ">" + cntr + "</option>";
}
var myAgeSelect = document.getElementById('agelist');
Live Demo
myAgeSelect.innerHTML = myAgeOptions;
}
to get the selected value:
document.yearsleptform.agelist.value
Live Demo

Select a OPTION in a SELECT with jQuery is not working in Firefox

This is a weird issue, it works in IE but it doesn't in Firefox.
I have a SELECT control that when get focus, retrieve the HTML with the OPTIONs in an AJAX call.
The onfocus event handler contains this code:
var selectedValue = $(":input[name='" + fieldName + "']").val();
var dataRetrieved = function(data)
{
$(":input[name='" + fieldName + "']").html(data);
$(":input[name='" + fieldName + "']").val(selectedValue);
alert("data: " + data);
alert("former value: " + selectedValue);
};
$.post(url, data, dataRetrieved);
The first alert shows:
data: <option value=""/>
<option value="1" >a1</option>
<option value="2" >a2</option>
<option value="3" >a3</option>
And the second:
former value: 3
So it should work, actually it does in Internet Explorer (what make me think I'm doing something wrong about the HTML)
Any idea about what could be the problem?
Thanks.

The input selector does not need a colon before it. Your selector should look like this:
$("input[name='" + fieldName + "']")
not
$(":input[name='" + fieldName + "']")
That's my first guess as to why it might not be working.