Select option value based on another select option in dynamic table - javascript

I have a table that changes the number of rows
<html>
<head>
<title>no Title</title>
<script type="text/javascript">
//what to do?
</script>
</head>
<body>
<datalist>
//land
//water
//air
//what to do?
</datalist>
<table id="animal">
<tr>
<th>Animal Category</th>
<th>Select Animal</th>
</tr>
<tr>
<td>
<select>
<option selected>Please select</option>
<option value="land">Land</option>
<option value="air">Air</option>
<option value="water">Water</option>
</select>
</td>
<td>
<select>
<option selected>Please select</option>
//what to do?
</select>
</td>
</tr>
<tr>
<td>
<select>
<option selected>Please select</option>
<option value="land">Land</option>
<option value="air">Air</option>
<option value="water">Water</option>
</select>
</td>
<td>
<select>
<option selected>Please select</option>
//what to do?
</select>
</td>
</tr>
</table>
<script src="myProject/js/jquery.min.js"></script>
</body>
</html>
Let's say there are currently 2 rows, then in each row, there is 'Select Animal' which can be selected according to the 'Animal Category' option.
For example, I chose 'land' in 'Animal category' then what appears in 'Select Animal' is -> cat, dog, chicken
For example I have 3 lists (land, air, water)
land -> cat, dog, chicken, etc
water -> fish, octopus, shrimp, etc
air -> bird, etc
Every list I want to place in the datalist because it can change in number, I've download jquery library. where do I start ?


The easiest way is to make just two selects and add some classes on it.
Then filter by classes or attributes. I've done by class on this example.
document.getElementById("main_select").onchange = function(){
let selector = document.getElementById('main_select');
let value = selector[selector.selectedIndex].value;
let nodeList = document.getElementById("sub_select").querySelectorAll("option");
nodeList.forEach(function(option){
if(option.classList.contains(value)){
option.style.display="block";
}else{
option.style.display="none";
}
});
}
<html>
<head>
<title>no Title</title>
</head>
<body>
<table id="animal">
<tr>
<td>
<select id="main_select">
<option selected>Please select</option>
<option value="land">Land</option>
<option value="air">Air</option>
<option value="water">Water</option>
</select>
</td>
<td>
<select id="sub_select">
<option selected>Please select</option>
<option class="land" value="cat">cat</option>
<option class="land" value="dog">dog</option>
<option class="land" value="chicken">chicken</option>
<option class="water" value="fish">fish</option>
<option class="water" value="octopus">octopus</option>
</select>
</td>
</tr>
</table>


Store your animals inside an Object literal
And than you could do like:
const categories = {
land: ["cat", "dog", "chicken"],
water: ["fish", "octopus", "shrimp"],
air: ["bird", "dragon"]
};
const options = Object.keys( categories ).map(pr => `<option value="${pr}">${pr}</option>`);
$("[data-target]").append( options ).on('change', function() {
const $targ = $(this.dataset.target).prop("disabled", false);
$targ.find("option:not(:disabled)").remove(); // Remove all but first option
$targ.append(categories[this.value].map(val => `<option value="${val}">${val}</option>`)); // Append new options
});
select {text-transform: capitalize;}
<select data-target="#anim"><option selected disabled>Select Category</option></select>
<select id="anim" disabled><option selected disabled>Select animal</option></select>
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>

Related

How can javascript collect values from the same classname in select-option?

