How to make specific options to appear in select menu?

How to make specific options to appear in select menu? - javascript

I have two select fields in a program. Both select fields contain options with values 1 to 10. the code is as below:
<select id="noc">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br/>
<!--Some text---->
<select id="po">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
I want to achieve the following effect using JavaScript :
(Only for example) If the user has selected the option 8 in the first select field (id="noc"), the options below 8 (i.e. 9 and 10) should not be visible in the second select field (id="po").

You can do it with using onChange method and with querySelectorAll.
display or visibility attributes doesn't work for cross browsers. So you should recreate options.
var noc=document.getElementById("noc");
var po=document.getElementById("po");
var options=po.querySelectorAll("option");
function nochange(){
po.innerHTML="";
[...options].filter(x=>parseInt(x.value)<=parseInt(noc.value)).forEach(x=>{po.append(x)})
po.value=noc.value;
}
<select id="noc"onChange="nochange()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br/>
<!--Some text---->
<select id="po">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

You can try this, when the selected option first select (noc) changes, loop over the options in the second select (po) and hide its options whose values are greater than the value of the option selected in the first select (noc).
const noc = document.getElementById('noc');
const po = document.getElementById('po');
noc.addEventListener('change', (e) => {
[...po.children].forEach(child => {
if (Number(child.getAttribute('value')) > e.target.value) {
return child.style.display = 'none'
}
})
});
<select id="noc">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br/>
<!--Some text---->
<select id="po">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

const max = 10;
var items = [...Array(max).keys()]
var noc = document.getElementById("noc");
var po = document.getElementById("po");
items.forEach(n => {
var opt = document.createElement("select");
opt.value = n;
noc.appendChild(opt);
po.appendChild(opt);
});
noc.addEventListener("change", e => {
var selected = e.target.value;
po.querySelectorAll("option").forEach((el, index) => {
if (selected < index) {
el.style.display = "visible";
} else {
el.style.display = "none";
}
});
});
.invisible {
display: none;
}
<select id="noc">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br/>
<!--Some text---->
<select id="po">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

Related

The options do not change on the cell phone, only on the computer

