Develop Reference

HTML select dropdownlist how to display the VALUE/ID instead of text

So this is the HTML code:
<select id='selUser' style='width: 200px;'>
<option value='0'>Select User</option>
<option value='1'>Yogesh singh</option>
<option value='2'>Sonarika Bhadoria</option>
<option value='3'>Anil Singh</option>
<option value='4'>Vishal Sahu</option>
<option value='5'>Mayank Patidar</option>
<option value='6'>Vijay Mourya</option>
<option value='7'>Rakesh sahu</option>
</select>
What I want to achieve is that, when I click on Value '1', the dropdownlist will display "1" instead of Yogesh Singh. Is it possible to do that?

This will display the value instead of the name when you select an option. I also wrote some code to put the name back if you change it again otherwise the number would just stay there added both examples:
var oldIndex = ''
var oldText = ''
function change(x) {
if (oldIndex != '' && oldText != '') {
x.options[oldIndex].innerHTML = oldText
}
oldIndex = x.value
oldText = x.options[x.selectedIndex].innerHTML
x.options[x.selectedIndex].innerHTML = x.value
}
function change2(x) {
x.options[x.selectedIndex].innerHTML = x.value
}
<select onchange="change(this)" id='selUser' style='width: 200px;'>
<option value='0'>Select User</option>
<option value='1'>Yogesh singh</option>
<option value='2'>Sonarika Bhadoria</option>
<option value='3'>Anil Singh</option>
<option value='4'>Vishal Sahu</option>
<option value='5'>Mayank Patidar</option>
<option value='6'>Vijay Mourya</option>
<option value='7'>Rakesh sahu</option>
</select>
<select onchange="change2(this)" id='selUser2' style='width: 200px;'>
<option value='0'>Select User</option>
<option value='1'>Yogesh singh</option>
<option value='2'>Sonarika Bhadoria</option>
<option value='3'>Anil Singh</option>
<option value='4'>Vishal Sahu</option>
<option value='5'>Mayank Patidar</option>
<option value='6'>Vijay Mourya</option>
<option value='7'>Rakesh sahu</option>
</select>

This script would do it:
document.body.onload = function(){
sel = document.getElementById('selUser');
opts = sel.childNodes;
for(var i in opts){
opts[i].innerHTML = opts[i].value;
}
}

Solution using jQuery:
var last_user_selected_name;
$(document).on('change', '#selUser', function() {
$('#selUser option:not(:selected)').each(function() {
if ($(this).text() === $(this).val()) {
$(this).text(last_user_selected_name);
}
});
var user_seleted = $('#selUser option:selected');
if (user_seleted.val() != 0) {
last_user_selected_name = user_seleted.text();
user_seleted.text(user_seleted.val());
console.log("User selected >> " + last_user_selected_name +
" >> " + user_seleted.val());
}
});
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<select id='selUser' style='width: 200px;'>
<option value='0'>Select User</option>
<option value='1'>Yogesh singh</option>
<option value='2'>Sonarika Bhadoria</option>
<option value='3'>Anil Singh</option>
<option value='4'>Vishal Sahu</option>
<option value='5'>Mayank Patidar</option>
<option value='6'>Vijay Mourya</option>
<option value='7'>Rakesh sahu</option>
</select>

How to Calculate Values of Options from Different Select

I am trying to calculate values of selected indexes. Dropdowns are dynamic so I might have 3 dropdowns, 5 dropdowns or 8 dropdowns. When I try to calculate values of selected indexes, I get NaN. Am I missing something?
function calculate() {
var calculationSpan = document.getElementById("calculationSpan");
var add;
var selects = document.querySelectorAll(".rooms");
selects.forEach(function (select) {
var roomsOfType = select.options[select.selectedIndex].value;
if (roomsOfType != 0) {
add = parseInt(add) + parseInt(select.options[select.selectedIndex].value);
}
});
calculationSpan.innerHTML = add;
}
<select class="rooms">
<option value="0">0</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="rooms">
<option value="0">0</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<select class="rooms">
<option value="0">0</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<button onclick="calculate()">
Calculate
</button>
<span id="calculationSpan"></span>