I made table for the individual summation of the same classnames as like '30', '60'...
<td>
<select onchange='summation()' class='30' name='Cr'>
<option value=0>>15.0</option>
<option value=1>10.0/15.0</option>
<option value=2><5.0</option>
<option value=3>5.0/10.0</option>
</td>
<td>
<select onchange='summation()' class='30' name='WBC'>
<option value=0><2000</option>
<option value=1>2000~4000</option>
<option value=2> >10000</option>
<option value=3>4000~10000</option>
</td>
<td>
<select onchange='summation()' class='90' name='post-BUN'>
<option value=0>>24</option>
<option value=1><20</option>
<option value=2>20/24</option>
</td>
<td>
<select onchange='summation()' class='180' name='HBsAg'>
<option value=0>posi</option>
<option value=3>nega</option>
</td>
In Browser, that code's displaying below
I made javascript as below. Classname ='30' values are the collection of object.
function summation() {
var x = document.getElementsByClassName("30");
???????????
document.getElementById("30").innerHTML = x.valueOf();
How can I get the summation of the classname="30" from the that code?
When option selected, I want the sum of the values of the classname '30'. In here, 3 and 2 selected, the sum will be 5. I want That sum "5"

I think this is probably what you want, but it's a tiny bit unclear from the requirements. (I'm unsure why you run the "summation" function on the last two selects when you are not including them in the calculation.)
From a code point of view, querySelectorAll is used to find all elements with the same class. The advantage of this vs getElementsByClassName is that you can then easily loop over the items with a forEach as I have done.
Note that I had to alter your class names slightly because JavaScript complains about an invalid selector when the class name starts with a number. But this is a trivial change.
function summation() {
var x = document.querySelectorAll(".select30");
var total = 0;
x.forEach(function(item) {
total += parseInt(item.value);
});
console.log("Total: " + total);
}
<table>
<tr>
<td>
<select onchange='summation()' class='select30' name='Cr'>
<option value=0>>15.0</option>
<option value=1>10.0/15.0</option>
<option value=2><5.0</option>
<option value=3>5.0/10.0</option>
</td>
<td>
<select onchange='summation()' class='select30' name='WBC'>
<option value=0>
<2000</option>
<option value=1>2000~4000</option>
<option value=2> >10000</option>
<option value=3>4000~10000</option>
</td>
<td>
<select onchange='summation()' class='select90' name='post-BUN'>
<option value=0>>24</option>
<option value=1>
<20</option>
<option value=2>20/24</option>
</td>
<td>
<select onchange='summation()' class='select180' name='HBsAg'>
<option value=0>posi</option>
<option value=3>nega</option>
</td>
</tr>
</table>

After agreeing with ADyson and trying to do without a class name and but with data attribute here is what I have done.
const selectItems = document.querySelectorAll("select"); // selecting all select elements
selectItems.forEach(selectItem => { // looping through all select elements
selectItem.addEventListener("change", function() { // calling a function on change
let dataNumber = this.dataset.num;
summation(dataNumber); // passing the value of data-num to find next elements which has same data-num
});
});
function summation(dataNumber) {
const allElements = document.querySelectorAll("[data-num]"); // selecting all elements that has data-num attribute
const allElementsWithSameDataNumber = []; // to store all elements that has same data-num
allElements.forEach(select => {
if (select.dataset.num === dataNumber) {
allElementsWithSameDataNumber.push(select);
}
});
// Calculating the value of same data-number's select elements
let value = 0;
allElementsWithSameDataNumber.forEach(cur => {
value = parseInt(cur.value) + value;
});
console.log(value);
}
<select data-num="30" name="Cr">
<option value="10">10</option>
<option value="1">1</option>
</select>
<select data-num="30" name="WBC">
<option value="3">3</option>
<option value="2"> >2</option>
</select>
<select data-num="180" name="WBC">
<option value="3">3</option>
<option value="2"> >2</option>
</select>
<select data-num="180" name="WBC">
<option value="8">8</option>
<option value="2"> >2</option>
</select>

javascript shows all associated DIVs on a dropdown box select

