We Keep Coding

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>

Select option value based on another select option in dynamic table

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>

Checkvalue for display form element interfering with each other

I have a select box where one particular value is selected another field shows up.
I have no knowledge of javascript and have taken this code from somewhere.
I have this javascript in multiple places in the same form. But, my script works only on one input. If I select another from another select box, the value of previous input closes, the thing which I don't want. This will be well understood if you see the code.
The link where you can check the issue:
jsfiddle
Javascript:
function checkvalue(val) {
if (val === "NewSale")
document.getElementById('actualamt').style.display = 'block';
else
document.getElementById('actualamt').style.display = 'none';
if (val === "SchoolWearAccessories")
document.getElementById('schoolwear').style.display = 'block';
else
document.getElementById('schoolwear').style.display = 'none';
}
<form>
Product Category:
<select name="category" required onchange='checkvalue(this.value)'>
<option value="">Select Product Category</option>
<option value="School Uniforms">School Uniforms</option>
<option value="SchoolWearAccessories">School Wear Accessories</option>
<option value="Hospital Uniforms">Hospital Uniforms</option>
<option value="Corporate Uniforms">Corporate Uniforms</option>
<option value="Industrial Uniforms">Industrial Uniforms</option>
</select>
<div id="schoolwear" style="display:none;">
Sub Category:
<select name="subcategory">
<option value="">Select Product Category</option>
<option value="Uniform Sweaters">Uniform Sweaters</option>
<option value="School Belts">School Belts</option>
<option value="School Ties">School Ties</option>
<option value="Uniform Socks and Shoes">Uniform Socks and Shoes</option>
<option value="School Caps">School Caps</option>
<option value="School Bags">School Bags</option>
</select>
</div>
Tag:
<select name="producttag" onchange='checkvalue(this.value)'>
<option value="">None</option>
<option value="New">New</option>
<option value="Sale">Sale</option>
<option value="NewSale">New and Sale</option>
</select>
<div id="actualamt" style="display:none;">
Actual Amount:
<input type="number" name="actualamt" step="any" />
</div>
</form>
Help will be appreciated.

You should have different functions for each select onchange events.
I have renamed the function to checkvalueProductTag() and checkvalueCategory()
function checkvalueProductTag(val) {
if(val==="NewSale")
document.getElementById('actualamt').style.display='block';
else
document.getElementById('actualamt').style.display='none';
}
function checkvalueCategory(val){
if(val==="SchoolWearAccessories")
document.getElementById('schoolwear').style.display='block';
else
document.getElementById('schoolwear').style.display='none';
}
Check the updated fiddle
https://jsfiddle.net/6hheckao/1/

If you want both of them to be displayed on selection then simply use two different onchange functions like this
function checkvalue(val) {
if (val === "SchoolWearAccessories")
document.getElementById('schoolwear').style.display = 'block';
else
document.getElementById('schoolwear').style.display = 'none';
}
function checkvalue1(val) {
if (val === "NewSale")
document.getElementById('actualamt').style.display = 'block';
else
document.getElementById('actualamt').style.display = 'none';
}
<form>
Product Category:
<select name="category" required onchange='checkvalue(this.value)'>
<option value="">Select Product Category</option>
<option value="School Uniforms">School Uniforms</option>
<option value="SchoolWearAccessories">School Wear Accessories</option>
<option value="Hospital Uniforms">Hospital Uniforms</option>
<option value="Corporate Uniforms">Corporate Uniforms</option>
<option value="Industrial Uniforms">Industrial Uniforms</option>
</select>
<div id="schoolwear" style="display:none;">
Sub Category:
<select name="subcategory">
<option value="">Select Product Category</option>
<option value="Uniform Sweaters">Uniform Sweaters</option>
<option value="School Belts">School Belts</option>
<option value="School Ties">School Ties</option>
<option value="Uniform Socks and Shoes">Uniform Socks and Shoes</option>
<option value="School Caps">School Caps</option>
<option value="School Bags">School Bags</option>
</select>
</div>
Tag:
<select name="producttag" onchange='checkvalue1(this.value)'>
<option value="">None</option>
<option value="New">New</option>
<option value="Sale">Sale</option>
<option value="NewSale">New and Sale</option>
</select>
<div id="actualamt" style="display:none;">
Actual Amount:
<input type="number" name="actualamt" step="any" />
</div>
</form>

jQuery check what option is selected

If I have this code:
<td class="field-type">
<select id="id_virtual_as_set-0-type" name="virtual_as_set-0-type">
<option value="M">M</option>
<option value="AI" selected="selected">AS I</option>
<option value="D">D</option>
<option value="P">P</option>
<option value="A">A</option>
<option value="R"</option>
</select>
</td>
And I wish to find out which option value is selected, how can I do this via jQuery? Also the issue is that I have a handle on the <td> element and I want to be able to access the <select> from the <td> element and then check what the selected option is.

Yes.
Just try:
$("#id_virtual_as_set-0-type").val()

Here, i have created an example of how to do this.
$(document).ready(function(){
function getSelectedProperty(select){
var selectedOption = select.find("option:selected");
$("p").html("selected Value:"+selectedOption.val() + " SelectedText:" +selectedOption.html())
}
var select = $("select");
select.change(function(){
getSelectedProperty($(this));
});
getSelectedProperty(select);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class="field-type">
<select id="id_virtual_as_set-0-type" name="virtual_as_set-0-type">
<option value="M">M</option>
<option value="AI" selected="selected">AS I</option>
<option value="D">D</option>
<option value="P">P</option>
<option value="A">A</option>
<option value="R"</option>
</select>
<p></p>
</td>

There's many way to do it.
And this is how I do
$('select').on('click', function() {
console.log($(this).find('option:selected').val());
});

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>