Basically you need a start value for add.
var add = 0;
And you have to borrow Array#forEach, because selects is an array like object, but not an array.
You need Function#call for using selects as thisArg.
[].forEach.call(selects, function (/* ... */ ))
function calculate() {
var calculationSpan = document.getElementById("calculationSpan"),
add = 0,
selects = document.querySelectorAll(".rooms");
[].forEach.call(selects, function (select) {
var roomsOfType = +select.options[select.selectedIndex].value;
if (roomsOfType) {
add += roomsOfType;
}
});
calculationSpan.innerHTML = add;
}
<select class="rooms"><option value="0">0</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select>
<select class="rooms"><option value="0">0</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option></select>
<select class="rooms"><option value="0">0</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option></select>
<button onclick="calculate()">Calculate</button>
<span id="calculationSpan"></span>

how to get a value from option when select (this code working for chrome)

how to get value from option
<script>
function usgsChanged(el) {
window["display_" + el.options[el.selectedIndex].value]();
}
function display_1() {
//how to get value from option
}
</script>
how to get value from option when select
<select onchange="usgsChanged(this);">
<option value="1">1</option>
<option value="2">2</option>
<option value="">more</option>
<option value="">more</option>
<option value="">more</option>
</select>

<script>
function usgsChanged(option) {
var value = option.value; //The value now resides in this variable
}
</script>
<select onchange="usgsChanged(this);">
<option value="1">1</option>
<option value="2">2</option>
<option value="">more</option>
<option value="">more</option>
<option value="">more</option>
</select>

try something like this
$('#idOfSelectTag').change(function(){
var value = $(this).val();
alert(value);
});

Try looking at internet before sanding a question. For example here.
Try this:
<script type="text/javascript">
function usgsChanged(el) {
var index = el.selectedIndex;
var selectOptions = el.options;
var optionValue = selectOptions[index].value;
var optionText = selectOptions[index].text;
alert("Value is " + optionValue + " and text is " + optionText );
}
</script>
And HTML:
<select onchange="usgsChanged(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="">more</option>
<option value="">more</option>
<option value="">more</option>
</select>

Javascript two datepicker conflict

Here is my code complete code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Date Picker</title>
</head>
<body>
<strong>Departing:</strong><br/>
<select name='dateSingleMonthDeparting' onChange='changeDate(this.options[selectedIndex].value);'>
<option value='na'>Month</option>
<option value='1'>January</option>
<option value='2'>February</option>
<option value='3'>March</option>
<option value='4'>April</option>
<option value='5'>May</option>
<option value='6'>June</option>
<option value='7'>July</option>
<option value='8'>August</option>
<option value='9'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</select>
<select name='dateSingleDayDeparting' id='day'>
<option value='na'>Day</option>
</select>
<select name='dateSingleYearDeparting' id='year'>
<option value='na'>Year</option>
</select><br/>
<strong>Returning:</strong><br/>
<select name='dateSingleMonthReturning' onChange='changeDate(this.options[selectedIndex].value);'>
<option value='na'>Month</option>
<option value='1'>January</option>
<option value='2'>February</option>
<option value='3'>March</option>
<option value='4'>April</option>
<option value='5'>May</option>
<option value='6'>June</option>
<option value='7'>July</option>
<option value='8'>August</option>
<option value='9'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</select>
<select name='dateSingleDayReturning' id='day'>
<option value='na'>Day</option>
</select>
<select name='dateSingleYearReturning' id='year'>
<option value='na'>Year</option>
</select>
<script>
function changeDate(i){
var e = document.getElementById('day');
while(e.length>0){
e.remove(e.length-1);
var j=-1;
if(i=="na"){
k=0;
}else if(i==2){
k=28;
}else if(i==4||i==6||i==9||i==11){
k=30;
}else{
k=31;
}
}
while(j++<k){
var s=document.createElement('option');
var e=document.getElementById('day');
if(j==0){
s.text="Day";
s.value="na";
try{
e.add(s,null);
}catch(ex){
e.add(s);
}
}
else{
s.text=j;
s.value=j;
try{
e.add(s,null);
}catch(ex){
e.add(s);
}
}
}
}
var currentTime = new Date();
y = currentTime.getFullYear()+1;
while (y-->1909){
var s = document.createElement('option');
var e = document.getElementById('year');
s.text=y;
s.value=y;
try{
e.add(s,null);
}catch(ex){
e.add(s);
}
}
</script>
</body>
</html>
I have two datepickers. When I change the first one it works perfectly, but if I change the second one the functions will work in the first datepciker
I want them to have their own function for each datepicker. What will I do to make this happen? I already tried to make put something like this getElementById('day day2') but it doesn't work.

Your select have assigned the ids day and year twice in your markup. That is wrong. ID should be unique.
Please change those IDs to day1, year1, day2 and year2. Then pass those ids as parameters into the function like this changeDate(this.value, "day1", "year1") and this changeDate(this.value, "day2", "year2").
Now define changeDate as
function changeDate(i, day, year) {
var e = document.getElementById( day ); // please note that day is the variable passed
...................
}
As an unrelated side note, this.options[selectedIndex].value is same as this.value

