We Keep Coding

Hide/show loop based on selected dropdown value?

Sorry for the poor formatting. I'm on mobile.
Hello
I'm just wondering how can I make the following function into a loop?
Currently, it's just me rehashing the same thing over and over again. I have a textbox ID which goes from "example1" to "example30". So 30 textboxes. There is also a dropdown
with values from 1-30. If I select "5" from the dropdown, it should show 5 of the textboxes and hide the rest.
I currently have this:
$(document).ready(function(){
$('#containers').on('change', function() {
if (this.value == '1'){
$(".Container1").show();
$('.Container2').hide();$('.Container3').hide();$('.Container4').hide();$('.Container5').hide();$('.Container6').hide();$('.Container7').hide();$('.Container8').hide();$('.Container9').hide();$('.Container10').hide();$('.Container11').hide();$('.Container12').hide();$('.Container13').hide();$('.Container14').hide();$('.Container15').hide();$('.Container16').hide();$('.Container17').hide();$('.Container18').hide();$('.Container19').hide();$'.Container20').hide();$('.Container21').hide();$('.Container22').hide();$('.Container23').hide();$('.Container24').hide();$('.Container25').hide();$('.Container26').hide();$('.Container27').hide();$('.Container28').hide();$('.Container29').hide();$('.Container30').hide();
}
else if (this.value == '2'){
$(".Container1").show();
$(".Container2").show();
$('.Container3').hide();$('.Container4').hide();$('.Container5').hide();$('.Container6').hide();$('.Container7').hide();$('.Container8').hide();$('.Container9').hide();$('.Container10').hide();$('.Container11').hide();$('.Container12').hide();$('.Container13').hide();$('.Container14').hide();$('.Container15').hide();$('.Container16').hide();$('.Container17').hide();$('.Container18').hide();$('.Container19').hide();$'.Container20').hide();$('.Container21').hide();$('.Container22').hide();$('.Container23').hide();$('.Container24').hide();$('.Container25').hide();$('.Container26').hide();$('.Container27').hide();$('.Container28').hide();$('.Container29').hide();$('.Container30').hide();
}
else if (this.value == '3'){
$(".Container1").show();
$(".Container2").show();
$(".Container3").show();
$('.Container4').hide();$('.Container5').hide();$('.Container6').hide();$('.Container7').hide();$('.Container8').hide();$('.Container9').hide();$('.Container10').hide();$('.Container11').hide();$('.Container12').hide();$('.Container13').hide();$('.Container14').hide();$('.Container15').hide();$('.Container16').hide();$('.Container17').hide();$('.Container18').hide();$('.Container19').hide();$'.Container20').hide();$('.Container21').hide();$('.Container22').hide();$('.Container23').hide();$('.Container24').hide();$('.Container25').hide();$('.Container26').hide();$('.Container27').hide();$('.Container28').hide();$('.Container29').hide();$('.Container30').hide();
}
else if (this.value == '4'){
$(".Container1").show();
$(".Container2").show();
$(".Container3").show();
$(".Container4").show();
$('.Container5').hide();$('.Container6').hide();$('.Container7').hide();$('.Container8').hide();$('.Container9').hide();$('.Container10').hide();$('.Container11').hide();$('.Container12').hide();$('.Container13').hide();$('.Container14').hide();$('.Container15').hide();$('.Container16').hide();$('.Container17').hide();$('.Container18').hide();$('.Container19').hide();$'.Container20').hide();$('.Container21').hide();$('.Container22').hide();$('.Container23').hide();$('.Container24').hide();$('.Container25').hide();$('.Container26').hide();$('.Container27').hide();$('.Container28').hide();$('.Container29').hide();$('.Container30').hide();
}
else if (this.value == '5'){
$(".Container1").show();
$(".Container2").show();
$(".Container3").show();
$(".Container4").show();
$(".Container5").show();
$('.Container6').hide();$('.Container7').hide();$('.Container8').hide();$('.Container9').hide();$('.Container10').hide();$('.Container11').hide();$('.Container12').hide();$('.Container13').hide();$('.Container14').hide();$('.Container15').hide();$('.Container16').hide();$('.Container17').hide();$('.Container18').hide();$('.Container19').hide();$'.Container20').hide();$('.Container21').hide();$('.Container22').hide();$('.Container23').hide();$('.Container24').hide();$('.Container25').hide();$('.Container26').hide();$('.Container27').hide();$('.Container28').hide();$('.Container29').hide();$('.Container30').hide();
}
});
As you can see, this is a terrible way to do this. Quite frankly, it's embarrassing. I've tried the loop but can't figure it out

