I want to select 100 from list JavaScript, I'm trying this from console
<div class="dataTables_length" id="Table_6_length">
<label>
<select name="DataTables_Table" aria-controls="DataTables_Table_6" class="form-control input-sm">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</label></div>
I'm new in JavaScript Please help me
You can loop options for your option like this
let sel = document.getElementsByName('DataTables_Table')[0];
function getSelectedOption(sel) {
var opt;
for ( var i = 0, len = sel.options.length; i < len; i++ ) {
opt = sel.options[i];
if ( opt.value == 100 ) {
break;
}
}
return opt;
}
let opt100 = getSelectedOption(sel);
console.log(opt100)
console.log(opt100.value)
let sel = document.getElementsByName('DataTables_Table')[0];
function getSelectedOption(sel) {
var opt;
for ( var i = 0, len = sel.options.length; i < len; i++ ) {
opt = sel.options[i];
if ( opt.value == 100 ) {
break;
}
}
return opt;
}
let opt100 = getSelectedOption(sel);
console.log(opt100)
console.log(opt100.value)
<div class="dataTables_length" id="Table_6_length">
<label>
<select name="DataTables_Table" aria-controls="DataTables_Table_6" class="form-control input-sm">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</label></div>
Give a Id to the select
Then it's as simple as
document.getElementById('selecter').value=100;
refer this.
you can simply use .value property for dropdown element
function selectOption(val) {
document.getElementById('dataTable').value = val;
}
<select name="DataTables_Table" id='dataTable' aria-controls="DataTables_Table_6" class="form-control input-sm">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<button onclick='selectOption("100")'>select 100</button>
<button onclick='selectOption("50")'>select 50</button>
<button onclick='selectOption("25")'>select 25</button>
Related
How do I add rounds 1, 2,3 on multiple select options i.e. Round 1 + Round 5 as selected on the image below, and display on id="total" which will be 6? I have tried but not getting the idea.
HTML form
<div class="form row">
<select class="selectpicker" multiple data-live-search="true" id="no_of_rounds">
<option value="1">Round 1</option>
<option value="2">Round 2</option>
<option value="3">Round 3</option>
<option value="4">Round 4</option>
<option value="5">Round 5</option>
<option value="6">Round 6</option>
<option value="7">Round 7</option>
<option value="8">Round 8</option>
<option value="9">Pay 1st Round - 8th Round</option>
</select>
<input id="total" type="text">
</div>
Script
<script>
document.querySelector('.form').addEventListener('change', function() {
const nr = +document.getElementById('no_of_rounds').value || 0;
var round_1 = 80;
var round_2 = 90;
var round_3 = 100;
var round_4 = 110;
document.getElementById('total').value = total;
}
}
$('select').selectpicker();
</script>
I think that this is what you are looking for:
document.querySelector('.form').addEventListener('change', function() {
let selectedValues = $('#no_of_rounds').val();
let sum = 0;
$("#no_of_rounds option:selected").each(function () {
let $this = $(this);
if ($this.length) {
sum += parseInt($this.val());
}
});
document.getElementById('total').value = sum;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form row">
<select class="selectpicker" multiple data-live-search="true" id="no_of_rounds">
<option value="1">Round 1</option>
<option value="2">Round 2</option>
<option value="3">Round 3</option>
<option value="4">Round 4</option>
<option value="5">Round 5</option>
<option value="6">Round 6</option>
<option value="7">Round 7</option>
<option value="8">Round 8</option>
<option value="9">Pay 1st Round - 8th Round</option>
</select>
<input id="total" type="text">
</div>
Here is a version pure JS that works well :
const no_of_rounds = document.querySelector("#no_of_rounds")
//listening to changes
no_of_rounds.addEventListener('change',(event) => {
//getting all checked values
const valuesSelected = no_of_rounds.selectedOptions
//summing up all the values
const sum = Array.from(valuesSelected).map(({ value }) => parseInt(value)).reduce((a, b) => a + b, 0);
//changing the value
document.querySelector("#total").value = sum
})
<div class="form row">
<select class="selectpicker" multiple data-live-search="true" id="no_of_rounds">
<option value="1">Round 1</option>
<option value="2">Round 2</option>
<option value="3">Round 3</option>
<option value="4">Round 4</option>
<option value="5">Round 5</option>
<option value="6">Round 6</option>
<option value="7">Round 7</option>
<option value="8">Round 8</option>
<option value="9">Pay 1st Round - 8th Round</option>
</select>
<input id="total" type="text">
</div>
for the row const sum = Array.from(valuesSelected).map(({ value }) => parseInt(value)).reduce((a, b) => a + b, 0); what i'm doing is :
Getting all the values with const valuesSelected = no_of_rounds.selectedOptions
Changing the type to an array to manipulate it : Array.from(valuesSelected)
Mapping the values to get only values and parsing these to Integers : map(({ value }) => parseInt(value))
Summing the values to get the total : reduce((a, b) => a + b, 0);
You Have to declare global scope variable and add the value accordingly.
Like this.
<script>
var totalValue = 0;
document.querySelector('.form').addEventListener('change', function() {
totalValue = totalValue + (document.getElementById('no_of_rounds').value || 0);
var round_1 = 80;
var round_2 = 90;
var round_3 = 100;
var round_4 = 110;
document.getElementById('total').value = totalValue;
}
}
$('select').selectpicker();
</script>
I Have 2 Multiple Select Field On My Code
I Want Make If All Selected Then Other Option Will Be Unselect And Disabled And Similarly If Other Any Field Selected Then All Option Will Unselect And Disabled
My Code Is
<select multiple name="device[]" id="device" class="form-control" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'Android\'>Android</option>
<option value=\'iPod\'>iPod</option>
<option value=\'iPad\'>iPad</option>
<option value=\'Java\'>Java</option>
<option value=\'Windows\'>Windows</option>
<option value=\'Linux\'>Linux</option>
<option value=\'Mac\'>Mac</option>
</select>
And
<select multiple name="country[]" id="device" class="form-control" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'BD\'>Bangladesh</option>
<option value=\'IN\'>India</option>
<option value=\'ID\'>Indonesia</option>
<option value=\'NG\'>Naigeria</option>
<option value=\'PK\'>Pakistan</option>
</select>
By disabling an element you say i'll not use this element, I refuse to use this elemen, so disabled elements can not get Mouse Events, so disabling is wrong way.
Instead make it visually disabled.
Here is pure JS code, because i am not like jquery ;)
<style>
select {
height:300px;
width:150px;
}
</style>
<body>
<select multiple name="device[]" id="device" class="form-control" onChange="Go()" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'Android\'>Android</option>
<option value=\'iPod\'>iPod</option>
<option value=\'iPad\'>iPad</option>
<option value=\'Java\'>Java</option>
<option value=\'Windows\'>Windows</option>
<option value=\'Linux\'>Linux</option>
<option value=\'Mac\'>Mac</option>
</select>
<select multiple name="country[]" id="device" class="form-control" onChange="Go()" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'BD\'>Bangladesh</option>
<option value=\'IN\'>India</option>
<option value=\'ID\'>Indonesia</option>
<option value=\'NG\'>Naigeria</option>
<option value=\'PK\'>Pakistan</option>
</select>
<script>
function Go(){
parentElements = document.getElementsByTagName("select");
for(var i = 0; i < parentElements.length; i++){
parentElement = parentElements[i]
children = parentElement.childNodes;
for(var j = 0; j < children.length; j++){
childNode = children[j];
if(childNode.nodeName == "OPTION" || childNode.nodeName == "option"){
if(childNode.value == "\\'ALL\\'" && childNode.selected == true){
for(var k = 0; k < children.length; k++){
if(typeof(children[k].value) !== "undefined" && k != j){
children[k].style.color = "#ccc";
children[k].style.textDecorationLine = "line-through";
children[k].selected = false;
}
if(typeof(children[k].value) !== "undefined" && k == j){
children[k].style.color = "";
children[k].style.textDecorationLine = "";
}
}
}
if(childNode.value != "\\'ALL\\'" && childNode.selected == true){
for(var k = 0; k < children.length; k++){
if(typeof(children[k].value) !== "undefined" && children[k].value == "\\'ALL\\'"){
children[k].style.color = "#ccc";
children[k].style.textDecorationLine = "line-through";
children[k].selected = false;
}
if(typeof(children[k].value) !== "undefined" && children[k].value != "\\'ALL\\'"){
children[k].style.color = "";
children[k].style.textDecorationLine = "";
}
}
}
}
}
}
}
</script>
</body>
EDIT:
How about adding an extra button to reset the menus ?
Please check this fiddle
OLD:
If you are not holding ctrl key then other options will be deselected automatically
$(document).ready(function() {
$('#device, #country').on('change', function() {
var selectedVal = $(this).val();
for (var i = 0; i < selectedVal.length; i++) {
if (selectedVal[i] === 'ALL') {
// $("#device > option").attr('disabled','disabled');
$(this).find('option').attr('disabled', 'disabled');
$(this).find('option[value=ALL]').removeAttr('disabled');
} else {
$(this).find('option[value=ALL]').attr('disabled', 'disabled');
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select multiple name="device[]" id="device" class="form-control">
<option value='ALL'>ALL</option>
<option value='Android'>Android</option>
<option value='iPod'>iPod</option>
<option value='iPad'>iPad</option>
<option value='Java'>Java</option>
<option value='Windows'>Windows</option>
<option value='Linux'>Linux</option>
<option value='Mac'>Mac</option>
</select>
<select multiple name="country[]" id="country" class="form-control">
<option value='ALL'>ALL</option>
<option value='BD'>Bangladesh</option>
<option value='IN'>India</option>
<option value='ID'>Indonesia</option>
<option value='NG'>Naigeria</option>
<option value='PK'>Pakistan</option>
</select>
$('#device option').click(function(){
var Allselected = $('#device :selected').text();
var AllselectedCountry = $('#country :selected').text();
if(Allselected =="ALL"){
$('#device option:not(:selected)').addClass('ashClass');
}
else if (Allselected !="ALL"){
$('#device option:first-child').css('color', '#ccc');
$('#device option:not(:selected)').removeClass('ashClass');
}
});
$('#country option').click(function(){
var AllselectedCountry = $('#country :selected').text();
if(AllselectedCountry =="ALL"){
$('#country option:not(:selected)').addClass('ashClass');
}
else if (AllselectedCountry !="ALL"){
$('#country option:first-child').css('color', '#ccc');
$('#country option:not(:selected)').removeClass('ashClass');
}
});
.ashClass {
color: #ccc;
}
.blackClass {
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select multiple name="device[]" id="device" class="form-control" >
<option value=\'ALL\' >ALL</option><option value=\'Android\'>Android</option><option value=\'iPod\'>iPod</option><option value=\'iPad\'>iPad</option><option value=\'Java\'>Java</option><option value=\'Windows\'>Windows</option><option value=\'Linux\'>Linux</option><option value=\'Mac\'>Mac</option> </select>
<select multiple name="country[]" id="country" class="form-control" >
<option value=\'ALL\' >ALL</option><option value=\'BD\'>Bangladesh</option><option value=\'IN\'>India</option><option value=\'ID\'>Indonesia</option><option value=\'NG\'>Naigeria</option><option
value=\'PK\'>Pakistan</option></select>
Updated the codes,Hope this one resolves your problem.
Is this what you are asking?
Thanks for all answers, help. Unfortunately i have a new problem. I edited the script a little bit. Now i added 2 new values (named:64) to 2 new options. With these options, i want to disable the options classed -> "test". The code actually works, but now, when i added this new code, the previous code is not working. I think the problem is that i added 2 classes to 1 option, but i am not sure, and i dont know any other way to fix it. I know my troubles are really ridiculous, but i am new in js.
<div class="config">
<select onchange="yesnoCheck(this);">
<option>Not selected</option>
<option value="1151">Intel® Pentium® Processor G4560 3.5 Ghz</option>
<option value="1151">Intel® Core® i3-7300 4 Ghz</option>
<option value="1151">Intel® Core® i5-7500 3.4 Ghz</option>
<option value="AM3">AMD FX-Series FX-6300 3.5Ghz</option>
<option value="AM3">AMD FX-Series FX-8300 3.3Ghz</option>
<option value="AM3">AMD FX-Series FX-8320 3.5Ghz</option>
</select>
<script>
function yesnoCheck(that) {
if (that.value == "1151") {
var option = document.querySelectorAll('option.intel'),
i = 0,
len = option.length;
for (; i < len; i++) {
option[i].disabled = true;
}
var option2 = document.querySelectorAll('option.amd'),
i = 0,
len = option2.length;
for (; i < len; i++) {
option2[i].disabled = false;
}
}
else if (that.value == "AM3") {
var option = document.querySelectorAll('option.amd'),
i = 0,
len = option.length;
for (; i < len; i++) {
option[i].disabled = true;
}
var option2 = document.querySelectorAll('option.intel'),
i = 0,
len = option2.length;
for (; i < len; i++) {
option2[i].disabled = false;
}
}
}
</script>
</div>
<div class="config">
<select onchange="yesnoCheck(this);">
<option>Not selected</option>
<option>Kingston HyperX FURY 8GB</option>
<option>Kingston HyperX FURY 16GB</option>
<option>Kingston HyperX FURY 32GB (2x16GB)</option>
<option value="64">Kingston HyperX FURY 64GB (4x16GB)</option>
</select>
<script>
function yesnoCheck(that) {
if (that.value == "64") {
var option = document.querySelectorAll('option.test'),
i = 0,
len = option.length;
for (; i < len; i++) {
option[i].disabled = true;
}
}
}
</script>
</div>
<div class="config">
<select onchange="yesnoCheck(this);">
<option>Not selected</option>
<option class="intel">ASRock B250M-HDV</option>
<option class="intel">ASUS Z170-K</option>
<option class="intel">GIGABYTE GA-B250M-DS3H</option>
<option class="amd">GIGABYTE GA-970A-UD3P</option>
<option class="amd">GIGABYTE GA-990FXA-UD3 R5 </option>
<option class="test" class="amd">MSI 970A SLI Krait Edition</option>
<option class="test" class="amd">ASUS CROSSHAIR V FORMULA-Z</option>
</select>
</div>
When you select element by class, you have to response an array.
To disable all elements, you should disable for all in the array like this :
replace :
document.getElementsByClassName('amd').disabled = true;
to :
var items = document.getElementsByClassName('amd');
for(var i = 0; i < items.length; i++ ){
items[i].disabled = true;
}
Try this:
<div class="config">
<select onchange="yesnoCheck(this);">
<option value="">Not selected</option>
<option value="1151">Intel® Pentium® Processor G4560 3.5 Ghz</option>
<option value="1151">Intel® Core® i3-7300 4 Ghz</option>
<option value="1151">Intel® Core® i5-7500 3.4 Ghz</option>
<option value="AM3">AMD FX-Series FX-6300 3.5Ghz</option>
<option value="AM3">AMD FX-Series FX-8300 3.3Ghz</option>
<option value="AM3">AMD FX-Series FX-8320 3.5Ghz</option>
</select>
<script>
function yesnoCheck(that) {
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
if (op[i].className == "amd" && that.value == "1151") {
op[i].disabled = true
} else {
op[i].disabled = false;
}
}
}
</script>
</div>
<div class="config">
<select id="foo">
<option class="">Not selected</option>
<option class="intel">ASRock B250M-HDV</option>
<option class="intel">ASUS Z170-K</option>
<option class="intel">GIGABYTE GA-B250M-DS3H</option>
<option class="amd">GIGABYTE GA-970A-UD3P</option>
<option class="amd">GIGABYTE GA-990FXA-UD3 R5 </option>
<option class="amd">MSI 970A SLI Krait Edition</option>
<option class="amd">ASUS CROSSHAIR V FORMULA-Z</option>
</select>
</div>
i got a form with a select form elements for month.
<select id="month" name="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option>Mar
<option>Apr
<option>May
<option>Jun
<option>Jul
<option>Aug
<option>Sept
<option>Oct
<option>Nov
<option>Dec
</select>
How do i use javascript to get compare the selected value. for example if i select Feb, the javascript will pop up "you selected feb"
var monthSelect = document.getElementById("month")
var opt = monthSelect.options[monthSelect.selectedIndex]
if(opt.text == "Feb")
{
alert("Feb selected")
return false
}
JSFiddle: https://jsfiddle.net/ebrnh047/
Your html:
<select id="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
</select>
Try:
var month = document.getElementById("month");
month.onchange = function() {
if (month.value == "Feb") {
alert("Feb selected");
}
}
This is a way to do it with JavaScript only:
First, your HTML:
<select id="month" name="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
Then, your script:
var monthSelect = document.getElementById("month");
monthSelect.onchange = function(){
var thisValue = this.value;
alert(thisValue);
};
This is the fiddle: https://jsfiddle.net/16sn90tp/
Make sure you execute this code on document ready event( window.onload )
var monthSelect = document.getElementById("month")
monthSelect.onchange = function() {
var opt = monthSelect.options[monthSelect.selectedIndex]
if (opt.text == "Feb") {
alert("Feb selected")
}
}
<select id="month" name="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option>Mar
<option>Apr
<option>May
<option>Jun
<option>Jul
<option>Aug
<option>Sept
<option>Oct
<option>Nov
<option>Dec
</select>
Jan Feb
function myFunction() {
var monthSelect = document.getElementById("month").value;
if (monthSelect == "Feb") {
alert("Feb selected");
return false;
}
}
<select id="month" name="month" onchange="myFunction()">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
</select>
Hi add at first a class called "month" to all of your option tags and one class "monthList" to the select like for example this:
<select class="monthList">
<option class="month">Jan</option>
<option class="month">Feb</option>
<option class="month">Mar</option>
...
</select>
After this you need a little bit of JQuery:
$(".monthList .month").click(function(){
var selectedMonth = $(this).text();
var showText = "you selected " + selectedMonth;
alert(showText);
});
Try this, it should work.
In the following HTML code I would like to realize the following with JavaScript. When the user selects Audi, he has only the option to select application 2 (application 1 has to disappear in this case).
<select>
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="app1">application 1</option>
<option value="app2">application 2</option>
</select>
I wrote the code here.
html:
<select>
<option id="app1" value="volvo">Volvo</option>
<option id="app2" value="audi">Audi</option>
</select>
<select>
<option value="app1">application 1</option>
<option value="app2">application 2</option>
</select>
js:
var selections = document.getElementsByTagName('select');
selections[0].onchange = carSelection;
function carSelection(e) {
var first = selections[0];
var id = first.options[first.selectedIndex].id;
var second = selections[1];
var j = 0;
while (second.options[j]) {
second.options[j].disabled = (second.options[j].value != id );
if (second.options[j].value == id)
second.selectedIndex = j;
j++;
}
}
http://jsfiddle.net/U4y2J/3/
Automatically deselect application 1 when Audi is selected.
http://jsfiddle.net/KQMLQ/1/
HTML
<select id="1">
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select>
<select id="2">
<option value="app1">application 1</option>
<option value="app2">application 2</option>
</select>
jQuery
$("#1").click(function() {
if($("#1").val() === 'volvo') {
$("#2").find('option[value="app1"]').removeAttr('disabled');
}
if($("#1").val() === 'audi') {
$("#2").find('option[value="app1"]').attr('disabled', 'disabled').removeAttr('selected');
$("#2").find('option[value="app2"]').removeAttr('disabled');
}
});
HTML:
<select id="1">
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select>
<select id="2">
<option id="2a" value="app1">application 1</option>
<option id="2b" value="app2">application 2</option>
</select>
Javascript:
<script type="text/javascript">
document.getElementById("1").onchange = change;
function change(){
var s_a = document.getElementById("1");
var car = s_a.options[s_a.selectedIndex].value;
var s_b = document.getElementById("2");
if(car === "audi"){
s_b.options["2b"].disabled = true ;
s_b.options["2a"].selected = true;
}
else {
s_b.options["2b"].disabled = false ;
}
}
</script>
And link to fiddler
Here is a jQuery version DEMO
where I remove the option when the select is audi - it is removed based on values so you can have as many options you want surrounding the option to remove
var opts=[];
$(function() {
$("#sel2 option").each(function(){ // save all options
var opt = {};
opt.value=this.value;
opt.text=this.text;
opts.push(opt);
});
$("#sel1").on("change",function() { // restore relevant options
var sel = $("#sel2");
sel.empty();
var val = $(this).val();
$.each(opts,function(i,opt) {
if (val == "audi" && opt.value=="app2") return;
sel.append('<option value="'+opt.value+'">'+opt.text+'</option>');
});
});
});