get and store values from many selects at same time

get and store values from many selects at same time - javascript

I got 7 select that I need to read their value to use it later on, but I can only read the value of the firts select, if I tried to read a second one or more, it crashes.
I need to be able to identify which selects' value is different from "" to read it, but if the value is equal to "", then ignore it.
This is my script:
$(document).ready(function() {
$("#MENU").change(function() {
$(this).find("option:selected").each(function() {
var optionValue = $(this).attr("value");
if (optionValue) {
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else {
$(".box").hide();
}
});
}).change();
});
function myFuction() {
//Getting Value
//var selValue = document.getElementById("singleSelectDD").value;
var selObj = document.getElementById("MENU");
var selValue = selObj.options[selObj.selectedIndex].value;
//Setting Value
document.getElementById("valorsel").value = selValue;
}
function ELEMENTO() {
//Getting Value
//var selValue = document.getElementById("singleSelectDD").value;
var modifica1 = document.getElementById("AREA");
var modifica2 = document.getElementById("BANCO");
var modifica3 = document.getElementById("USOCFDI");
var modifica4 = document.getElementById("DEPARTAMENTO");
var modifica5 = document.getElementById("EMPRESA");
var modifica6 = document.getElementById("GIRO");
var modifica7 = document.getElementById("NEGOCIO");
var modval1 = modifica1.options[modifica1.selectedIndex].value;
var modval2 = modifica2.option[modifica2.selectedIndex].value;
var modval3 = modifica3.option[modifica3.selectedIndex].value;
var modval4 = modifica4.option[modifica4.selectedIndex].value;
var modval5 = modifica5.option[modifica5.selectedIndex].value;
var modval6 = modifica6.option[modifica6.selectedIndex].value;
var modval7 = modifica7.option[modifica7.selectedIndex].value;
}
document.getElementById("Actualiza").addEventListener("click", function Act() {
var res = document.getElementById("modfinal").value;
document.getElementById("IDDATO").innerHTML = res;
var txt = document.getElementById("valorsel").value;
document.getElementById("RESULTADO").innerHTML = txt;
var txt2 = document.getElementById("GLOBAL").value;
document.getElementById("GLOB").innerHTML = txt2;
});
document.getElementById("submit").addEventListener("click", function Act() {
var res = document.getElementById("modfinal").value;
document.getElementById("IDDATO").innerHTML = res;
var txt = document.getElementById("valorsel").value;
document.getElementById("RESULTADO").innerHTML = txt;
var txt2 = document.getElementById("GLOBAL").value;
document.getElementById("GLOB").innerHTML = txt2;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<form name="CXP" action="Guarda_CXP2.php" method="post" target="_blank">
<h1 style="text-align: center"> Cuentas por Pagar </h1>
<p>Seleccione una opción</p>
<div>
<select name="MENU" id="MENU" onchange="myFuction()">
<option value="" selected></option>
<option value="1">Area</option>
<option value="2">Bancos</option>
<option value="3">CFDI</option>
<option value="4">Departamentos</option>
<option value="5">Empresa</option>
<option value="6">Giro Comercial</option>
<option value="7">Negocio</option>
</select><br><br>
<p>Texto Global</p>
<input type="text" name="GLOBAL" id="GLOBAL" value="" placeholder="Texto global">
</div>
<div class="1 box">
<p>Seleccione el Area deseada</p>
<select name="AREA" id="AREA" class="HIJOS" onclick="ELEMENTO()">
<option value="" selected></option>
<option value="1">AREA 1</option>
<option value="2">AREA 2</option>
<option value="3">AREA 3 </option>
</select>
</div>
<div class="2 box">
<p>Selecione el Banco deseado</p>
<select name="BANCO" id="BANCO" class="HIJOS" onchange="ELEMENTO()">
<option value="" selected></option>
<option value="1">BANCO 1</option>
<option value="2">BANCO 2</option>
<option value="3">BANCO 3</option>
</select>
</div>
<div class="3 box">
<p> Ingrese el uso de CFDI</p>
<select name="USOCFDI" id="USOCFDI" class="HIJOS" onchange="ELEMENTO()">
<option value="" selected></option>
<option value="1">CFDI 01</option>
<option value="2">CFDI 02</option>
<option value="3">CFDI 03</option>
</select>
</div>
<div class="4 box">
<p> Seleccione el Deparmaneto deseado </p>
<select name="DEPARTAMENTO" id="DEPARTAMENTO" class="HIJOS" onchange="ELEMENTO()">
<option value="" selected></option>
<option value="1">DEPARTAMENTO 1</option>
<option value="2">DEPARTAMENTO 2</option>
<option value="3">DEPARTAMENTO 3</option>
</select>
</div>
<div class="5 box">
<p> Seleccione la Empresa deseada</p>
<select name="EMPRESA" id="EMPRESA" class="HIJOS" onchange="ELEMENTO()">
<option value="" selected></option>
<option value="1">EMPRESA 1</option>
<option value="2">EMPRESA 2</option>
<option value="3">EMPRESA 3</option>
</select>
</div>
<div class="6 box">
<p> Seleccione el Giro Comercial</p>
<select name="GIRO" id="GIRO" class="HIJOS" onchange="ELEMENTO()">
<option value="" selected></option>
<option value="1">GIRO 1</option>
<option value="2">GIRO 2</option>
<option value="3">GIRO 3</option>
</select>
</div>
<div class="7 box">
<p> Ingrese el tipo de Negocio</p>
<select name="NEGOCIO" id="NEGOCIO" class="HIJOS" onchange="ELEMENTO()">
<option value="" selected></option>
<option value="1">NEGOCIO 1</option>
<option value="2">NEGOCIO 2</option>
<option value="3">NEGOCIO 3</option>
</select>
</div><br>
<div>
<input type="button" value="button" name="button">
<input type="submit" id="Actualiza" value="Actualizar" name="Actualizar" onclick="Act">
<input type="submit" id="submit" value="Agregar" name="Agregar">
</div>
<input type="text" name="valorsel" id="valorsel" class="form-control" placeholder="ID para tabla">
<input type="text" name="modfinal" id="modfinal" class="form-control" placeholder="ID para dato">
<p name="RESULTADO" id="RESULTADO"></p>
<p name="IDDATO" id="IDDATO"></p>
<p name="GLOB" id="GLOB"></p>
</form>
This is some text box I use to be able to watch if it is working:
<input type="text" name="modfinal" id="modfinal" class="form-control" placeholder="ID para dato">
https://jsfiddle.net/Ulises9663/x2z3bjyo/

Look, there's much code on your example and I don't know exactly what is the desired output and objective, but one thing I can suggest you to do to be much easier is:
Create a global variable, let's call it objSelecteds.
ELEMENTO() function can be shortened, no need to get every element every time it is called, in the HTML, pass this as parameter, then inside the function the parameter can be used to access the element directly.
With that, now use the <select> element id as key and the value of the selected option as value to insert into our objSelecteds.
That way, each select that got modiefied will have it's id and selected value saved inside objSelecteds.
Now, when you need to check the selected values, you only need to access the objSelecteds and see each value for each select.
Take a look at the code below, run the snippet and made some changes to the selects, see if you understand it and if it helps you:
let objSelecteds = {}
function ELEMENTO(self) {
let modval = self.options[self.selectedIndex].value;
objSelecteds[self.id] = modval;
console.clear()
console.log(objSelecteds)
}
function checkSelections(){
let validSelections = []
for (let key in objSelecteds){
let selectValue = objSelecteds[key]
if (key != "" && key != null){
validSelections.push(key)
}
}
console.clear()
console.log("Those selections are valid and have some value:", validSelections)
return validSelections
}
<button onclick="checkSelections()">Check selections</button>
<div class="1 box">
<p>Seleccione el Area deseada</p>
<select name="AREA" id="AREA" class="HIJOS" onclick="ELEMENTO(this)">
<option value="" selected></option>
<option value="1">AREA 1</option>
<option value="2">AREA 2</option>
<option value="3">AREA 3 </option>
</select>
</div>
<div class="2 box">
<p>Selecione el Banco deseado</p>
<select name="BANCO" id="BANCO" class="HIJOS" onchange="ELEMENTO(this)">
<option value="" selected></option>
<option value="1">BANCO 1</option>
<option value="2">BANCO 2</option>
<option value="3">BANCO 3</option>
</select>
</div>
<div class="3 box">
<p> Ingrese el uso de CFDI</p>
<select name="USOCFDI" id="USOCFDI" class="HIJOS" onchange="ELEMENTO(this)">
<option value="" selected></option>
<option value="1">CFDI 01</option>
<option value="2">CFDI 02</option>
<option value="3">CFDI 03</option>
</select>
</div>
<div class="4 box">
<p> Seleccione el Deparmaneto deseado </p>
<select name="DEPARTAMENTO" id="DEPARTAMENTO" class="HIJOS" onchange="ELEMENTO(this)">
<option value="" selected></option>
<option value="1">DEPARTAMENTO 1</option>
<option value="2">DEPARTAMENTO 2</option>
<option value="3">DEPARTAMENTO 3</option>
</select>
</div>
<div class="5 box">
<p> Seleccione la Empresa deseada</p>
<select name="EMPRESA" id="EMPRESA" class="HIJOS" onchange="ELEMENTO(this)">
<option value="" selected></option>
<option value="1">EMPRESA 1</option>
<option value="2">EMPRESA 2</option>
<option value="3">EMPRESA 3</option>
</select>
</div>
<div class="6 box">
<p> Seleccione el Giro Comercial</p>
<select name="GIRO" id="GIRO" class="HIJOS" onchange="ELEMENTO(this)">
<option value="" selected></option>
<option value="1">GIRO 1</option>
<option value="2">GIRO 2</option>
<option value="3">GIRO 3</option>
</select>
</div>
<div class="7 box">
<p> Ingrese el tipo de Negocio</p>
<select name="NEGOCIO" id="NEGOCIO" class="HIJOS" onchange="ELEMENTO(this)">
<option value="" selected></option>
<option value="1">NEGOCIO 1</option>
<option value="2">NEGOCIO 2</option>
<option value="3">NEGOCIO 3</option>
</select>
</div><br>
<div>

You can use an if statement to see if it is empty or not. See the example below:
function ELEMENTO(){
var modifica1 = document.getElementById("BANCO");
var modval1= modifica1.options[modifica1.selectedIndex].value;
var val = modval1.trim();
if(val){
document.getElementById("modfinal").value = modval1;
}
}
Hope this helps!

Related

Show dropdown value based on previous selection

Is it possible for me to only display the related data on my second dropdown option when I click it on my first dropdown? I saw a similar question on stackoverflow, but I can't get it to work. The link is available here. It works when I copy and paste the code from the solution into my system. However, when I tried it on my code, it did not work.
Here's the flow:
If DEPARTMENT is equals to Grade School then Grade & Section, dropdown will only show the Kindergarten to Grade 6 and then if DEPARTMENT is equals to Junior High School, dropdown will only shows Grade 7 to Grade 10 while if DEPARTMENT is equals to Senior High School, dropdown will only shows Grade 11 to Grade 12.
User interface:
Here's the code that I'm using..
<div class="col-12">
<div class="form-group has-icon-left">
<label for="first-name-icon">Department</label>
<div class="position-relative">
<div class="input-group mb-3" id="dept">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select category" id="dept" name="dept" required>
<option value="" disabled selected>Choose...</option>
<option value="GS">Grade School</option>
<option value="JHS">Junior High School</option>
<option value="SHS">Senior High School</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group has-icon-left">
<label for="first-name-icon">Grade & Section (for students only)</label>
<div class="position-relative">
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select operator" id="u_grdsec" name="u_grdsec">
<option value="" disabled selected>Choose...</option>
<option value="Grade 1" class="GS">Grade 1</option>
<option value="Grade 2" class="GS">Grade 2</option>
<option value="Grade 7" class="JHS">Grade 7</option>
<option value="Grade 8" class="JHS">Grade 8</option>
<option value="Grade 11" class="SHS">Grade 11</option>
<option value="Grade 12" class="SHS">Grade 12</option>
</select>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(document).on('change', '.category', function () {
var val = $(this).val().toLowerCase();
$('.operator option').hide();
$('.operator option.'+val).show();
$('.operator option.'+val+':first').attr('selected','selected').change();
});
});
</script>
Here's the screenshot of my database.

A quick fix to a minor problem
The problem is a very minor one that is difficult to spot, but very easily fixed.
The department field values in your database are uppercase, but the script tries to match to lowercase. So there is never a match and script hides all of your grade options.
To fix this problem, change the following line of code as shown:
var val = $(this).val().toLowerCase(); // incorrect
change that to:
var val = $(this).val().toUpperCase(); // correct
Yes, it is that simple! You were very close, but just needed a little help spotting the bug. ;)
You can run the snippet below to see your code working.
Addendum:
There's one other (optional) change you might want to make. Append a "removeAttr" to the following line. This will clear the previous selection when a different department is selected.
$('.operator option').hide().removeAttr("selected");
$(document).ready(function () {
$(document).on('change', '.category', function () {
// var val = $(this).val().toLowerCase(); // <----- HERE IS THE PROBLEM
var val = $(this).val().toUpperCase();
$('.operator option').hide().removeAttr("selected");
$('.operator option.'+val).show();
$('.operator option.'+val+':first').attr('selected','selected').change();
});
});
<div class="col-12">
<div class="form-group has-icon-left">
<label for="first-name-icon">Department</label>
<div class="position-relative">
<div class="input-group mb-3" id="dept">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select category" id="dept" name="dept" required>
<option value="" disabled selected>Choose...</option>
<option value="GS">Grade School</option>
<option value="JHS">Junior High School</option>
<option value="SHS">Senior High School</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group has-icon-left">
<label for="first-name-icon">Grade & Section (for students only)</label>
<div class="position-relative">
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select operator" id="u_grdsec" name="u_grdsec">
<option value="" disabled selected>Choose...</option>
<option class="GS">Kindergarten</option>
<option class="GS">Grade 1</option>
<option class="GS">Grade 2</option>
<option class="GS">Grade 3</option>
<option class="GS">Grade 4</option>
<option class="GS">Grade 5</option>
<option class="GS">Grade 6</option>
<option class="JHS">Grade 7</option>
<option class="JHS">Grade 8</option>
<option class="JHS">Grade 9</option>
<option class="JHS">Grade 10</option>
<option class="SHS">Grade 11</option>
<option class="SHS">Grade 12</option>
<!-- PHP and DB disabled for this example
<?php
$conn = OpenCon();
$sql = "SELECT * FROM `grdlvl`";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
?>
<option value="<?php echo $row['g_grdsec']; ?>" class="<?php echo $row['g_dept']; ?>"><?php echo $row['g_grdsec']; ?></option>
<?php
}
}
?>
-->
</select>
</div>
</div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I went through the previous question you had and decided to simply use the example that was created in that question - but inside a codepen that works.
https://codepen.io/Stoffe91/pen/YzYpwNO
HTML below:
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<select class="category">
<option val="price">Price</option>
<option val="weight">weight</option>
<option val="size">Size</option>
<option val="dimension">Dimension</option>
</select>
<select class="operator">
<option val="1" class="price">For Price 1</option>
<option val="2" class="price">For Price 2</option>
<option val="3" class="price">For Price 3</option>
<option val="4" class="price">For Price 4</option>
<option val="1" class="weight">For Weight 1</option>
<option val="2" class="weight">For Weight 2</option>
<option val="3" class="weight">For Weight 3</option>
<option val="4" class="weight">For Weight 4</option>
<option val="1" class="size">For Size 1</option>
<option val="2" class="size">For Size 2</option>
<option val="3" class="size">For Size 3</option>
<option val="4" class="size">For Size 4</option>
<option val="1" class="dimension">For Dimension 1</option>
<option val="2" class="dimension">For Dimension 2</option>
<option val="3" class="dimension">For Dimension 3</option>
<option val="4" class="dimension">For Dimension 4</option>
</select>
Jquery below:
$(document).ready(function () {
$(document).on('change', '.category', function () {
console.log('now');
var val = $(this).val().toLowerCase();
$('.operator option').hide();
$('.operator option.'+val).show();
$('.operator option.'+val+':first').attr('selected','selected').change();
});
});
Check this one out.
If you're having issues with it, please specify what part of it you're having issues with. Simply apply this on your current project.

