Develop Reference

Select option element JavaScript Console

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>

Show/HIde class on option selection CSHTML

I am new to any front end development and am currently writing an HTML view for my job using cshtml. I want to show and hide classes within this file using JQuery, and believe I have written a function to do so. When the initial selection is made, I want to show the class which corresponds to the option value. When a change is made, no class is shown. Here is my code:
#{
ViewBag.Title = "Editor";
}
<script>
var table = function () {
var t = document.getElementById('table');
var selection = t.options[t.selectedIndex].value;
if (selection == "emp") {
$("#emp").show();
$("#itm").hide();
$("#ln").hide();
$("#mo").hide();
$("#shft").hide();
$("#twi").hide();
} else if (selection == "itm") {
$("#emp").hide();
$("#itm").show();
$("#ln").hide();
$("#mo").hide();
$("#shft").hide();
$("#twi").hide();
} else if (selection == "ln") {
$("#emp").hide();
$("#itm").hide();
$("#ln").show();
$("#mo").hide();
$("#shft").hide();
$("#twi").hide();
} else if (selection == "mo") {
$("#emp").hide();
$("#itm").hide();
$("#ln").hide();
$("#mo").show();
$("#shft").hide();
$("#twi").hide();
} else if (selection == "shft") {
$("#emp").hide();
$("#itm").hide();
$("#ln").hide();
$("#mo").hide();
$("#shft").show();
$("#twi").hide();
} else if (selection == "twi") {
$("#emp").hide();
$("#itm").hide();
$("#ln").hide();
$("#mo").hide();
$("#shft").hide();
$("#twi").show();
} else {
$("#emp").hide();
$("#itm").hide();
$("#ln").hide();
$("#mo").hide();
$("#shft").hide();
$("#twi").hide();
}
}
</script>
<h2>Edits</h2>
<select id="table" name="table" onclick="table()">
<option value="0">Select a table to edit</option>
<option value="0"></option>
<option value="emp">Employee</option>
<option value="itm">Item</option>
<option value="ln">Line</option>
<option value="mo">MO</option>
<option value="shft">Shift</option>
<option value="twi">TWI</option>
</select>
<br /><br />
<span hidden class="emp">
<select name="empid" id="empid">
<option value="0">Select Employee</option>
#foreach (var emp in ViewBag.EMP)
{
<option value="#emp.EmployeeID">#emp.EmployeeName</option>
}
</select>
</span>
<span hidden class="itm">
<select name="itmid" id="itmid">
<option value="0">Select Item</option>
#foreach (var itm in ViewBag.ITM)
{
<option value="#itm.ItemID">#itm.ItemName</option>
}
</select>
</span>
<span hidden class="ln">
<select name="lnid" id="lnid">
<option value="0">Select Line</option>
#foreach (var ln in ViewBag.LN)
{
<option value="#ln.LineID">#ln.LineName</option>
}
</select>
</span>
<span hidden class="mo">
#{int count = 0;}
<select name="bch" id="bch">
<option value="0">Select MO</option>
#foreach (var mo in ViewBag.MO)
{
<option value="#mo.NBMO">#ViewBag.fullMO[count]</option>
count += 1;
}
</select>
</span>
<span hidden class="shft">
<select name="shftid" id="shftid">
<option value="0">Select Shift</option>
#foreach (var shft in ViewBag.SHFT)
{
<option value="#shft.ShiftID">#shft.ShiftCode</option>
}
</select>
</span>
<span hidden class="twi">
#{count = 0;}
<select name="tnum" id="tnum">
<option value="0">Select TWI</option>
#foreach (var twi in ViewBag.TWI)
{
<option value="#twi.TWINumber">#ViewBag.fullTWI[count]</option>
count += 1;
}
</select>
</span>