If you can change the HTML then better to add a common class to all the textbox say common and then do this,
$('#containers').on('change', function() {
$('.common').hide();
let x = $(this).val();
for(var s = 0 ; s < x ; s++)
$($('.common')[s]).show();
});
And if you cant edit the html do this,
$('#containers').on('change', function() {
$('input[id^="example"]').hide();
let x = $(this).val();
for(var s = 0 ; s < x ; s++)
$('#example'+ (s+1)).show();
});
Edit : Fiddle link if you need for ref
https://jsfiddle.net/wfgvvpv9/

Pure js solution; I have used 5 inputboxes; Kindly scale it up to 30 (as per ur case)
document.getElementById("dropDown").onchange = showHideInputBoxes;
function showHideInputBoxes() {
let chosenValue = document.getElementById("dropDown").value;
let allInputBoxes = document.getElementsByTagName("input");
for(i=0;i<allInputBoxes.length;i++) {
let inputBoxId = allInputBoxes[i].getAttribute('id');
if(inputBoxId<=chosenValue) {
allInputBoxes[i].classList.add('hide');
}
else {
allInputBoxes[i].classList.remove('hide');
}
}
}
.hide {
display:none;
}
<input id="1" type="text" value = "text of inputbox 1">
<input id="2" type="text" value = "text of inputbox 2">
<input id="3" type="text" value = "text of inputbox 3">
<input id="4" type="text" value = "text of inputbox 4">
<input id="5" type="text" value = "text of inputbox 5">
<select id="dropDown">
<option id="option-choose">choose num</option>
<option id="option-1">1</option>
<option id="option-2">2</option>
<option id="option-3">3</option>
<option id="option-4">4</option>
<option id="option-5">5</option>
</select>

<select id="containers">
<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>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select>
<div id='input-containers' style="display:none;">
<input type="text" class="input-containers Container1" value="Container1">
<input type="text" class="input-containers Container2" value="Container2">
<input type="text" class="input-containers Container3" value="Container3">
<input type="text" class="input-containers Container4" value="Container4">
<input type="text" class="input-containers Container5" value="Container5">
<input type="text" class="input-containers Container6" value="Container6">
<input type="text" class="input-containers Container7" value="Container7">
<input type="text" class="input-containers Container8" value="Container8">
<input type="text" class="input-containers Container9" value="Container9">
<input type="text" class="input-containers Container10" value="Container10">
<input type="text" class="input-containers Container11" value="Container11">
<input type="text" class="input-containers Container12" value="Container12">
<input type="text" class="input-containers Container13" value="Container13">
<input type="text" class="input-containers Container14" value="Container14">
<input type="text" class="input-containers Container15" value="Container15">
<input type="text" class="input-containers Container16" value="Container16">
<input type="text" class="input-containers Container17" value="Container17">
<input type="text" class="input-containers Container18" value="Container18">
<input type="text" class="input-containers Container19" value="Container19">
<input type="text" class="input-containers Container20" value="Container20">
<input type="text" class="input-containers Container21" value="Container21">
<input type="text" class="input-containers Container22" value="Container22">
<input type="text" class="input-containers Container23" value="Container23">
<input type="text" class="input-containers Container24" value="Container24">
<input type="text" class="input-containers Container25" value="Container25">
<input type="text" class="input-containers Container26" value="Container26">
<input type="text" class="input-containers Container27" value="Container27">
<input type="text" class="input-containers Container28" value="Container28">
<input type="text" class="input-containers Container29" value="Container29">
<input type="text" class="input-containers Container30" value="Container30">
</div>
$(document).ready(function() {
function hideAllContainers() {
//put common class for all containers
$(".input-containers").hide();
$("#input-containers").show();
}
$('#containers').on('change', function() {
hideAllContainers();
var count = parseInt(this.value);
for (i = 1; i <= count; i++) {
console.log($(".Container" + i));
$(".Container" + i).show();
}
});
});
jsfiddle can be found here