jQuery - Autoselect option on selectbox doesn't function well

I have 2 select boxes. When I select an option on selectbox1, it automatically changes the corresponding value on selectbox2 regardless of value but order.
The thing is, the code is working fine until after a few tries. Then even if I change the option on selectbox1, it doesn't update the one on selectbox2.
To reproduce the issue; go through A to E, then repeat.
Code:
$(".firstSelectBox").change(function(e) {
var selectedOption = $("option:selected", this);
var idx = $(this).children().index(selectedOption)
var secChildIdx = $(".secondSelectBox").children()[idx];
$(".secondSelectBox").find(":selected").removeAttr('selected');
$(secChildIdx).attr("selected", "selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>
Also JSFiddle version: https://jsfiddle.net/153w074d/

No need for all that code, just work with selectedIndex:
$(".firstSelectBox").change(function(e) {
var selectedIndex = $(this).get(0).selectedIndex;
$(".secondSelectBox").get(0).selectedIndex = selectedIndex;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>
What happened in your original code is that, in some way, the selected attributes are being messed around. Try this: Change to each option from A to E, then start over from A, the selection stops working. Then inspect the second select to see that there are more than one option with selected="selected" attribute. Not sure what caused that tho.

#DontVoteMeDown's answer will certainly work, but the reason you're having this issue is because of the discrepancy between .prop and .attr. Both are similar, but don't refer to the same, identical underlying value.
If you change the below two lines to use the .prop value instead of .attr, your code will work. See the working code example below.
$(".secondSelectBox").find(":selected").removeAttr('selected'); // change to .removeProp
$(secChildIdx).attr("selected", "selected"); // change to .prop
$(".firstSelectBox").change(function(e) {
var selectedOption = $("option:selected", this);
var idx = $(this).children().index(selectedOption)
var secChildIdx = $(".secondSelectBox").children()[idx];
$(".secondSelectBox").find(":selected").removeProp('selected');
$(secChildIdx).prop("selected", "selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>

You can also use prop to select option.
$(".firstSelectBox").change(function(e) {
var selectedIndex = $(this).get(0).selectedIndex;
$('.secondSelectBox option:eq('+selectedIndex+')').prop('selected', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>

Select options from only one item, jquery change each

So I'm trying to build a quickbuy of products with different variants in my list of products. The product has a set of avaialble options, that are collected from the select option with jQuery, passed to a input field and then submitted to the cart. The products are listed out by a loop. When I'm at the single product page it works fine, since all the option values are required.
But once in the list of products, it gets the options from all the products and passes them to all the submit fields. How can I scope a jquery function to work on only one product at a time
In the example below, I want the field to have only the values from the select options relevant to the product. Not th evalues from both product options.
$(document).ready(function() {
$(".variant-selected")
.change(function() {
var str = "";
$("select option:selected").each(function() {
str += $(this).val() + ".";
});
$("input[name='variant']").val(str.slice(0, -1));
})
.trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
<h2>
Shirt
</h2>
<select class="variant-selected" name="select1">
<option value="1" selected>Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select class="variant-selected" name="select2">
<option value="A" selected>Large</option>
<option value="B">Medium</option>
<option value="C">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
<div id="prod2">
<h2>Jeans
</h2>
<select class="variant-selected" name="select1">
<option value="4" selected>Orange</option>
<option value="5">Teal</option>
<option value="6">Forest</option>
</select>
<select class="variant-selected" name="select2">
<option value="D" selected>Large</option>
<option value="E">Medium</option>
<option value="F">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>

here you have
$(document).ready(function() {
$(".variant-selected")
.change(function() {
var str = "";
$(this).parent().find("select option:selected").each(function() {
str += $(this).val() + ".";
});
$(this).parent().find("input[name='variant']").val(str.slice(0, -1));
})
.trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
<h2>
Shirt
</h2>
<select class="variant-selected" name="select1">
<option value="1" selected>Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select class="variant-selected" name="select2">
<option value="A" selected>Large</option>
<option value="B">Medium</option>
<option value="C">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
<div id="prod2">
<h2>Jeans
</h2>
<select class="variant-selected" name="select1">
<option value="4" selected>Orange</option>
<option value="5">Teal</option>
<option value="6">Forest</option>
</select>
<select class="variant-selected" name="select2">
<option value="D" selected>Large</option>
<option value="E">Medium</option>
<option value="F">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>

Hiding Form Options when selecting an option with jquery

I am trying to have certain options of a dropdown display/hide when an option from a proceeding dropdown menu is selected, a friend sent me this sort of format for the script but i cant figure out how to get it to work as im not the most experienced with jquery and javascript but this worked for him (he was using text links instead of options in a dropdown)
HTML
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="location" class="col-sm-4 control-label">Choose a Location</label>
<div class="col-sm-8">
<select id="selection" class="form-control">
<option selected="selected" value="none">None</option>
<option value="Dubai">Dubai</option>
<option value="bora">Bora Bora</option>
<option value="vancouver">Vancouver</option>
<option value="rio">Rio De Janeiro</option>
</select>
</div><br></br>
<label for="length" class="col-sm-4 control-label">Choose a Resort</label>
<div class="col-sm-8">
<select class="form-control">
<option id="none">None</option>
<option class="location dubai">Resort 1</option>
<option class="location dubai">Resort 2</option>
<option class="location bora">Resort 3</option>
<option class="location bora">Resort 4</option>
<option class="location vancouver">Resort 5</option>
<option class="location rio">Resort 6</option>
</select>
</div><br></br>
SCRIPT
<script src="assets/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#selection").change(function(){
var selection = $(this).val();
if(selection == "none"){
$("#none").find(".location").show();
}else{
$("#none").find(".location").not("."+selection).hide();
$("."+selection).show();
}
});
});
</script>

Here Is the complete code
HTML
<select id="firstSelect">
<option value="0" selected="selected">None...</option>
<option value="dubai">Dubai</option>
<option value="bora">Bora Bora</option>
<option value="vancouver">Vancouver</option>
<option value="rio">Rio De Janeiro</option>
</select>
<select id="secondSelect">
<option value="0" selected="selected">None...</option>
<option class="location dubai">Resort 1</option>
<option class="location dubai">Resort 2</option>
<option class="location bora">Resort 3</option>
<option class="location bora">Resort 4</option>
<option class="location vancouver">Resort 5</option>
<option class="location rio">Resort 6</option>
</select>
JScript
$(function(){
var conditionalSelect = $("#secondSelect"),
// Save possible options
options = conditionalSelect.children(".location").clone();
$("#firstSelect").change(function(){
var value = $(this).val();
conditionalSelect.children(".location").remove();
options.clone().filter("."+value).appendTo(conditionalSelect);
}).trigger("change");
});
Here is the working example

Change the value of dubai option from Dubai to 'dubai', because it is case sensitive and make it like this:
$(document).ready(function(){
$("#selection").change(function(){
var selection = $(this).val();
if(selection == "none"){
$(".location").show();
}else{
$(".location").not("."+selection).hide();
$("."+selection).show();
}
});
})
YOu can also set a ID to the select like: <select id ="locSelect" class="form-control"> and then use the selection like this $("#locSelect .location").

I want to activate a textbox on selecting other option from dropdown list only else it remains inactive

I want that when I select option "others " from dropdown list then only the text box is active else that box remains inactive... I am attaching the code please help me and change the code according to my required specification.......
<div class="width-qrtr">
<label>Type of event</label>
<select name="" id= "select">
<option value="1">Select Type</option>
<option value="2">Golf Day</option>
<option value="3">Dinner</option>
<option value="4">Dinner and Golf Day</option>
<option value="5">Other</option>
</select>
</div>
<div class="width-qrtr">
<label>If you choose 'Other'</label>
<input type="text" value="" name=""/>
</div>

Here's how you do it with pure javascript...
<select name="" id= "select" onchange="onSelectChange()">
<option value="1">Select Type</option>
<option value="2">Golf Day</option>
<option value="3">Dinner</option>
<option value="4">Dinner and Golf Day</option>
<option value="5">Other</option>
</select>
<input type="text" id="yourTextBox" disabled="disabled"/>
Then in your script:
function onSelectChange(){
var sel = document.getElementById('select');
var strUser = sel.options[sel.selectedIndex].text; //getting the selected option's text
if(strUser == 'Other'){
document.getElementById('yourTextBox').disabled = false; //enabling the text box because user selected 'Other' option.
}
}

<div class="width-qrtr">
<label>Type of event</label>
<select name="selectdrop" id= "selectdrop" onchange="return Sbox();">
<option value="1">Select Type</option>
<option value="2">Golf Day</option>
<option value="3">Dinner</option>
<option value="4">Dinner and Golf Day</option>
<option value="5">Other</option>
</select>
<input type="text" id="tbox" name="tbox" disabled />
</div>
<script lanaguage="javascript">
function Sbox()
{
if(document.getElementById("selectdrop").value=='5')
{
document.getElementById("tbox").disabled=false;
}
}
</script>
Running code : http://jsfiddle.net/cvb82wtq/

<div class="width-qrtr">
<label>Type of event</label>
<select name="" id="select">
<option value="1">Select Type</option>
<option value="2">Golf Day</option>
<option value="3">Dinner</option>
<option value="4">Dinner and Golf Day</option>
<option value="5">Other</option>
</select>
</div>
<input type='text' name='othertext' id="other" disabled='disabled'/>
Script-
$(document).ready(function () {
$("#select").change(function () {
if ($(this).find("option:selected").val() == "5") {
$("#other").removeAttr("disabled")
} else {
$("#other").attr("disabled","disabled")
}
});
});
Here's the fiddle http://jsfiddle.net/vikrant47/gywg9hue/1/

Bind an event listener to the dropdown menu. When it changes, if the option selected is "Other" (value=5), enable the textbox. Otherwise, disable the textbox.
HTML:
<div class="width-qrtr">
<label>Type of event</label>
<select name="" id= "select">
<option value="1">Select Type</option>
<option value="2">Golf Day</option>
<option value="3">Dinner</option>
<option value="4">Dinner and Golf Day</option>
<option value="5">Other</option>
</select>
</div>
<div class="width-qrtr">
<label>If you choose 'Other'</label>
<input id="textbox" disabled="true" type="text" value="" name=""/>
</div>
JS:
document.getElementById('select').addEventListener('change', function() {
if (this.value == 5) {
document.getElementById('textbox').disabled = false;
} else {
document.getElementById('textbox').disabled = true;
}
});
Here's a fiddle.

We Keep Coding

JavaScript is the programming language of the Web.

get and store values from many selects at same time - javascript

Related

Show dropdown value based on previous selection

jQuery - Autoselect option on selectbox doesn't function well

Select options from only one item, jquery change each

Hiding Form Options when selecting an option with jquery

I want to activate a textbox on selecting other option from dropdown list only else it remains inactive

Categories

Resources