Elements can have multiple classes so give all the spans a common class. Allows you to hide the whole class in one line
Then use the value of the top selection to create a selector to match the one you want to show
You were using ID selectors to try to target classes. A class selector is prefixed with a dot.
$('#table').change(function() {
// `this` is the select element
var value = $(this).val();
// hide all the spans
$('.select-wrap').hide();
// don't show anything if value is zero
if (value !== '0') {
// using the classes you created on spans
var classSelector = '.' + value
$('.select-wrap' + classSelector).show();
// OR Using select ID and traverse to it's parent
// $('#' + value + 'id').parent().show()
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Edits</h2>
<select id="table" name="table">
<option value="0">Select a table to edit</option>
<option value="emp">Employee</option>
<option value="itm">Item</option>
<option value="ln">Line</option>
<option value="mo">MO</option>
<option value="shft">Shift</option>
<option value="twi">TWI</option>
</select>
<br /><br />
<span hidden class="select-wrap emp">
<select name="empid" id="empid">
<option value="0">Select Employee</option>
#foreach (var emp in ViewBag.EMP)
{
<option value="#emp.EmployeeID">#emp.EmployeeName</option>
}
</select>
</span>
<span hidden class="select-wrap itm">
<select name="itmid" id="itmid">
<option value="0">Select Item</option>
#foreach (var itm in ViewBag.ITM)
{
<option value="#itm.ItemID">#itm.ItemName</option>
}
</select>
</span>
<span hidden class="select-wrap ln">
<select name="lnid" id="lnid">
<option value="0">Select Line</option>
#foreach (var ln in ViewBag.LN)
{
<option value="#ln.LineID">#ln.LineName</option>
}
</select>
</span>
<span hidden class="select-wrap mo">
#{int count = 0;}
<select name="bch" id="bch">
<option value="0">Select MO</option>
#foreach (var mo in ViewBag.MO)
{
<option value="#mo.NBMO">#ViewBag.fullMO[count]</option>
count += 1;
}
</select>
</span>
<span hidden class="select-wrap shft">
<select name="shftid" id="shftid">
<option value="0">Select Shift</option>
#foreach (var shft in ViewBag.SHFT)
{
<option value="#shft.ShiftID">#shft.ShiftCode</option>
}
</select>
</span>
<span hidden class="select-wrap twi">
#{count = 0;}
<select name="tnum" id="tnum">
<option value="0">Select TWI</option>
#foreach (var twi in ViewBag.TWI)
{
<option value="#twi.TWINumber">#ViewBag.fullTWI[count]</option>
count += 1;
}
</select>
</span>

You're using ID selectors rather than Class selectors. Try $(".emp").show() instead. Read more here.

Remember when accessing HTML elements using javascript or jquery, id’s can only be applied to one element while classes can be applied to multiple HTML elements.

Disable elements with an option using js

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>

Hide all DIVs that don't contain all specified classes

On my page I have a large number of DIVs, each DIV represents a specific product, with a series of characteristics. I'm using those characteristics as classes, so every product would start similarly to this:
<div class='classA classB classC classD classE classF'>
Product Card
</div>
Ideally on my page I'd like to have one <select> element for each class, so that when the user select a value from the dropdown, only the <div> with the corresponding class remains displayed on the page, while all the others are hidden.
Also, the check on the class has to consider ALL the classes at the same time. By this I mean that if a user selects value from 3 dropdowns, only the <div> that have ALL the 3 classes selected will be shown.
I've tried to implement this idea using javascript, with the following code:
function filterPowerInput() {
var powerInput = document.getElementById("powerInput").value;
if (powerInput == 1) {
var myClasses = document.querySelectorAll('.ph3ph'),
i = 0,
l = myClasses.length;
for (i; i < l; i++) {
myClasses[i].style.display = 'none';
}
var myClassesTwo = document.querySelectorAll('.ph1ph'),
i = 0,
l = myClassesTwo.length;
for (i; i < l; i++) {
myClassesTwo[i].style.display = 'block';
}
} else if (powerInput == 3) {
var myClasses = document.querySelectorAll('.ph1ph'),
i = 0,
l = myClasses.length;
for (i; i < l; i++) {
myClasses[i].style.display = 'none';
}
var myClassesTwo = document.querySelectorAll('.ph3ph'),
i = 0,
l = myClassesTwo.length;
for (i; i < l; i++) {
myClassesTwo[i].style.display = 'block';
}
} else {
var myClasses = document.querySelectorAll('.ph1ph'),
i = 0,
l = myClasses.length;
for (i; i < l; i++) {
myClasses[i].style.display = 'block';
}
var myClassesTwo = document.querySelectorAll('.ph3ph'),
i = 0,
l = myClassesTwo.length;
for (i; i < l; i++) {
myClassesTwo[i].style.display = 'block';
}
}
}
This example works fine for a class that can only assume 2 values, but it becomes impossible to manage as soon as a class has many more value (they could go up to 12). Also, by using similar version of the code above on different dropdowns, they will override each other, I haven't found a way yet to make them work together as I need.
I hope it's clear enough, otherwise just ask. Thanks a lot for your time as always!
(The rest of my page is a mix of PHP/HTML/Javascript)

I think this is what you meant
$(function() {
$(".sel").on("change",function() {
var classLst = ["selDiv"];
$(".sel").each(function() {
var val = this.value;
if (val) classLst.push("class"+val);
});
classLst.sort();
$(".selDiv").each(function() {
var divClassLst = $(this).attr("class");
if (divClassLst) {
$(this).toggle(divClassLst.split(" ").sort().join(".") == classLst.join("."));
}
})
}).change(); // run when loaded
});
.selDiv { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b>Note: Possible combinations: </b><i>A,B,C; D,E</i> and <i>C,D</i>
<hr/>
<select class="sel">
<option value="">Please select</option>
<option value="A" selected>A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<select class="sel">
<option value="">Please select</option>
<option value="A">A</option>
<option value="B" selected>B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<select class="sel">
<option value="">Please select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C" selected>C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<select class="sel">
<option value="">Please select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<select class="sel">
<option value="">Please select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<div class='selDiv classA classB classC'>
Product Card A B C
</div>
<div class='selDiv classD classE'>
Product Card D E
</div>
<div class='selDiv classC classD'>
Product Card C D
</div>

Something far more important than answer to your question. I know it's not an answer but I had to show the importance of this matter.
As a developer if you write a block of the same code more than once - something is not right. Why not simply writing a function that does the same procedure?
var customtog = function(cls, dis){
var myClasses = document.querySelectorAll(cls),
i = 0,
l = myClasses.length;
for (i; i < l; i++) {
myClasses[i].style.display = dis;
}
}
So look how your code is gonna look now:
Far more easier to follow and maintain.
if(powerInput == 1)
{
customtog('.ph3ph', 'none');
customtog('.ph1ph', 'block');
}
else if(powerInput == 3)
{
customtog('.ph1ph', 'none');
customtog('.ph3ph', 'block');
}
else
{
customtog('.ph1ph', 'block');
customtog('.ph3ph', 'block');
}
Update - Following #mplungjan comment
customtog('.ph3ph', powerInput==1?'none':'block');
customtog('.ph1ph', powerInput==1?'block':'none');

onChange event on two select option

is it possible to change the limit the value of the dropdown2 when the dropdown1 changes?
here is my code
<!--DROPDOWN 1-->
<p class="">From</p>
<select name="From" id="From" onChange="displayVal(this)">
<option value="any">Any</option>
<option value="none">None</option>
<option value="10000">£10,000</option>
<option value="20000">£20,000</option>
<option value="30000">£30,000</option>
<option value="40000">£40,000</option>
<option value="50000">£50,000</option>
<option value="60000">£60,000</option>
<option value="70000">£70,000</option>
<option value="80000">£80,000</option>
<option value="90000">£90,000</option>
<option value="100000">£100,000</option>
<option value="110000">£110,000</option>
<option value="120000">£120,000</option>
<option value="130000">£130,000</option>
<option value="140000">£140,000</option>
<option value="150000">£150,000</option>
<option value="150001">£150,000+</option>
</select>
<!--DROPDOWN 2-->
<p class="">To</p>
<select name="To" id="To">
<option value="any">Any</option>
<option value="none">None</option>
<option value="10000">£10,000</option>
<option value="20000">£20,000</option>
<option value="30000">£30,000</option>
<option value="40000">£40,000</option>
<option value="50000">£50,000</option>
<option value="60000">£60,000</option>
<option value="70000">£70,000</option>
<option value="80000">£80,000</option>
<option value="90000">£90,000</option>
<option value="100000">£100,000</option>
<option value="110000">£110,000</option>
<option value="120000">£120,000</option>
<option value="130000">£130,000</option>
<option value="140000">£140,000</option>
<option value="150000">£150,000</option>
<option value="150001">£150,000+</option>
</select>
I want is when I change dropdown1 to none the dropdown2 option will only show none and no other more.
And I also want is if I change the value of dropdown1 to an amount, for example 30000, dropdown2 will show only the values that are greater that 30000 including the option any.
Is there a way to do this in javascript or jQuery?
sorry. I'm new at javascript and jQuery.. Thank you in advance!

Demo: http://jsfiddle.net/LsaLA/1/
Code:
function setTo() {
var f = $('#From').val();
var t = $('#To');
t.children().hide();
if( f == 'none' ) {
t.children('[value="none"]').show();
t.val('none');
}
else if( t == 'any' ) {
t.children().show();
t.val('any');
}
else {
f = parseInt(f, 10);
t.children().each(function() {
if( $(this).val() == 'any' ) {
$(this).show();
t.val('any');
}
else {
var v = parseInt($(this).val(), 10);
if(!isNaN(v) && v >= f) {
$(this).show();
}
}
});
t.val('any');
}
}
$('#From').change(setTo);
//call it on load as well
setTo();

try this: http://jsfiddle.net/F6xnL/4/
$("#From").change(function() {
$("#To").attr("disabled", false).children().each(function() {
$(this).attr('disabled', false);
});
if ($(this).val() === 'any') return;
if ($(this).val() === 'none') {
$("#To").val("none").attr("disabled", true);
return;
}
var pound = parseInt($(this).val());
$("#To").children().each(function() {
var val = $(this).val();
if (val === 'none' || val === 'any') {
$(this).attr('disabled', true); return;
}
if (parseInt($(this).val()) <= pound) {
$(this).attr('disabled', true);
}
});
});​

$('#From').change(function(){
if($(this).val() == 'none'){
$('#To').prop('disabled', true);
}else if((true == $('#To').prop('disabled')) && ($(this).val() != 'none')){
$('#To').prop('disabled', false);
}
$('#To option').each(function(){
if($(this).val() < $('#From').val()){
$(this).hide(0);
}else{
if($(this).css('display') == 'none'){
$(this).show(0);
}
}
});
});
Untested, but this should work. I'm a bit verbose.