Working on a multi dropdown, where the first dropdown shows a second dropdown depending on the selection and second dropdown selection returns a relevant message. So far working fine in Chrome / FF but no luck in Safari/iOS.
$(function(){
$('#groups').on('change', function(){
var val = $(this).val();
var sub = $('#sub_groups');
$('option', sub).filter(function(){
if (
$(this).attr('data-group') === val
|| $(this).attr('data-group') === 'SHOW'
) {
if ($(this).parent('span').length) {
$(this).unwrap();
}
} else {
if (!$(this).parent('span').length) {
$(this).wrap( "<span>" ).parent().hide();
}
}
});
});
$('#groups').trigger('change');
});
$(function() {
$('#sub_groups').change(function(){
$('.messages').hide();
$('#' + $(this).val()).show();
});
});
HTML:
<style>
.messages {color: #000; display: none;}
</style>
<select id="groups">
<option value='0'>Select 1</option>
<option value='zone1'>main group 1</option>
<option value='zone2'>main group 2</option>
<option value='zone3'>main group 3</option>
</select>
<select id="sub_groups">
<option data-group='SHOW' value='0'>Select 2</option>
<option data-group='zone1' value='message1'>option 1 </option>
<option data-group='zone1' value='message1'>option 2 </option>
<option data-group='zone2' value='message2'>option 3 </option>
<option data-group='zone2' value='message2'>option 4 </option>
<option data-group='zone3' value='message3'>option 5 </option>
<option data-group='zone3' value='message4'>option 6 </option>
</select>
<div class="output">
<div id="message1" class="messages">message 1</div>
<div id="message2" class="messages">message 2</div>
<div id="message3" class="messages">message 3</div>
<div id="message4" class="messages">message 4</div>
</div>
Any suggestions would be much appreciated, thanks.
Related
I have 3 dropdown.
1)Country
2)State
3)City
I created 3 dropdown,that having conditions,
=>IF country is not selected,other 2 drop down remain disabled.
=>After country is select , only state dropdown will enable.
=>State and City shown accordingly their country.
Are you able to correct my javascript?I think there is only something wrong in JAvascript code !!!
Here is the code:
<script>
$(function(){
var $supcat = $("#selectCountry"),
$cat = $("#selectState"),
$subcat = $(".subcat");
$supcat.on("change",function(){
var _rel = $(this).val();
$cat.find("option").attr("style","");
$cat.val("");
if(!_rel) return $cat.prop("disabled",true);
$cat.find("[rel~='"+_rel+"']").show();
$cat.prop("disabled",false);
});
$cat.on("change",function(){
var _rel = $(this).val();
$subcat.find("option").attr("style","");
$subcat.val("");
if(!_rel) return $subcat.prop("disabled",true);
$subcat.find("[rel~='"+_rel+"']").show();
$subcat.prop("disabled",false);
});
});
</script>
subcat option{
display:none;
}
.subcat option.label{
display:block;
}
<div class="col-md-auto" id="countryDiv">
<select class="custom-select" id="selectCountry" name="selectCountry">
<option disabled selected="">-Counrty-</option>
<option value="0">In</option>
<option value="1">US</option>
<option value="2">UK</option>
</select>
</div>
<div class="col-md-auto" id="stateDiv">
<select class="custom-select" id="selectState" name="selectState" class="subcat" disabled="disabled">
<option disabled selected="">-State-</option>
<option rel="0" value="00">gujarat</option>
<option rel="0" value="01">Maharashtra</option>
<option rel="1" value="10">Us state -1</option>
<option rel="1" value="11">Us state -2</option>
<option rel="2" value="20">Uk state -1</option>
<option rel="2" value="21">Uk state -1</option>
</select>
</div>
<div class="col-md-auto" id="cityDiv">
<select class="custom-select" id="selectCity" name="selectCity" class="subcat" disabled="disabled">
<option disabled selected="">-City-</option>
<option rel="00" value="000">Rajkot</option>
<option rel="00" value="001">Pbr</option>
<option rel="01" value="001">Mumbai</option>
<option rel="01" value="001">goregav</option>
<option rel="10" value="110">Us city 1</option>
<option rel="10" value="111">Us city 2</option>
<option rel="20" value="220">Uk city 1</option>
<option rel="20" value="221">Uk city 2</option>
</select>
</div>
jQuery Dependent DropDown List
Please try this and let me know if you find any issue
Working JS Fiddle here.
var $select1 = $( '#select1' ),
$select2 = $( '#select2' ),
$options = $select2.find( 'option' );
$select1.on( 'change', function() {
$select2.html( $options.filter( '[value="' + this.value + '"]' ) );
} ).trigger( 'change' );
option {
margin: 0.5em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-6">
<select class="form-control" name="select1" id="select1">
<option value="1">India</option>
<option value="2">USA</option>
<option value="3">Russia</option>
</select>
</div>
<div class="col-xs-6">
<select class="form-control" name="select2" id="select2">
<option value="1">Gujarat</option>
<option value="1">Karnataka</option>
<option value="1">Delhi</option>
<option value="2">Texas</option>
<option value="2">California</option>
<option value="3">Balakhna<option>
</select>
</div>
I have two comboboxs and one button in multiple divs. I need to enable the button when the two comboboxs change. This is what I have currently as a Fiddle:
$size=$('select[name=size]');
$gender=$('select[name=gender]');
var op='';
var ep='';
$size.change(function() {
op =$(this).val();
myFunction(op,ep);
});
$gender.change(function() {
ep =$(this).val();
myFunction(op,ep);
});
function myFunction(p1, p2) {
if(p1 !='' && p2!='') {
$('.nextbutton1').prop('disabled',false);
} else {
$('.nextbutton1').prop('disabled', true);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="someclass">
<img src="onepic.png">
<select id="size" name="size">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<select id="gender" name="gender">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<button class="nextbutton1">button</button>
</div>
<div class="someclass">
<img src="twopic.png">
<select id="size" name="size">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<select id="gender" name="gender">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<button class="nextbutton1">button</button>
</div>
but when I change the div, the button from the second div is already enabled. How can I reset the variables from the script?
Container
- Combobox1
- Combobox2
- NextButton
Container
- Combobox1
- Combobox2
- NextButton
Loop through Containers and set event listeners for Comboboxes inside each Container separately
$('.someclass').each(function () {
setOnComboboxChange($(this));
});
function setOnComboboxChange($container) {
// Use var keyword to create functional scope variables
var $size = $container.find('select[name=size]');
var $gender = $container.find('select[name=gender]');
var $nextBtn = $container.find('.nextbutton1');
var op = '';
var ep = '';
$size.change(function () {
op = $(this).val();
myFunction(op, ep);
});
$gender.change(function () {
ep = $(this).val();
myFunction(op, ep);
});
function myFunction(p1, p2) {
if (p1 != '' && p2 != '') {
$nextBtn.prop('disabled', false);
} else {
$nextBtn.prop('disabled', true);
}
}
}
Demo on Codepen
just another solution,
you can assign class to each controls and then attach change event to the dropdowns,
and then find the button within parent container using jquery
HTML:
<div class="someclass">
<img src="onepic.png">
<select class="size myFunction">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<select class="gender myFunction">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<button class="nextbutton1" disabled>button</button>
</div>
<div class="someclass">
<img src="twopic.png">
<select class="size myFunction">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<select class="gender myFunction">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<button class="nextbutton1" disabled>button</button>
</div>
JS:
$(document).ready(function(){
$(".myFunction").change(function(){
var $this = $(this);
var $container = $($this.parent(".someclass"));
var $next = $($container.find(".nextbutton1"));
var $size = $($container.find(".size"));
var $gender = $($container.find(".gender"));
var p1 = $size.val();
var p2 = $gender.val();
if(p1 !='' && p2!='') {
$next.prop('disabled',false);
} else {
$next.prop('disabled', true);
}
});
});
fiddle: https://jsfiddle.net/xwgz3doj/
I have a dropdown like below.
<label for="form_name">Title</label>
<select class="bootstrap-select">
<option value="1" selected="selected">Feature 1</option>
<option value="2">Feature 2</option>
<option value="3">Feature 3</option>
<option value="4">Feature 4</option>
</select>
<div><p>Text1</p></div>
<div><p>Text2</p></div>
<div><p>Text3</p></div>
<div><p>Text4</p></div>
I intend to show Text 1 when Feature 1 is selected, Text 2 when Feature 2 is selected and so on.
Any ideas on how can I do this with JS (or jQuery)?
P.S. Most existing solutions require input field rather than options field or maybe I am too noob. xD
Give the p tags the id as the value of the options, and show the p tag when selected option has the value which is equal to the id of p
$('p').hide();
$('#1').show();
$('select').change(function() {
$('p').hide();
var a = $(this).val();
$("#" + a).show();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="form_name">Title</label>
<select class="bootstrap-select">
<option value="1" selected="selected">Feature 1</option>
<option value="2">Feature 2</option>
<option value="3">Feature 3</option>
<option value="4">Feature 4</option>
</select>
<div>
<p id="1">Text1</p>
</div>
<div>
<p id="2">Text2</p>
</div>
<div>
<p id="3">Text3</p>
</div>
<div>
<p id="4">Text4</p>
</div>
function display(){
var e = document.getElementById("dropDownId");
var index = e.selectedIndex;
if(index==0){
document.getElementById("first").style.display = 'block'
document.getElementById("second").style.display = 'none'
}
else if(index==1){
document.getElementById("first").style.display = 'none'
document.getElementById("second").style.display = 'block'
}
}
<label for="form_name">Title</label>
<select class="bootstrap-select" id="dropDownId" onchange="display()">
<option value="1" selected="selected">Feature 1</option>
<option value="2">Feature 2</option>
</select>
<div id="first"><p>Text1</p></div>
<div id="second" style="display: none;"><p>Text2</p></div>
Please run this snippet..and check out your solution..
With pure javascript
let select = document.querySelector("select");
let divs = document.querySelectorAll("div");
let result = document.querySelector("#result");
function func1(par){
result.innerText = divs[par - 1].innerText;
}
div:not(#result) {
display:none;
}
<label for="form_name">Title</label>
<select class="bootstrap-select" onchange="func1(this.value)">
<option value="1" selected="selected">Feature 1</option>
<option value="2">Feature 2</option>
<option value="3">Feature 3</option>
<option value="4">Feature 4</option>
</select>
<div><p>Text1</p></div>
<div><p>Text2</p></div>
<div><p>Text3</p></div>
<div><p>Text4</p></div>
<div id="result"></div>
You can use ids on your div that you want to show and change the value of your select with the ids you choosed
$("#select-panel").change(function(){
updateDisplay();
})
function updateDisplay(){
var idToShow = $("#select-panel").find(":selected").val() || "div1";
$(".subcontent").each(function(){
$(this).css("display",$(this).is("#"+idToShow) ? 'block' : 'none');
})
}
updateDisplay();
.subcontent{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select-panel">
<option value="div1">1</option>
<option value="div2">2</option>
</select>
<div id="div1" class="subcontent">Text 1</div>
<div id="div2" class="subcontent">Text 2</div>
I have a small question,
At the moment I have a 2 option boxes in my Test.php file. I want to show my second option box when I select leverancier in the first one. so far so good!
But now I want to apply some CSS to it...
for example the bootstrap form-control class...
this is my (simple) code:
<script>
$(function() {
$("#corracrtieby").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === 'Leverancier') {
$("#Klanttable").removeClass("hidden");
}
else {
$("#Klanttable").addClass("hidden");
$("#Klanttable").val("");
}
});
});
</script>
Correctie maatregelen:<br>
<select name="corracrtieby" class="form-control" id="corracrtieby" style="width: 300px">
<option value="--corracrtieby--">--corracrtieby--</option>
<option value="Petrogas">Petrogas</option>
<option value="Leverancier">Leverancier</option>
<option value="Klant">Klant</option>
</select>
<br>
<select name="Klanttable" class="hidden" id="Klanttable" style="width: 300px">
<option value="--Klanttable--">--Correctie maatregel--</option>
<option value="Test1">Petrogas</option>
<option value="Test2">Leverancier</option>
<option value="Test3">Klant</option>
<option value="Test4">Klant</option>
<option value="Test5">Klant</option>
</select>
So how can I make my first option box the same as my second option box?
With Jquery you can add multiple classes at once so your solution would just be:
$(function() {
$("#corracrtieby").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === 'Leverancier') {
$("#Klanttable").removeClass("hidden form-control");
}
else {
$("#Klanttable").addClass("hidden form-control");
$("#Klanttable").val("");
}
});
});
<script>
$(function() {
$("#corracrtieby").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === 'Leverancier') {
$("#Klanttable").removeClass("hidden form-control");
}
else {
$("#Klanttable").addClass("hidden form-control");
$("#Klanttable").val("");
}
});
});
</script>
Correctie maatregelen:<br>
<select name="corracrtieby" class="form-control" id="corracrtieby" style="width: 300px">
<option value="--corracrtieby--">--corracrtieby--</option>
<option value="Petrogas">Petrogas</option>
<option value="Leverancier">Leverancier</option>
<option value="Klant">Klant</option>
</select>
<br>
<select name="Klanttable" class="hidden form-control" id="Klanttable" style="width: 300px">
<option value="--Klanttable--">--Correctie maatregel--</option>
<option value="Test1">Petrogas</option>
<option value="Test2">Leverancier</option>
<option value="Test3">Klant</option>
<option value="Test4">Klant</option>
<option value="Test5">Klant</option>
</select>
now it's removing only the class, not the option box itself......
Based on this codes: http://jsfiddle.net/3UWk2/3/
<select size="1" id="Rank" title="" name="Rank">
<option value="">-Select Your Rank-</option>
<option value="airman">Airman</option>
<option value="senior-airman">Senior Airman</option>
</select>
<div class="container">
<div class="airman">
<select class="second-level-select">
<option value="">-Select Your Rank-</option>
<option value="basic-ore-1">Basic Ore Miner - Level 1</option>
<option value="basic-ore-2">Basic Ore Miner - Level 2</option>
</select>
</div>
<div class="senior-airman">
<select class="second-level-select">
<option value="">-Select Your Rank-</option>
<option value="omber-miner-1">Omber Miner - Level 1</option>
<option value="omber-miner-2">Omber Miner - Level 2</option>
</select>
</div>
</div>
<div class="second-level-container">
<div class="basic-ore-1">
Line of text for basic ore miner 1
</div>
<div class="basic-ore-2">
Line of text for basic ore miner 2
</div>
<div class="omber-miner-1">
Line of text for omber miner 1
</div>
<div class="omber-miner-2">
Line of text for omber miner 2
</div>
</div>
Followed By:
$(document).ready(function() {
$('#Rank').bind('change', function() {
var elements = $('div.container').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
$('.second-level-select').bind('change', function() {
var elements = $('div.second-level-container').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
});
How do I auto select the first option of both dropdown and display the final value OnLoad?
I'm looking at 3 by 3 drop down, with 9 values in total.
Check if this might help you out
$(document).ready(function() {
//bind onchange for the rank dd
$("#Rank").on('change', function() {
let selectedValue = $(this).val();
$(".container>div").hide();
if (selectedValue.length) {
$("." + selectedValue).show();
//select.val($(select + " option:eq(1)").val());
}
})
//bind onchange for the airman dd
$("#second-level-select-airman").on('change', function() {
let selectedValue = $(this).val();
$(".second-level-container").children().hide();
if (selectedValue.length) {
$("." + selectedValue).show();
//select.val($(select + " option:eq(1)").val());
}
})
//bind onchange for the senior airman
$("#second-level-select-senior-airman").on('change', function() {
let selectedValue = $(this).val();
$(".second-level-container").children().hide();
if (selectedValue.length) {
$("." + selectedValue).show();
//select.val($(select + " option:eq(1)").val());
}
});
//select first value of first dropdown
$("#Rank").val($("#Rank option:eq(1)").val()).trigger('change');
//select the first option from the 2nd menu depending on the valur of the first dd
$("." + $("#Rank").val()).find("select").val(
$("." + $("#Rank").val()).find("select option:eq(1)").val()
).trigger('change');
// $("#Rank").val($("#Rank option:eq(1)").val());
// $("." + $("#Rank").val()).find("select").val(
// $("." + $("#Rank").val()).find("select option:eq(1)").val()
// );
});
.airman,
.senior-airman,
.second-level-container>div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Rank" name="Rank">
<option value="">-Select Your Rank-</option>
<option value="airman">Airman</option>
<option value="senior-airman">Senior Airman</option>
</select>
<div class="container">
<div class="airman">
<select class="second-level-select" id="second-level-select-airman">
<option value="">-Select Your Rank-</option>
<option value="basic-ore-1">Basic Ore Miner - Level 1</option>
<option value="basic-ore-2">Basic Ore Miner - Level 2</option>
</select>
</div>
<div class="senior-airman">
<select class="second-level-select" id="second-level-select-senior-airman">
<option value="">-Select Your Rank-</option>
<option value="omber-miner-1">Omber Miner - Level 1</option>
<option value="omber-miner-2">Omber Miner - Level 2</option>
</select>
</div>
</div>
<div class="second-level-container">
<div class="basic-ore-1">
Line of text for basic ore miner 1
</div>
<div class="basic-ore-2">
Line of text for basic ore miner 2
</div>
<div class="omber-miner-1">
Line of text for omber miner 1
</div>
<div class="omber-miner-2">
Line of text for omber miner 2
</div>
</div>