I have two dropdowns, Selecting the first one should change the second automatically. Both dropdowns are visible always.
I have created a fiddle to get you started. Can you help me out. Thanks!
HTML Fiddle
<select name="" id="">
<option value="">-</option>
<option value="">Apple</option>
<option value="">Orange</option>
<option value="">Cucumber</option> <!-- veg -->
<option value="">Banana</option>
<option value="">Grapes</option>
<option value="">Onion</option> <!-- veg -->
<option value="">Tomato</option> <!-- veg -->
</select>
<select name="" id="">
<option value="">-</option>
<option value="">Fruit</option>
<option value="">Vegetable</option>
</select>
Use data-* attribute to differentiate among fruit and vegetable
var category = document.getElementById('category');
document.getElementById('elements').onchange = function() {
var optionSelected = this.options[this.selectedIndex];
if (optionSelected.textContent != '-') {
if (optionSelected.dataset.val === 'veg') {
category.value = 'veg';
} else {
category.value = 'fruit';
}
} else {
category.value = '';
}
}
<select name="" id="elements">
<option value="">-</option>
<option value="">Apple</option>
<option value="">Orange</option>
<option data-val='veg' value="">Cucumber</option>
<!-- veg -->
<option value="">Banana</option>
<option value="">Grapes</option>
<option data-val='veg' value="">Onion</option>
<!-- veg -->
<option data-val='veg' value="">Tomato</option>
<!-- veg -->
</select>
<select name="" id="category">
<option value="">-</option>
<option value="fruit">Fruit</option>
<option value="veg">Vegetable</option>
</select>
If you are using jQuery it is simpler.
This is your jQuery code.
$('#item').on('change',function(){
$('#category').val($(this) .find("option:selected").attr('data-category'));
});
This is the modified HTML
<select name="" id="item">
<option value="">-</option>
<option data-category ="fruit" value="">Apple</option>
<option data-category ="fruit" value="">Orange</option>
<option data-category ="vegetable">Cucumber</option>
<option data-category ="fruit" value="">Banana</option>
<option data-category ="fruit" value="">Grapes</option>
<option data-category ="vegetable">Onion</option>
</select>
<select name="" id="category">
<option value="">-</option>
<option value="fruit">Fruit</option>
<option value="vegetable">Vegetables</option>
</select>
Related
i have problem in javascript
i make carwebsite
i need to achieve functionality as per the image
when I choose company in "make" select box,
it shows me all classes. Then I need to choose a "class" from second dropdown and it should show me all Models
now i get one code
<script type="text/javascript">
$(document).ready(function(){
$('.car').change(function()
{ getcar = $(this).val();
//console.log(getcar);
$('.subcar').hide();
$('.'+getcar).show();
}); });
// end DOM
</script>
this is select (make)
<select name="car" class="car">
<option value="0" SELECTED="SELECTED">--Choose--</option>
<option value="Acura">Acura</option>
<option value="Alfa_Romeo">Alfa Romeo</option>
<option value="Aston_Martin">Aston Martin</option>
<option value="Audi">Audi</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
<option value="Can_Am">Can Am</option>
<option value="Chery">Chery</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Citroen">Citroen</option>
<option value="Daihatsu">Daihatsu</option>
<option value="Dodge">Dodge</option>
<option value="Ducati">Ducati</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="GMC">GMC</option>
</select>
this is select (class)
<select name="branch_name" class="subcar Acura" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="CL">CL</option>
<option value="CSX">CSX</option>
<option value="EL">EL</option>
<option value="ILX">ILX</option>
<option value="ZDX">ZDX</option></select>
<select name="branch_name" class="subcar Alfa_Romeo" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="101">101</option>
<option value="156">156</option>
<option value="156CROSSWAGON">156CROSSWAGON</option>
<option value="Spider">Spider</option>
</select>
<select name="branch_name" class="subcar Aston_Martin" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="DB9">DB9</option>
<option value="Healey">Healey</option>
<option value="Vantage">Vantage</option>
</select>
how can i make third select
???
I am new in JS and I need some help. I want my 2-nd selectto appear only if the first one is already chosen, the 3-th select to appear after the second choise is done and the submit button to appear after the third choise is done.Is it possible to do that using a loop ?
<style>
select{float:left}
#month,#day,input{display:none}
</style>
<select required id='year' class='selectOption' onchange='select(this)'>
<option value=""> Select year</option>
<option value="">2016</option>
<option value="">2015</option>
<option value="">2014</option>
<option value="">2013</option>
<option value="">2012</option>
<option value="">2011</option>
<option value="">2010</option>
<option value="">2009</option>
<option value="">2008</option>
<option value="">2007</option>
</select>
<select required id='month' class='selectOption' onchange='select(this)'>
<option value=""> Select month</option>
<option value="">January</option>
<option value="">February</option>
<option value="">March</option>
<option value="">April</option>
<option value="">May</option>
<option value="">June</option>
<option value="">July</option>
<option value="">August</option>
<option value="">September</option>
<option value="">October</option>
<option value="">November</option>
<option value="">December</option>
</select>
<select required id='day' class='selectOption' onchange='select(this)'>
<option value="">Select Day</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>
<input type="submit" class='selectOption'>
</form>
function select(par) {
var i = 0;
var x = document.getElementsByClassName('selectOption');
if (par.selectedIndex !== "0" && i<x.length) {
x[i++].style.display = 'block';
}
}
</script>
you can achieve this by hiding all select but the first one on page load and displaying them one by one after selecting the previous select.
<select required id='month' class='selectOption hide' onchange='select(this)'>
<select required id='day' class='selectOption hide' onchange='select(this)'>
plunker : http://plnkr.co/edit/oKwq0q4IB5poKuUOa6oG?p=preview
Define your function like this.
function select(par) {
if (par.selectedIndex !== 0) {
par.nextElementSibling.className = "selectOption";
}
}
I am look for a way to make it so that when the user selects an item form all the select (for which the value of the option is not nil) the div with id "js-market" is shown.
This is my html code:
<form class="js-chose">
<div class="col-md-6 col-xm-12">
<div class="form-group js-select">
<label>Select a Market</label>
<select class="form-control">
<option value='' disabled selected>Chose a Market</option>
<%Item.all.each do |item|%>
<option value="<%=item.id%>"><%=item.name.capitalize%></option>
<%end%>
</select>
</div>
</div>
<div class="col-md-6 col-xm-12">
<div class="form-group">
<label>Enter Market with:</label>
<select class="form-control js-select">
<option value='' disabled selected>Chose a Company</option>
<%Company.where(user_id: current_user.id).each do |company|%>
<option value="<%=company.id%>"><%=company.name%></option>
<%end%>
</select>
</div>
</div>
</form>
In short I need to make jQuery show the div with id="js-market" when both selects have been filled by the user and get the values of the selected items and assign them to a variable.
Thank you. Please let me know if I wasn't clear enough.
Example that works with multiple select elements
Link to jsfiddle
var counter = $('.select').length;
$('.select').change(function() {
$.each($('.select'),function(i,e) {
var t = $(this);
if (t.val() == undefined || t.val() == '') {
$('#js-market').fadeOut();
return;
}
if (i+1 == counter) {
$('#js-market').fadeIn();
}
});
});
#js-market {
display: none;
}
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<div id="js-market">Lorem ipsum</div>
See this fiddle
You can do this by onchange() event in javascript. In the fiddle specified above, what I do is that, I've placed 2 select boxes and a div with id demo will be shown only if two of the select boxes are selected.
HTML
<select id="mySelect1" onchange="myFunction()">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="mySelect2" onchange="myFunction()">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div id="demo"></div>
JS
function myFunction() {
if (document.getElementById("mySelect1").value > 0 && document.getElementById("mySelect2").value > 0) {
document.getElementById("demo").style.display = "block";
} else document.getElementById("demo").style.display = "none";
}
I've multiple dropdown lists and try to use jquery to sync available options in all dropdown list...
<select class="abc" id="test1">
<option value="" selected></option>
<option value="1">RTY</option>
<option value="2">QWE</option>
<option value="3">ASD</option>
<option value="4">ZXC</option>
<option value="5">BNM</option>
</select>
<select class="abc" id="test2">
<option value="" selected></option>
<option value="1">RTY</option>
<option value="2">QWE</option>
<option value="3">ASD</option>
<option value="4">ZXC</option>
<option value="5">BNM</option>
</select>
<select class="abc" id="test3">
<option value="" selected></option>
<option value="1">RTY</option>
<option value="2">QWE</option>
<option value="3">ASD</option>
<option value="4">ZXC</option>
<option value="5">BNM</option>
</select>
If I select one item from one of the dropdown list, the selected option will be hide from others dropdownlist
<select class="abc" id="test1">
<option value="1" selected>RTY</option>
<option value=""></option>
<option value="2">QWE</option>
<option value="3">ASD</option>
<option value="4">ZXC</option>
<option value="5">BNM</option>
</select>
<select class="abc" id="test2">
<option value=""></option>
<option value="2">QWE</option>
<option value="3">ASD</option>
<option value="4">ZXC</option>
<option value="5">BNM</option>
</select>
<select class="abc" id="test3">
<option value=""></option>
<option value="2">QWE</option>
<option value="3">ASD</option>
<option value="4">ZXC</option>
<option value="5">BNM</option>
</select>
If I un-select it or select another item, the previous selected item will be show again in all dropdown list
RTY
QWE
ASD
ZXC
BNM
RTY
QWE
ASD
ZXC
BNM
RTY
QWE
ASD
ZXC
BNM
Below is my jquery code, managed to hide selected item from all dropdown lists, but not able to un-hide selected item.
$('.abc').change(function(){
$('.abc').each(function(){
if($('.abc').val() != '') {
$('option[value="'+$(this).val()+'"]').hide();
} else {
$('option[value!="'+$(this).val()+'"]').not(this).show();
}
});
});
What is wrong in my code?
You can store your current selected values in array and then just hide every of them like:
var vals = new Array();
$('.abc').change(function() {
vals = [];
$('.abc').each(function(){
var val = $(this).val();
if (val != ""){
vals.push(val);
}
$('option').show();
for (var i = 0; i< vals.length; i++){
$('option[value="' + vals[i] + '"]').hide();
}
});
});
Fiddle
What about something like this:
var $abs = $('.abc').change(function() {
$abs.children().show()
.end().not(this)
.find('[value="' + $(this).val() + '"]').hide();
});
Demo: http://jsfiddle.net/vw9z8bk1/1/
i have the following part of code of a dropdown menu
<p>
<label for='Select a Category '>Select a Category<font color="red"><strong>*</strong></font>: </label></p>
<p><div id='contactform_category_errorloc' class='err'></div>
<select name="category" class="input">
<option value="0" selected="selected">
[choose yours]
</option>
<option value="Arts and entertainment">Arts and entertainment</option>
<option value="Automotive">Automotive</option>
<option value="Business">Business</option>
<option value="Computers">Computers</option>
<option value="Games">Games</option>
<option value="Health">Health</option>
<option value="Internet">Internet</option>
<option value="News and Media">News and Media</option>
<option value="Recreation">Recreation</option>
<option value="Reference">Reference</option>
<option value="Shopping">Shopping</option>
<option value="Sports">Sports</option>
<option value="World">World</option>
</select>
</p>
i want add in drop down menu an option with value: "custom" that when i select this option appear just below a field blank as input text where i can add my personalized text so i can insert personalized category
it's possible?
maybe you mean something like this: http://jsbin.com/ubihuw/edit#javascript,html
so in php or something you can check then the "my_own_text" field ... dont know what you will exactly do ;)
js:
$('.input').change(function()
{
if($(this).attr('value') == "0") {
$('#choose_own_text').append('<input type="text" id="my_own_text" name="my_own_text" value="Please type in .." />');
} else {
$('#choose_own_text').empty();
}
});
your code ...
<p><div id='contactform_category_errorloc' class='err'></div>
<select name="category" class="input">
<option value="0" selected="selected">
[choose yours]
</option>
<option value="Arts and entertainment">Arts and entertainment</option>
<option value="Automotive">Automotive</option>
<option value="Business">Business</option>
<option value="Computers">Computers</option>
<option value="Games">Games</option>
<option value="Health">Health</option>
<option value="Internet">Internet</option>
<option value="News and Media">News and Media</option>
<option value="Recreation">Recreation</option>
<option value="Reference">Reference</option>
<option value="Shopping">Shopping</option>
<option value="Sports">Sports</option>
<option value="World">World</option>
</select>
<div id="choose_own_text"></div>
</p>