How display listbox option based on a variable value using jquery?

I have a select box with options now I want to show only those options which value id is greater than the user input value.
<select class="form-control" required="" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" hidden>Something</option>
<option value="14" hidden>Something</option>
<option value="20" hidden>Something</option>
</select>
this is my select box. User will input a value based on that i want only the options which value is greater then the user input to show. Please help me on this.

You need to use .filter() to filtering options tag. In callback of function check that value of every option is greater than user input value.
var userInput = 13;
$(".form-control > option").filter(function(){
return this.value > userInput;
}).show();
var userInput = 13;
$(".form-control > option").filter(function(){
return this.value > userInput;
}).show();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" required="" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" hidden>Something 13</option>
<option value="14" hidden>Something 14</option>
<option value="20" hidden>Something 20</option>
</select>

You cn try this:
$(document).ready(function(){
$("#txtUserInput").keyup(function(){
getUserInput(this);
});
});
function getUserInput(_this){
var userInput=parseInt($.trim($(_this).val()));
if(userInput!=null && userInput != isNaN){
$("#dtime option").each(function(){
var option=parseInt($.trim($(this).val()));
if(option!=0 && option<userInput){
$(this).css("display","none");
}
else{
$(this).css("display","block");
}
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtUserInput" />
<br/><br/>
<select class="form-control" required="" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" hidden>Something 13</option>
<option value="14" hidden>Something 14</option>
<option value="20" hidden>Something 20</option>
</select>
<br/>

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<select class="form-control" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" >Something</option>
<option value="14" >Something</option>
<option value="20" >Something</option>
</select>
<input id="inputData" value="0">
</html>
here is jquery code
$("#inputData").on('blur', function(){
var inputd = parseInt($(this).val());
$("#dtime option").each(function(){
if(parseInt($(this).val()) <= inputd ){
$(this).hide();
}
});
});

Custom search based on multiple dropdon lists

I have theese three dropdown lists filled with values:
<form action="search.php" method="post">
<p>Width</p>
<select class="form-control" name="width">
<option value="" selected="selected">Any width</option>
<option value="135">135</option>
<option value="145">145</option>
<option value="155">155</option>
<option value="165">165</option>
<option value="175">175</option>
</select>
<p>Height</p>
<select class="form-control" name="height">
<option value="" selected="selected">Any height</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
</select>
<p>Diameter</p>
<select class="form-control" name="diameter">
<option value="" selected="selected">Any diameter</option>
<option value="10">R10</option>
<option value="12">R12</option>
<option value="13">R13</option>
<option value="14">R14</option>
<option value="15">R15</option>
</select>
<input name="search" type="submit" value="Search">
</form>
What i try to achieve is to redirect the user to a custom url ( like example.com/tires/size-185-65-15 ) and there make the actual query and display the results.
Not the query is the real problem, but the redirection based on their choices.
The redirection should be based on the values they select from width, height and diameter ( mandatory all 3 values togheter).
Is there any way to achive this thing? I think maybe at javascript or jquery?

Add an id to all of your "Select" tags and then use Javascript to get their values, build a custom url and redirect to it.
<script>
function submitQuery() {
var width = document.getElementById("width").value;
var height = document.getElementById("height").value;
var diameter = document.getElementById("diameter").value;
var url = "example.com/tires/size-" + width + "-" + height + "-" + diameter;
window.location = url;
}
</script>
<form action="search.php" method="post">
<p>Width</p>
<select class="form-control" name="width" id="width">
<option value="0" selected="selected">Any width</option>
<option value="135">135</option>
<option value="145">145</option>
<option value="155">155</option>
<option value="165">165</option>
<option value="175">175</option>
</select>
<p>Height</p>
<select class="form-control" name="height" id="height">
<option value="0" selected="selected">Any height</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
</select>
<p>Diameter</p>
<select class="form-control" name="diameter" id="diameter">
<option value="0" selected="selected">Any diameter</option>
<option value="10">R10</option>
<option value="12">R12</option>
<option value="13">R13</option>
<option value="14">R14</option>
<option value="15">R15</option>
</select>
<input name="search" onclick="submitQuery()" value="Search">
</form>

A possible solution:
1) Change the submit button to a link and give it an id:
Search
2) Make a Javascript function that constructs the link:
function constructLink() {
var link = "example.com/tires/size-";
link += document.getElementsByName("width")[0].value;
link += "-" + document.getElementsByName("height")[0].value;
link += "-" + document.getElementsByName("diameter")[0].value;
document.getElementById("submitLink").href = link;
}
3) Add this JS function to the change event of all three select boxes:
<select class="form-control" name="width" onchange="constructLink();">
That should be it!

Disable text input unless a selector option is chosen

I have a selector with a list of options. One of the options is 'other' in which case the user may enter their own option in a textbox below.
How can I make the textbox disabled and greyed out only to become active when the 'other' option is selected?
<select id = "list" name="Optionlist">
<option value = "1">Option one</option>
<option value = "2">Option two</option>
<option value = "3">Option three</option>
<option value = "4">Other</option>
</select>
<br><br>
<label for="Other">Other: </label>
<input type="text" name="Other" id="otherbox"/>

$('#list').change(function() {//on change of select
$('#otherbox').prop('disabled', $('option:selected', this).val() != '4');//check if value is not other then disable
}).change();//call on change manually so on load will run the change event
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="list" name="Optionlist">
<option value="1">Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
<option value="4">Other</option>
</select>
<br>
<br>
<label for="Other">Other:</label>
<input type="text" name="Other" id="otherbox" />

Maybe a little something like this:
$(document).ready(function() {
$("#list").change(function() {
$("#otherbox").prop("disabled", this.value != "4");
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id = "list" name="Optionlist">
<option value = "1">Option one</option>
<option value = "2">Option two</option>
<option value = "3">Option three</option>
<option value = "4">Other</option>
</select>
<br><br>
<label for="Other">Other: </label>
<input type="text" name="Other" id="otherbox"/>

<html>
<head>
<body>
<select onchange="func(this)" id = "list" name="Optionlist">
<option value = "1">Option one</option>
<option value = "2">Option two</option>
<option value = "3">Option three</option>
<option value = "4">Other</option>
</select>
<br><br>
<label for="Other">Other: </label>
<input type="text" name="Other" id="otherbox" disabled/>
<script>
function func(obj){
document.getElementById('otherbox').setAttribute('disabled',true);
if(obj.value == 4)
document.getElementById('otherbox').removeAttribute('disabled');
}
</script>
</body>
</html>
An implementation without Jquery

Getting values as number from html dropdown menu with Javascript

I tried to show an alert box which content will change everytime the user pick different selection on the dropdown list.
There are two dropdown list here, but the "product" dropdown list is pointed to the same array
As you can see that I've tried to make the js but it still does not work
What I want to ask is:
How do we get values from dropdown menu?
And how do we get the values from a dropdown list as an integer, not string?
*sorry for the broken english
Here's the javascript
<script language="javascript">
function RadioCheck() {
var number = new Array('0', '20', '30', '40', '50', '60');
var selection1 = document.quiz.product1;
var selection2 = document.quiz.product2;
var amountselection1 = parseInt(document.quiz.amount1,10);
var amountselection2 = parseInt(document.quiz.amount2,10);
for (i=0; i<selection1.length; i++) {
if (selection1[i].checked == true) {
result1=number[i]*amountselection1;
}
}
for (i=0; i<selection2.length; i++) {
if (selection2[i].checked == true) {
result2=number[i]*amountselection2;
}
}
var result = (result1 + 'is the first result, and' + result2 + 'is the second result');
alert(result);
return false;
}
</script>
Here is the HTML
<form name="quiz">
<select id="product1">
<option name="product1" value="0" selected="selected"> </option>
<option name="product1" value="1">Product 1</option>
<option name="product1" value="2">Product 2</option>
<option name="product1" value="3">Product 3</option>
<option name="product1" value="4">Product 4</option>
<option name="product1" value="5">Product 5</option>
</select>
<select id="amount1">
<option name="amount1" value="0" selected="selected">0</option>
<option name="amount1" value="1">1</option>
<option name="amount1" value="2">2</option>
<option name="amount1" value="3">3</option>
<option name="amount1" value="4">4</option>
<option name="amount1" value="5">5</option>
</select>
<select id="product2">
<option name="product2" value="0" selected="selected"> </option>
<option name="product2" value="1">Product 1</option>
<option name="product2" value="2">Product 2</option>
<option name="product2" value="3">Product 3</option>
<option name="product2" value="4">Product 4</option>
<option name="product2" value="5">Product 5</option>
</select>
<select id="amount2">
<option name="amount2" value="0" selected="selected">0</option>
<option name="amount2" value="1">1</option>
<option name="amount2" value="2">2</option>
<option name="amount2" value="3">3</option>
<option name="amount2" value="4">4</option>
<option name="amount2" value="5">5</option>
</select>
<input type="submit" value="Check Answer" onClick="RadioCheck(); return false;">
</form>

Problem is you haven't declared variables result1 & result2. Also to get amount selected use document.quiz.amount1.value instead of just document.quiz.amount1, so on for amount2. Again to compare dropdown selection use selection1[i].selected instead of selection1[i].checked.
Try this code:
function RadioCheck() {
var number = new Array(0, 20, 30, 40, 50, 60); //quotes will work but not recommended for numbers
var selection1 = document.quiz.product1;
var selection2 = document.quiz.product2;
var amountselection1 = parseInt(document.quiz.amount1.value, 10); //changed
var amountselection2 = parseInt(document.quiz.amount2.value, 10); //changed
var result1 = 0, result2 = 0; //added line
for (i = 0; i < selection1.length; i++) {
if (selection1[i].selected) { //changed
result1 = number[i] * amountselection1;
}
}
for (i = 0; i < selection2.length; i++) {
if (selection2[i].selected) { //changed
result2 = number[i] * amountselection2;
}
}
var result = (result1 + 'is the first result, and ' + result2 + 'is the second result');
alert(result);
return false;
}
<form name="quiz">
<select id="product1">
<option name="product1" value="0" selected="selected"></option>
<option name="product1" value="1">Product 1</option>
<option name="product1" value="2">Product 2</option>
<option name="product1" value="3">Product 3</option>
<option name="product1" value="4">Product 4</option>
<option name="product1" value="5">Product 5</option>
</select>
<select id="amount1">
<option name="amount1" value="0" selected="selected">0</option>
<option name="amount1" value="1">1</option>
<option name="amount1" value="2">2</option>
<option name="amount1" value="3">3</option>
<option name="amount1" value="4">4</option>
<option name="amount1" value="5">5</option>
</select>
<select id="product2">
<option name="product2" value="0" selected="selected"></option>
<option name="product2" value="1">Product 1</option>
<option name="product2" value="2">Product 2</option>
<option name="product2" value="3">Product 3</option>
<option name="product2" value="4">Product 4</option>
<option name="product2" value="5">Product 5</option>
</select>
<select id="amount2">
<option name="amount2" value="0" selected="selected">0</option>
<option name="amount2" value="1">1</option>
<option name="amount2" value="2">2</option>
<option name="amount2" value="3">3</option>
<option name="amount2" value="4">4</option>
<option name="amount2" value="5">5</option>
</select>
<input type="submit" value="Check Answer" onClick="RadioCheck(); return false;">
</form>

Looks like this was already answered: Get selected value in dropdown list using JavaScript?
As for the integer values instead of strings, why not just convert? parseInt($stringVal);