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>
Related
I have input element as range for years. I can change value of year by buttons. I would like to create nested list in second select that depends on year from range input and on first select - id countrySelect.
<input type="range" id="yearRange" min="0" max="3" list="yearsDatalist" value="3"
onChange="changeYear(value)" onInput="changeYearLite(value)">
<datalist id="yearsDatalist">
<option value="0" label="1918"></option>
<option value="1" label="1936"></option>
<option value="2" label="1950"></option>
<option value="3" label="1981"></option>
</datalist>
Then I have two select elements. The first one is static - not necessary to change the values there:
<select id="countrySelect">
<option value="0">Sweden</option>
<option value="1">Germany</option>
<option value="2">USA</option>
</select>
Second select is dependent on year and on values in first select with id=countrySelect
<select id="itemSelection"></select>
I used object for values like this in some different project:
const yearsFilterDataList = {
"1918": {
"0": "Choose model",
"volvo": "Volvo",
"mercedes": "Mercedes",
"saab": "Saab"
}, ...
I would suggest using a template literal for string interpolation in a querySelector to find the label attribute on the selected option.
function changeYear (value) {
let selectedOption = document.querySelector(`option[value="${value}"]`);
let selectedYear = selectedOption.label;
let data = yearsFilterDataList[selectedYear];
// Do what you want with the car information
}
Next time try to provide and organize your code (HTML, CSS, JS) in a better way so people don't have to guess what your setup exactly is. You also didn't provide the full yearsFilterDataList object so the slider only populates the select form on the first tick.
But here is an assumed implementation:
const yearsFilterDataList = {
"1918": {
"0": "Choose model",
"volvo": "Volvo",
"mercedes": "Mercedes",
"saab": "Saab"
}
}
function changeYearLite (value) {
// ?
}
function changeYear (value) {
let selectedOption = document.querySelector(`option[value="${value}"]`);
let selectedYear = selectedOption.label;
let data = yearsFilterDataList[selectedYear];
if (!data) return console.warn('no data found')
let wrapper = document.getElementById('itemSelection');
Object.keys(data).forEach((key, index) => {
let option = document.createElement('option');
option.value = index;
option.textContent = data[key];
wrapper.appendChild(option);
})
}
<input type="range" id="yearRange" min="0" max="3" list="yearsDatalist" value="3"
onChange="changeYear(value)" onInput="changeYearLite(value)">
<datalist id="yearsDatalist">
<option value="0" label="1918"></option>
<option value="1" label="1936"></option>
<option value="2" label="1950"></option>
<option value="3" label="1981"></option>
</datalist>
<select id="countrySelect">
<option value="0">Sweden</option>
<option value="1">Germany</option>
<option value="2">USA</option>
</select>
<select id="itemSelection"></select>
I have created a fiddle where I have created an optgroup for each year-country pair, each optgroup has two elements, depending on the ids of the year and country (you can of course change the options of each optgroup, the lone reason for this kind of option definition was to ease my testing). Changing the value of yearRange or yearsDatalist triggers a call to changeOptions, which finds these elements, defines the id of the optgroup to show, then loops the optgroups and hides everything except the one that matches the id. The matching optgroup will be shown and, since any prior selection is logically invalidated, I update itemSelection.value to the value of the first child of the chosen optgroup.
Finally I call changeOptions anyway, in order to initialize a proper state even before any of the triggers are triggered.
function changeOptions() {
let yearRange = document.getElementById("yearRange").value;
let countrySelect = document.getElementById("countrySelect").value;
let id = `options-${yearRange}-${countrySelect}`;
let itemSelection = document.getElementById("itemSelection");
for (let optgroup of itemSelection.children) {
let match = optgroup.id === id;
optgroup[(match ? "remove" : "set") + "Attribute"]("hidden", "hidden");
if (match) {
itemSelection.value = optgroup.children[0].value;
}
}
}
changeOptions();
<input type="range" id="yearRange" min="0" max="3" list="yearsDatalist" value="3"
onChange="changeOptions()" onInput="changeOptions()">
<datalist id="yearsDatalist">
<option value="0" label="1918"></option>
<option value="1" label="1936"></option>
<option value="2" label="1950"></option>
<option value="3" label="1981"></option>
</datalist>
<select id="countrySelect" onchange="changeOptions()">
<option value="0">Sweden</option>
<option value="1">Germany</option>
<option value="2">USA</option>
</select>
<select id="itemSelection">
<optgroup id="options-0-0">
<option value="0-0-1">0-0-1</option>
<option value="0-0-1">0-0-2</option>
</optgroup>
<optgroup id="options-0-1">
<option value="0-1-1">0-1-1</option>
<option value="0-1-1">0-1-2</option>
</optgroup>
<optgroup id="options-0-2">
<option value="0-2-1">0-2-1</option>
<option value="0-2-1">0-2-2</option>
</optgroup>
<optgroup id="options-0-3">
<option value="0-3-1">0-3-1</option>
<option value="0-3-1">0-3-2</option>
</optgroup>
<optgroup id="options-1-0">
<option value="1-0-1">1-0-1</option>
<option value="1-0-1">1-0-2</option>
</optgroup>
<optgroup id="options-1-1">
<option value="1-1-1">1-1-1</option>
<option value="1-1-1">1-1-2</option>
</optgroup>
<optgroup id="options-1-2">
<option value="1-2-1">1-2-1</option>
<option value="1-2-1">1-2-2</option>
</optgroup>
<optgroup id="options-1-3">
<option value="1-3-1">1-3-1</option>
<option value="1-3-1">1-3-2</option>
</optgroup>
<optgroup id="options-2-0">
<option value="2-0-1">2-0-1</option>
<option value="2-0-1">2-0-2</option>
</optgroup>
<optgroup id="options-2-1">
<option value="2-1-1">2-1-1</option>
<option value="2-1-1">2-1-2</option>
</optgroup>
<optgroup id="options-2-2">
<option value="2-2-1">2-2-1</option>
<option value="2-2-1">2-2-2</option>
</optgroup>
<optgroup id="options-2-3">
<option value="2-3-1">2-3-1</option>
<option value="2-3-1">2-3-2</option>
</optgroup>
<optgroup id="options-3-0">
<option value="3-0-1">3-0-1</option>
<option value="3-0-1">3-0-2</option>
</optgroup>
<optgroup id="options-3-1">
<option value="3-1-1">3-1-1</option>
<option value="3-1-1">3-1-2</option>
</optgroup>
<optgroup id="options-3-2">
<option value="3-2-1">3-2-1</option>
<option value="3-2-1">3-2-2</option>
</optgroup>
<optgroup id="options-3-3">
<option value="3-3-1">3-3-1</option>
<option value="3-3-1">3-3-2</option>
</optgroup>
</select>
I have a dropdown list with multiple data attributes
<select class="op" id="b0">
<option
value="1"
data-type="vehicle"
data-vtype="car"
data-model="bmw"
data-engine="1"
data-owner="1"
data-year="2009"
>BMW2009 </option>
<option
value="2"
data-type="vehicle"
data-vtype="bus"
data-model="jeep"
data-engine="2"
data-owner="4"
data-year="2006"
>BMW2009 </option>
<option
value="3"
data-type="boat"
data-vtype="boat1"
data-model="boat2"
data-engine="0"
data-owner="3"
data-year="2010"
>BMW2009 </option>
There will be around 10k of the data, so I have dropdowns to filter the data
<select id="typeFilter">
<option value="vehicle">Vehicle </option>
<option value="Aeroplane">Aeroplane </option>
<option value="Boat">Boat </option>
</select>
<select id="modelFilter">
<option value="BMW">BMW </option>
<option value="Jeep">Jeep </option>
<option value="Boat2">Boat2 </option>
</select>
I want to filter by typeFilter and/or modelFilter. I used the following code
$('#modelFilter').on('change', function() {
let mtype = $(this).find("option:selected").data("model");
$("#b0").show();
$("#b0 option[data-model]:not([data-model*='" + mtype + "'])").hide();
});
$('#typeFilter').on('change', function() {
let ttype = $(this).find("option:selected").data("type");
$("#b0").show();
$("#b0 option[data-type]:not([data-type*='" + ttype + "'])").hide();
});
The method partially works, so when I select BMW, I can see only the option 3 list but for the multiple conditions with the same name it doesn't. Is there a simpler way to filter the multiple data attributes?
first you define a function,
function filter(){
//show all data
$("#b0 option").show();
//check filter by model
let mtype = $('#modelFilter').find("option:selected").data("model");
if(mtype){
$("#b0 option[data-model]:not([data-model*='" + mtype + "'])").hide();
}
//check filter by typeFilter
let ttype = $('#typeFilter').find("option:selected").data("type");
if(ttype){
$("#b0 option[data-type]:not([data-type*='" + ttype + "'])").hide();
}
}
then in each filter call this function,
$('#modelFilter,#typeFilter').on('change', function () {
filter()
})
First, the value of your filter select element is not matched with your dropdown because it is case-sensitive.
Second, you can use one single function to do your filtering.
Note: I add a option <option selected disabled>---select a option----</option> to force the user to trigger a change event.
$("#modelFilter").on("change", filter);
$("#typeFilter").on("change", filter);
function filter() {
$("#b0 option").show();
const typeFilterValue = $("#typeFilter").val();
const modelFilterValue = $("#modelFilter").val();
if(typeFilterValue!==null){
$(`#b0 option:not([data-type='${typeFilterValue}'])`).hide();
}
if(modelFilterValue!==null){
$(`#b0 option:not([data-model='${modelFilterValue}'])`).hide();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="op" id="b0">
<option selected disabled>---select a option----</option>
<option
value="1"
data-type="vehicle"
data-vtype="car"
data-model="bmw"
data-engine="1"
data-owner="1"
data-year="2009"
>
BMW2009
</option>
<option
value="2"
data-type="vehicle"
data-vtype="bus"
data-model="jeep"
data-engine="2"
data-owner="4"
data-year="2006"
>
Jeep
</option>
<option
value="3"
data-type="boat"
data-vtype="boat1"
data-model="boat2"
data-engine="0"
data-owner="3"
data-year="2010"
>
Boat
</option>
</select>
<select id="typeFilter">
<option selected disabled>---select a option----</option>
<option value="vehicle">Vehicle</option>
<option value="Aeroplane">Aeroplane</option>
<option value="Boat">Boat</option>
</select>
<select id="modelFilter">
<option selected disabled>---select a option----</option>
<option value="bmw">BMW</option>
<option value="jeep">Jeep</option>
<option value="boat2">Boat2</option>
</select>
<select class="form-control" id="prodname" name="pname" >
<option value="0" disabled="disabled" selected="selected">-- Select Product --</option>
#{
foreach(var product in (List<tbleProdcutDetail>)ViewBag.productlist)
{
<option value="#product.Id">#product.Product_Name</option>
<option hidden>#product.Quantity</option>
}
}
</select>
I want to select this option.
<option hidden>#product.Quantity</option>
I have tried this selector but could not get text.
var productunitprice = $("#prodname option").find("hidden").text();
You can use var text = $("option:selected",this).next().text() Example below.
$("#prodname").change(function() {
var text = $("option:selected",this).next().text()
console.log(text)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="prodname">
<option value="1">1</option>
<option hidden>1.1</option>
<option value="2">2</option>
<option hidden>2.2</option>
</select>
As an alternative to adding many unused and hidden options.
You can add the unit price to the relevant option directly using a data attribute for example data-unit-price.
foreach(var product in (List<tbleProdcutDetail>)ViewBag.productlist)
{
<option value="#product.Id" data-unit-price="#product.Quantity">#product.Product_Name</option>
}
Then simply read it from the selected option. In my humble opinion it is cleaner and doesn't use additional hidden option elements as storage for data belonging to other options.
$(document).ready(function() {
$("#prodname").change(function() {
var productunitprice = $("option:selected", this).data('unitPrice')
console.log(productunitprice)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="prodname" name="pname">
<option value="1" data-unit-price="5.25">product 45</option>
<option value="2" data-unit-price="12.99">product 94</option>
</select>
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)
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>