I am new to javascript and must have looked at almost all of the previous questions here and elsewhere related to this question and none seem to do the trick because they use asp, php, Ajax etc.
I use jQuery code for several other items on the page and have found that their css can cause issues with my pages and am not keen on using it either.
In my case, is there a way to select a country from a drop down box and then display a dropdown box with the states or provinces for that country. My code is shown below but when I run it, it shows all DIVs and not just the DIV that applies to the country selected. If a country has no states/province it will display nothing but passes a value of 0.
I'd like to know what is wrong with this code.
Second question is, the page starts with a default country and its states/provinces but since I use onChange on the country select, the javascript would not be triggered because initially there is no change. Regardless, even when I do change the country from its default, all DIVs are displayed anyway.
Is it possible to show the states/provinces for the default country and still use javascript for any change made to the default selection. It does not show this in the sample below, but the values for the countries and the associated states/provinces come from a database and can therefore not be incorporated in the javascript.
Any help or suggestions will be greatly appreciated.
<TABLE>
<TR><TD>Country</DIV></TD>
<TD><SELECT NAME="countryid" onChange="showstate(this.options[this.selectedIndex].value)">
<OPTION VALUE="NONE">Select a country</OPTION>
<OPTION VALUE="CA" SELECTED>Canada</OPTION>
<OPTION VALUE="US">United States</OPTION>
<OPTION VALUE="ES">Spain</OPTION>
</SELECT></TD>
</TR>
<script>
function showstate(country) {
if (country == "CA") {
hiddenDivUS.style.display='none';
hiddenDivNONE.style.display='none';
hiddenDivCA.style.display='block';
}
else {
if (country == "US") {
hiddenDivCA.style.display='none';
hiddenDivNONE.style.display='none';
hiddenDivUS.style.display='block';
}
else {
hiddenDivCA.style.display='none';
hiddenDivUS.style.display='none';
hiddenDivNONE.style.display='block';
}
}
</script>
<DIV ID="hiddenDivNONE" STYLE="display:none">
<TR><TD><DIV CLASS="inputlabel">Prov/State</DIV></TD>
<TD><INPUT TYPE="hidden" NAME="provid" VALUE="0"></TD>
</TR>
</DIV>
<DIV ID="hiddenDivCA" STYLE="display:none">
<TR><TD><DIV CLASS="inputlabel">Prov/State</DIV></TD>
<TD><SELECT NAME="provid">
<OPTION VALUE="101">British Columbia</OPTION>
.......
<OPTION VALUE="165">Yukon Territories</OPTION>
</SELECT></TD>
</TR>
</DIV>
<DIV ID="hiddenDivUS" STYLE="display:none">
<TR><TD><DIV CLASS="inputlabel">Prov/State</DIV></TD>
<TD><SELECT NAME="provid">
<OPTION VALUE="201">Alaska</OPTION>
.......
<OPTION VALUE="265">Wyoming</OPTION>
</SELECT></TD>
</TR>
</DIV>
</TABLE>
Instead of listing the proper DIV it shows all three of them

First off, careful with your capitals.
Secondly try to keep all js at the bottom of the page.
This code is using ES6 so you might wanna check if it will work in all browsers but you can see whats going on.
el.classList is supported by most browsers however add,remove and toggle are not (were not.. not sure now)
I have used some regex to grab all elements using the id state_ so we can hide them, then we target the exact one to make it visible, you can probably clean that up also.
<style>
.hidden {
display: none;
}
</style>
<select name="countryid" onChange="showState(event)">
<option value="">Select a country</option>
<option value="ca">Canada</option>
<option value="us">United States</option>
<option value="es">Spain</option>
</select>
<div id="state_ca" class="hidden">
This is hidden unless Canada is selected.
</div>
<div id="state_us" class="hidden">
This is hidden unless America is selected.
</div>
<script>
function showState(event) {
const countryCode = event.target.value;
const states = document.querySelectorAll('[id^=state_]');
const el = document.getElementById(`state_${countryCode}`);
states.forEach(el => {
if (el.classList.contains('hidden')) {
return;
}
el.classList.add('hidden');
});
if (el) {
el.classList.remove('hidden');
}
}
</script>

according to me this can be the answer to your problem. You can make a few changes in the code which I have not done.
function addStates() {
var selectCountry = document.getElementById("selectCountry").value;
console.log(selectCountry);
var selectState = document.getElementById("selectState");
if (selectCountry == "india") {
var option1 = document.createElement("option");
option1.value = "punjab";
option1.text = "Punjab";
selectState.add(option1);
var option2 = document.createElement("option");
option2.value = "karnataka";
option2.text = "Karnataka";
selectState.add(option2);
} else if (selectCountry == "usa") {
var option1 = document.createElement("option");
option1.value = "florida";
option1.text = "Florida";
selectState.add(option1);
var option2 = document.createElement("option");
option2.value = "california";
option2.text = "California";
selectState.add(option2);
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<div>
<span>Select a country: </span>
</div>
<div>
<select onchange="addStates()" id="selectCountry">
<option value="" selected disabled>Please select a country</option>
<option value="india">India</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div>
<div>
<span>Please select a state: </span>
</div>
<div>
<select id="selectState">
</select>
</div>
</div>
</body>
</html>

I figured out how to get the desired result (see code below)
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script>
function showStates(country)
{
if (country == "101")
{ document.getElementById('CAprov').style.display='block';
document.getElementById('Default').style.display='none';
document.getElementById('USstate').style.display='none';
document.getElementById('NoProv').style.display='none';
}
else if (country == "102")
{ document.getElementById('CAprov').style.display='none';
document.getElementById('Default').style.display='none';
document.getElementById('USstate').style.display='block';
document.getElementById('NoProv').style.display='none';
}
else
{ document.getElementById('CAprov').style.display='none';
document.getElementById('USstate').style.display='none';
document.getElementById('Default').style.display='none';
document.getElementById('NoProv').style.display='block';
}
return false;
}
</script>
</HEAD>
<BODY TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0" BORDER="0">
<FORM METHOD="post">
<TABLE>
<TR><TD>Country</TD>
<TD><SELECT NAME="country" id="country" onChange="showStates(this.options[this.selectedIndex].value);">
<OPTION VALUE="101" SELECTED>Canada</OPTION>
<OPTION VALUE="102">United States</OPTION>
<OPTION VALUE="314">Germany</OPTION>
</SELECT></TD></TR>
<TR ID="Default" STYLE="display: block;"><TD>Province</TD>
<TD><SELECT NAME="provid">
<OPTION VALUE="0">Select province</OPTION>
<OPTION VALUE="139">Newfoundland/Labrador</OPTION>
<OPTION VALUE="143">Nova Scotia</OPTION>
<OPTION VALUE="134">New Brunswick</OPTION>
<OPTION VALUE="149">Prince Edward Island</OPTION>
</SELECT></TD></TR>
<TR ID="CAprov" STYLE="display: none;"><TD>Province</TD>
<TD><SELECT NAME="provid">
<OPTION VALUE="0">Select province</OPTION>
<OPTION VALUE="139">Newfoundland/Labrador</OPTION>
<OPTION VALUE="143">Nova Scotia</OPTION>
<OPTION VALUE="134">New Brunswick</OPTION>
<OPTION VALUE="149">Prince Edward Island</OPTION>
</SELECT></TD></TR>
<TR ID="USstate" STYLE="display: none;"><TD>State</TD>
<TD><SELECT NAME="provid">
<OPTION VALUE="0">Select state</OPTION>
<OPTION VALUE="102">Alabama</OPTION>
<OPTION VALUE="105">Arizona</OPTION>
<OPTION VALUE="106">Arkansas</OPTION>
<OPTION VALUE="108">California</OPTION>
</SELECT></TD></TR>
<TR ID="NoProv" STYLE="display: none;"><TD>Prov/State</TD>
<TD><INPUT TYPE="hidden" NAME="provid" VALUE="0"> </TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>

How do I hide options within a range of selects based upon changes in different select?

Related JSFiddle
<form id="calendar_form">
<div class="day1">
Day 1
<table class="selector_table">
<select name="select1">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
<select name="select2">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
</table>
</div>
<br>
<div class="day2">
Day 2
<table class="selector_table">
<select name="select3">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
<select name="select4">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
</table>
</div>
</form>
<script>
$("select").change(function(){
var selectThatWasChanged = $(this).attr('id');
var valueToRemove = $(this).val();
var dayWorkingWith = $(this).closest('.selector_table');
$('option', dayWorkingWith).not('#' + selectThatWasChanged + ' option');
$('option[value="' + valueToRemove + '"]').not('#' + selectThatWasChanged + ' option').hide();
});
</script>
I've been playing with this for an hour, and I'm frustrated. sigh. What I'm trying to accomplish is this: If PersonA is selected in Day1, he should not be available to pick again anywhere in Day1. However, PersonA should still be available on Day2.
Currently if PersonA is selected, PersonA is removed from all other selects. I tried to hone in on just the relevant selects by using the closest('.selector_table').
What am I doing wrong?
Thank you so much, in advance!
Bonus basic question: would it be tremendously more work to "undo" the change. For instance, if someone selects PersonA it hides PersonA as described, but then if PersonB is selected thereafter on the same select, it undoes that change and PersonA becomes available again?

Apply change event to the select Element, get the sibling select and disable it's matching option element.
$("select").change(function() {
const selectedOptionVal = $(this).find(":selected")[0].value;
const sibSelectEle = $(this).siblings('select');
sibSelectEle.children('option').each(function(_, option) {
if (selectedOptionVal == option.value) {
$(option).attr("disabled", true);
} else {
$(option).attr("disabled", false);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="calendar_form">
<div class="day1">
Day 1
<table class="selector_table">
<select name="select1">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
<select name="select2">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
</table>
</div>
<br>
<div class="day2">
Day 2
<table class="selector_table">
<select name="select3">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
<select name="select4">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
</table>
</div>
</form>

angularjs push function not working

Hi I am trying to make a single page angular js application but while adding to the list "schedulelist" only the latest record are getting pushed into the list and all the previous records are getting replaced by the latest record
This is my Html:
<table class="table1" cellspacing=2 cellpadding=5 border=0>
<div ng-repeat="scheduleDTO in schedules">
<tr>
<td>
<SELECT id="days" name="days" class="form-right" style="width:90%" ng-model="scheduleDTO.day_of_the_week" required>
<OPTION selected value="Monday">Monday</OPTION>
<OPTION value="Tuesday">Tuesday</OPTION>
<OPTION value="Wednesday">Wednesday</OPTION>
<OPTION value="Thursday">Thursday</OPTION>
<OPTION value="Friday">Friday</OPTION>
<OPTION value="Saturday">Saturday</OPTION>
<OPTION value="Sunday">Sunday</OPTION>
</SELECT>
</td>
<td>
<SELECT id="start_time" name="Start" class="form-right" style="width:90%" ng-model="scheduleDTO.start_time" required>
<OPTION value="1:00">01:00</OPTION>
<OPTION value="2:00">02:00</OPTION>
<OPTION value="3:00">03:00</OPTION>
<OPTION value="4:00">04:00</OPTION>
<OPTION value="5:00">05:00</OPTION>
<OPTION value="6:00">06:00</OPTION>
<OPTION value="7:00">07:00</OPTION>
<OPTION value="8:00">08:00</OPTION>
<OPTION selected value="9:00">09:00</OPTION>
<OPTION value="10:00">10:00</OPTION>
<OPTION value="11:00">11:00</OPTION>
<OPTION value="12:00">12:00</OPTION>
</SELECT>
</td>
<td>
<SELECT id="start" name="am" class="form-right" style="width:90%" ng-model="scheduleDTO.start_time_meridiem"required>
<OPTION selected value="AM">AM</OPTION>
<OPTION value="PM">PM</OPTION>
</SELECT>
<td><SELECT id="end_time"class="form-right" name="end" style="width:90%" ng-model="scheduleDTO.end_time" required>
<OPTION value="1:00">01:00</OPTION>
<OPTION value="2:00">02:00</OPTION>
<OPTION value="3:00">03:00</OPTION>
<OPTION value="4:00">04:00</OPTION>
<OPTION selected value="5:00">05:00</OPTION>
<OPTION value="6:00">06:00</OPTION>
<OPTION value="7:00">07:00</OPTION>
<OPTION value="8:00">08:00</OPTION>
<OPTION value="9:00">09:00</OPTION>
<OPTION value="10:00">10:00</OPTION>
<OPTION value="11:00">11:00</OPTION>
<OPTION value="12:00">12:00</OPTION>
</SELECT>
</td>
<td>
<SELECT id="end" name="pm" class="form-right" style="width:90%" ng-model="scheduleDTO.end_time_meridiem" required>
<OPTION value="AM">AM</OPTION>
<OPTION selected value="PM">PM</OPTION>
</SELECT>
</td>
<td><input type="button" class="addSch" ng-click="add(scheduleDTO)" value="Add Schedule" style="width:90%"> <!-- add_schedule(); -->
</td>
</tr>
</div>
</table>
<table align='center' class="table1" cellspacing=2 cellpadding=5 id="table" border=0>
<tr ng-repeat="ScheduleDTO in schedulelist">
<td>{{scheduleDTO.day_of_the_week}}</td>
<td>{{scheduleDTO.start_time}}</td>
<td>{{scheduleDTO.start_time_meridiem}}</td><td>To</td>
<td>{{scheduleDTO.end_time}}</td>
<td>{{scheduleDTO.end_time_meridiem}}</td>
<td><input type='button' value='Delete' class='delete' ng-click="remove(scheduleDTO)"></td>
</table>
This is rthe controller:
$scope.schedulelist = [
];
$scope.add = function (schedule)
{ schedule.volunteer_id="";
schedule.sid="";
$scope.schedulelist.push({"ScheduleDTO":schedule});
alert(angular.toJson($scope.schedulelist));
};
$scope.remove = function(schedule) {
var index = $scope.schedulelist.indexOf(schedule);
$scope.schedulelist.splice(index, 1);
alert(angular.toJson($scope.schedulelist));
};

Use Angular#copy to avoid reference copy in the modal,
which is the same one getting used again and data is overwritten.
$scope.schedulelist.push({"ScheduleDTO":angular.copy(schedule)});

there is only one instance of an object in javascript if you create an object there will be single reference to it, i.e if you change in the object all the values will be changed so even you are changing the value every time it all the values pushed in the array will refer to the same object.
better solution will be
$scope.add = function (scheduleValue)
{
var schedule=angular.copy(scheduleValue);
schedule.volunteer_id="";
schedule.sid="";
$scope.schedulelist.push({"ScheduleDTO":schedule});
alert(angular.toJson($scope.schedulelist));
};

The problem is in this line
$scope.schedulelist.push({"ScheduleDTO":schedule});
each team a record is pushed to the ScheduleDTO property of the object and each time new entry replaces the old one.
You can do something like this
$scope.add = function (schedule)
{ schedule.volunteer_id="";
schedule.sid="";
//Create an array of ScheduleDTO
if( $scope.schedulelist.ScheduleDTO instanceof Array == false) {
$scope.schedulelist.ScheduleDTO = []
}
//Push the schedule into the array
$scope.schedulelist.ScheduleDTO.push(schedule);
alert(angular.toJson($scope.schedulelist));
};

Use angular copy and and also change variable name from select box and list. Please check this fiddle
(function($){
try{
var demoApp = angular.module('demoApp',[]);
demoApp.controller('demoController',['$scope',function($scope){
$scope.schedulelist = [
];
$scope.add = function (scheduleObject) {
var schedule = angular.copy(scheduleObject)
schedule['volunteer_id']="";
schedule['sid']="";
$scope.schedulelist.push(
{"ScheduleDTO":schedule}
);
};
$scope.remove = function(schedule) {
var index = $scope.schedulelist.indexOf(schedule);
$scope.schedulelist.splice(index, 1);
alert(angular.toJson($scope.schedulelist));
};
}])
}catch(e){
console.log(e)
}
})(jQuery)

Adding row when dropdownlist item is selected

I have data rows named module, priority, request date, etc which is acquired dynamically on my website. Is there a way i can add a row under module named "cost center" when the value of computer request is selected from my dropdown list?
This is the code for the drop down list.
<span id="dg_form_ctl02_lbl_show_tag" style="display:inline-block;background- color:Transparent;border-color:Navy;border-width:3px;border-style:Double;font- family:Arial;font-size:12px;width:130px;">Module*</span>
</td><td>
<select name="dg_form$ctl02$DropDownList1" onchange="javascript:setTimeout('__doPostBack(\'dg_form$ctl02$DropDownList1\',\'\')', 0)" id="dg_form_ctl02_DropDownList1">
<option value="">--select one--</option>
<option value="Cellular Phone">Cellular Phone Request</option>
<option selected="selected" value="Computer">Computer Request (Up to VP Approval)</option>
<option value="Account Creation">Create Network/SAP Account</option>
<option value="Account Delete">Delete Network/SAP Account</option>
<option value="FIS">FIS</option>
<option value="FP">FP</option>
<option value="General">General Support</option>
<option value="Report">Reports</option>
<option value="SAP">SAP</option>
<option value="Web Application">Web Application</option>
</select>
</td>
</tr><tr style="background-color:White;">
<td valign="top">
this is the code i have so far for the alert
function alertMe() {
var n = document.getElementById("dg_form_ctl02_DropDownList1").value;
if (n == "Computer") {
alert ('Changed');

i think this will work
selectObject.add(option,before)
function GetSelectedValue(selectItem)
{
var index = document.getElementById(selectItem).selectedIndex;
alert("value =" + document.getElementById(selectItem).value);
alert("text =" + document.getElementById(selectItem).options[index].text);
}
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>

Categories