jQuery remove SELECT options based on another SELECT selected (Need support for all browsers)

Say I have this dropdown:
<select id="theOptions1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I want it so that when the user selects 1, this is the thing that the user can choose for dropdown 2:
<select id="theOptions2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
Or if the user selects 2:
<select id="theOptions2">
<option value="a">a</option>
<option value="b">b</option>
</select>
Or if the user selects 3:
<select id="theOptions2">
<option value="b">b</option>
<option value="c">c</option>
</select>
I tried the code posted here:
jQuery disable SELECT options based on Radio selected (Need support for all browsers)
But it doesn't work for selects.
Please help!
Thank you!
UPDATE:
I really like the answer Paolo Bergantino had on:
jQuery disable SELECT options based on Radio selected (Need support for all browsers)
Is there anyway to modify this to work with selects instead of radio buttons?
jQuery.fn.filterOn = function(radio, values) {
return this.each(function() {
var select = this;
var options = [];
$(select).find('option').each(function() {
options.push({value: $(this).val(), text: $(this).text()});
});
$(select).data('options', options);
$(radio).click(function() {
var options = $(select).empty().data('options');
var haystack = values[$(this).attr('id')];
$.each(options, function(i) {
var option = options[i];
if($.inArray(option.value, haystack) !== -1) {
$(select).append(
$('<option>').text(option.text).val(option.value)
);
}
});
});
});
};

This works (tested in Safari 4.0.1, FF 3.0.13):
$(document).ready(function() {
//copy the second select, so we can easily reset it
var selectClone = $('#theOptions2').clone();
$('#theOptions1').change(function() {
var val = parseInt($(this).val());
//reset the second select on each change
$('#theOptions2').html(selectClone.html())
switch(val) {
//if 2 is selected remove C
case 2 : $('#theOptions2').find('option:contains(c)').remove();break;
//if 3 is selected remove A
case 3 : $('#theOptions2').find('option:contains(a)').remove();break;
}
});
});
And the beautiful UI:
<select id="theOptions1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select id="theOptions2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>

You can add classes to your <option>s to store which go with each value of #theOptions1:
<select id="theOptions2">
<option value="a" class="option-1 option-2">a</option>
<option value="b" class="option-1 option-2 option-3">b</option>
<option value="c" class="option-1 option-3">c</option>
</select>
then do this:
$(function() {
var allOptions = $('#theOptions2 option').clone();
$('#theOptions1').change(function() {
var val = $(this).val();
$('#theOptions2').html(allOptions.filter('.option-' + val));
});
});

For the record you can NOT remove options in a select list in Internet Explorer.

try this. this will definitely work
$(document).ready(function () {
var oldValue;
var oldText;
var className = '.ddl';
$(className)
.focus(function () {
oldValue = this.value;
oldText = $(this).find('option:selected').text();
})
.change(function () {
var newSelectedValue = $(this).val();
if (newSelectedValue != "") {
$('.ddl').not(this).find('option[value="' + newSelectedValue + '"]').remove();
}
if ($(className).not(this).find('option[value="' + oldValue + '"]').length == 0) { // NOT EXIST
$(className).not(this).append('<option value=' + oldValue + '>' + oldText + '</option>');
}
$(this).blur();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form action="/Home/Ex2" method="post">
<select class="ddl" id="A1" name="A1">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<hr />
<select class="ddl" id="A2" name="A2">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<hr />
<select class="ddl" id="A3" name="A3">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<hr />
<select class="ddl" id="A4" name="A4">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<hr />
<input type="submit" name="submit" value="Save Data" id="btnSubmit" />
</form>

Actually, using the code below will remove a dropdown option just fine in IE, as long as it is not the selected option (it will not work on "a" without deselecting that option first):
var dropDownField = $('#theOptions2');
dropDownField.children('option:contains("b")').remove();
You just run this to remove whatever option you want to remove under a conditional statement with the first group (theOptions1) - that if one of those is selected, you run these lines:
var dropDownField = $('#theOptions2');
if ($('#theOptions1').val() == "2") {
dropDownField.children('option:contains("c")').remove();
}
if ($('#theOptions1').val() == "3") {
$("#theOptions2 :selected").removeAttr("selected");
$('#theOptions2').val('b');
dropDownField.children('option:contains("a")').remove();
}
-Tom