I created a function in javascript, where it changes the number of options in the select according to the value that I selected in the previous select. This works normally on the computer, however when I use it on my phone and other people's, this function does not work
these are the selects:
<select class='opcoes' id="pecasDoJogo-1Auto" onchange="getValue('pecasDoJogo-1Auto')" onclick="changeQuantityOfOptions('pecasDoJogo-1Auto','pecasDoJogo-1TeleOp')">
<option value="0" >0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select class='opcoes' id="pecasDoJogo-1TeleOp" onchange="getValue('pecasDoJogo-1TeleOp')" onclick="changeQuantityOfOptions('pecasDoJogo-1TeleOp','pecasDoJogo-1Auto')">
<option value="0">0</option>
<option value="1" >1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
These are the functions I'm using:
function getValue(nameId){
return parseInt(document.getElementById(nameId).value)
}
function changeQuantityOfOptions(yourId,ReferenceId){
const quantidade = 9 - parseInt(document.getElementById(yourId).value)
const select = document.getElementById(ReferenceId)
select.innerHTML = ""
for(var i = 0; i <= quantidade; i++){
select.innerHTML += `<option value="${i}">${i}</option>`
}
}```

You should call your function only onchange, not onclick.
function getValue(nameId){
return parseInt(document.getElementById(nameId).value)
}
function changeQuantityOfOptions(yourId,ReferenceId){
const quantidade = 9 - parseInt(document.getElementById(yourId).value)
const select = document.getElementById(ReferenceId)
select.innerHTML = ""
for(var i = 0; i <= quantidade; i++){
select.innerHTML += `<option value="${i}">${i}</option>`
}
}
<select class='opcoes' id="pecasDoJogo-1Auto" onchange="changeQuantityOfOptions('pecasDoJogo-1Auto','pecasDoJogo-1TeleOp')">
<option value="0" >0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select class='opcoes' id="pecasDoJogo-1TeleOp" onchange="changeQuantityOfOptions('pecasDoJogo-1TeleOp','pecasDoJogo-1Auto')">
<option value="0">0</option>
<option value="1" >1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>

Showing selected values from drop down list

i want to select values from select drop down list and print them in <div
like if i select 0 and prints 0 automatically
like values are 0 4 5
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<div id="show_values"><!--345 --></div>

You can do it by using jquery's change event and append values on your div when changing options in this way.
$('select').on('change', function (e) {
var txt = $(this).val();
$('#show_values').append(txt+" ");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<div id="show_values"></div>

Is there any way to disable options of Select 2 which has larger values than the value of option selected in Select 1

I have two select in a form.
They are not siblings. They both has 15 options which has 1-15 values. And what I need to get is that when an option is selected from Select A which has a value of 5. Then the options of Select B which has larger value than 5 should be disabled.
This is my code:
<select name="" id="children">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
<select name="" id="child_going_school">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
So if the person selects 5 children, the school going children should not be greater than 5.

You can try the following code
jQuery( document ).ready(function($){
$('#child_going_school').change(function() {
var val1 = parseInt($('#children').val());
var val2 = parseInt($(this).val());
console.log(val1)
console.log(val2)
if(val1 != ''){
if(val2 > val1){
$(this).val(val1);
}
}
});
});
In this if the second dropdown value is greater than first then set its value as first dropdown value. I hope this helps you

First get value of first drop down and then compare and disable as below.
$(document).on('change', '#children', function(){
var fval = $(this).val();
$("#child_going_school option").each(function() {
var $thisOption = $(this);
if( $thisOption.val() > parseInt(fval)) {
$thisOption.attr("disabled", "disabled");
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="children">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
<select name="" id="child_going_school">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>

You can use filter() to get the option with higher values like:
$("#children").change(function() {
var val = +$(this).val();
$("#child_going_school option").removeAttr('disabled').filter(function(){
return +this.value > val;
}).attr('disabled','disabled')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="children">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
<select name="" id="child_going_school">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
Another option is using hide and show instead of disabling the options.
$("#children").change(function() {
var val = +$(this).val();
$("#child_going_school option").show().filter(function() {
return +this.value > val;
}).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="children">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
<select name="" id="child_going_school">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>

You can iterate through child_going_school options, trigger the change event once loaded and check with the value of children select:
$('#children').on('change', function() {
var value= this.value;
$('#child_going_school option').each(function(_, el) {
$(el).prop('disabled', parseInt(value) < parseInt(el.value));
});
});
$('#children').trigger('change');
$('#children').on('change', function() {
var value = this.value;
$('#child_going_school option').each(function() {
$(this).prop('disabled', parseInt(value) < parseInt(this.value));
});
});
$('#children').trigger('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="children">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
<select name="" id="child_going_school">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>

<script>
$(document).ready(function(){
$('#children').change(function(event){
$('#child_going_school').children().each(function(_, el) {
$(el).prop('disabled', Number($(el).val()) > event.target.value);
});
});
});
</script>

JavaScript localStorage returning 1?

I've been trying to do this simple code, although when I read the documentation for the localStorage. Im not quite understanding why it is returning 1. The below code is just a part of the HTML file. So if we for example select the id of maxAdult value 6. It will return 1. Is there a problem with my original HTML and this should be working fine or am I missing something?
First HTML
<select id="maxAdult">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select id="maxChild">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<script>
var store = document.getElementById("maxAdult");
var value = store.value;
localStorage.setItem("max", value);
</script>
Second HTML
<script>
var passen = localStorage.max;
document.write("<br><strong style='font-size: 16px'>Number of Passengers:
</strong><br>");
document.write(passen);
</script>
Output
Number of Passengers:
1

Like what #charlietfl has said in the comments, you have to actually have to listen to the change event in order to update the localStorage when the <select> element value is updated, i.e.:
var store = document.getElementById("maxAdult");
// Listen to onchange
store.addEventListener('change', function() {
localStorage.setItem("max", this.value);
});
This is because JS is not reactive in nature and the value of store does not automagically update its counterpart in localStorage.

There's nothing wrong with your localStorage, but you need to write an event handler for when the value changes. As it stands, your code is only run once when the page loads. Here's a simple example using addEventListener
<select id="maxAdult">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select id="maxChild">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<script>
var store = document.getElementById("maxAdult");
store.addEventListener("change", function() {
console.log(this.value);
});
</script>

Refresh Select Option

I am summing up some values of selectors with this code:
$('.menge_calc').change(function(){
var sum = 0;
$('select :selected').each(function() {
sum += Number($(this).val());
});
$("#sum").html(sum);
rest = 10-sum;
$("select option").each(function(){
if($(this).val()>rest){
$(this).hide();
}
if($(this).val()<=rest){
$(this).show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="menge_calc" name="menge_1" id="menge_1">
<option class="option_calc option_0" value="0">0</option>
<option class="option_calc option_1" value="1">1</option>
<option class="option_calc option_2" value="2">2</option>
<option class="option_calc option_3" value="3">3</option>
<option class="option_calc option_4" value="4">4</option>
<option class="option_calc option_5" value="5">5</option>
<option class="option_calc option_6" value="6">6</option>
<option class="option_calc option_7" value="7">7</option>
<option class="option_calc option_8" value="8">8</option>
<option class="option_calc option_9" value="9">9</option>
<option class="option_calc option_10" value="10">10</option>
</select>
<select class="menge_calc" name="menge_2" id="menge_2">
<option class="option_calc option_0" value="0">0</option>
<option class="option_calc option_1" value="1">1</option>
<option class="option_calc option_2" value="2">2</option>
<option class="option_calc option_3" value="3">3</option>
<option class="option_calc option_4" value="4">4</option>
<option class="option_calc option_5" value="5">5</option>
<option class="option_calc option_6" value="6">6</option>
<option class="option_calc option_7" value="7">7</option>
<option class="option_calc option_8" value="8">8</option>
<option class="option_calc option_9" value="9">9</option>
<option class="option_calc option_10" value="10">10</option>
</select>
<select class="menge_calc" name="menge_3" id="menge_3">
<option class="option_calc option_0" value="0">0</option>
<option class="option_calc option_1" value="1">1</option>
<option class="option_calc option_2" value="2">2</option>
<option class="option_calc option_3" value="3">3</option>
<option class="option_calc option_4" value="4">4</option>
<option class="option_calc option_5" value="5">5</option>
<option class="option_calc option_6" value="6">6</option>
<option class="option_calc option_7" value="7">7</option>
<option class="option_calc option_8" value="8">8</option>
<option class="option_calc option_9" value="9">9</option>
<option class="option_calc option_10" value="10">10</option>
</select>
<div id="sum">SUM OF SELECTED OPTIONS</div>
Sum of all fields should max be 10 and people should only be allowed to chose possible options. It works quite fine, but editing doesn't work correctly.
Let's say the options 3, 1 and 4 are firstly chosed. Now User wants to change and clicks on the last select (where 4 was chosed). He should now be able to chose between 10-3-1=6 => So 6,5,4,3,2,1,0 should be possible. But my code only alows 10-3-1-4=2 0> So 2,1,0.
How can I achieve this?

It's because you aren't including the value that is already selected.
e.g. If 2 is selected, and you are at "8". Then the max that that selectbox can select is actually 4 (Because the existing 2 is being included already).
Here's the javascript to make it work :
$('.menge_calc').change(function(){
var sum = 0;
$('select :selected').each(function() {
sum += Number($(this).val());
});
$("#sum").html(sum);
rest = 10-sum;
$("select").each(function()
{
var currentValue = Number($(this).val());
var maxValue = currentValue + rest;
$(this).children("option").each(function(){
if($(this).val()>maxValue){
$(this).hide();
}
if($(this).val()<=maxValue){
$(this).show();
}
});
});
});
And here's a JSFiddle with it working : https://jsfiddle.net/mu8cnu6j/

Develop Reference

JavaScript is the programming language of the Web.

How to make specific options to appear in select menu? - javascript

Related

The options do not change on the cell phone, only on the computer

Showing selected values from drop down list

Is there any way to disable options of Select 2 which has larger values than the value of option selected in Select 1

JavaScript localStorage returning 1?

Refresh Select Option

Categories

Resources