Good Day! I already made my code show the appropriate dropdown as per the selected value on the first dropdown I have my code like this:
First Dropdown:
<select size="1" id="parent" class=" validate['required']" title="" type="select" name="style" >
<option value="">-Choose-</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
When I chose any of this secondd dropdown will show for example when i choose "A" this next dropdown will show
<div id="A" class="style-sub-1" style="display: none;" name="stylesub1" >
<label>A</label>
<select id="childA">
<option value="">-Choose-</option>
<option value="Aa">Aa </option>
<option value="Ab">Ab </option>
<option value="Ac">Ac</option>
</select>
</div>
And then lastly when I choose again for example Aa, the third dropdown will be shown. This is the third dropdown
<div id="Aa" class="style-sub-2" style="display: none;" name="stylesub2" >
<label>Aa:</label>
<select >
<option value="">-Choose-</option>
<option value="Aaa">Aaa</option>
<option value="Abb">Abb </option>
<option value="Acc">Acc</option>
</select>
Now, my problem is for example after I selected all these then decided to select another value from the first dropdown, for example B, the third dropdown which is Aaa is still shown. I need to hide this when I selected a new value to avoid confusion. How can I do that? This is my Javascript code:
<script>
$("#parent").change ( function () {
var targID = $(this).find(":selected").val()
$("div.style-sub-1").hide ();
$('#' + targID).show ();
} )
$("#childA").change ( function () {
var targID = $(this).find(":selected").val();
$("div.style-sub-2").hide ();
$('#' + targID).show ();
} )
</script>
u can apply onchange function oh ur dropdowns as if first dropdown changes show second dropdown and same goes for second dropdown as if some one selects a value onlu then third dropdown will show
Related
One day I had a problem with PHP and a super guy resolved my problem, this time I learn JavaScript, and I'm really stuck on a project.
Here is the fiddle: https://jsfiddle.net/xasal/8c0kdqm4/5/
As you see, I have 2 selectors, on the left, the user see his characters, at the right, he can chose to switch his "race", the problem is I want JavaScript to run something when the guy selects his character at the left to compare with the right one and automatically delete the option if it's for the same race.. I made the functions for all to disappear, the only problem is the compare value... and when I think my code is nice I have issues in the dev console of unexpected end or syntax
Uncaught SyntaxError: Unexpected end of input
Sorry if it's kinda easy for you I'm really new :x
<select id="charSelect" name="charSelection">
<option value="Knight" selected="selected"><span id="charName">Gooffy</span> - <span class="charJob" onclick="detectChanges()">Knight</span> - lv.<span id="charLvl">175</span></option>
<option value="NightShadow"><span>Soul</span> - <span class="charJob" onclick="detectChanges()">NightShadow</span> - lv.<span>175</span></option>
<option value="Rogue"><span>Veli</span> - <span class="charJob" onclick="detectChanges()">Rogue</span> - lv.<span>175</span></option>
</select>
</section>
<input type="submit" value="Change my class to">
<section class="rightSelect">
<select class="jobSelect" name="jobSelection">
<option value="titan" id="titan" class="charJobChange" selected="selected">Titan</option>
<option value="knight" id="knight" class="charJobChange">Knight</option>
<option value="healer" id="healer" class="charJobChange">Healer</option>
<option value="mage" id="mage" class="charJobChange">Mage</option>
<option value="rogue" id="rogue" class="charJobChange">Rogue</option>
<option value="sorcerer" id="sorcerer" class="charJobChange">Sorcerer</option>
<option value="nightshadow" id="nightshadow" class="charJobChange">NightShadow</option>
</select>
function removeNS() { // example with Hide NS = nightshadow
$('#nightshadow').hide();
console.log("loaded");
}
function selectedCh(){
if($("#leftSelect select").find("option:selected").val() == "NightShadow") {
removeNS();
}
selectedCh();
Try this instead.
I called the function in onchange="selectedCh()" of left select box.
function selectedCh(){
// to get selected option in left select box in lowercase
var selectedtitem = $(".leftSelect select").find("option:selected").val().toLowerCase();
// to get total number of options in right select box
var oplen = $(".rightSelect select option").length;
// enable all option in right select box
$(".rightSelect select option").show();
// Loop for checking the selected option equals to any option in right select box
for(i=1;i<=oplen;i++){
if($(".rightSelect select option:nth-child("+i+")").val() == selectedtitem){
// to hide if equals in right select box option
$(".rightSelect select option:nth-child("+i+")").hide();
}
}
}
// to check first run the code
selectedCh();
Working demo
function selectedCh(){
var selectedtitem = $(".leftSelect select").find("option:selected").val().toLowerCase();
var oplen = $(".rightSelect select option").length;
$(".rightSelect select option").show();
for(i=1;i<=oplen;i++){
if($(".rightSelect select option:nth-child("+i+")").val() == selectedtitem){
$(".rightSelect select option:nth-child("+i+")").hide();
}
}
}
selectedCh();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="leftSelect">
<select id="charSelect" name="charSelection" onchange="selectedCh()">
<option value="Knight" selected="selected"><span id="charName">Gooffy</span> - <span class="charJob" onclick="detectChanges()">Knight</span> - lv.<span id="charLvl">175</span></option>
<option value="NightShadow"><span>Soul</span> - <span class="charJob">NightShadow</span> - lv.<span>175</span></option>
<option value="Rogue"><span>Veli</span> - <span class="charJob" >Rogue</span> - lv.<span>175</span></option>
</select>
</section>
<section class="rightSelect">
<select class="jobSelect" name="jobSelection">
<option value="titan" id="titan" class="charJobChange" selected="selected">Titan</option>
<option value="knight" id="knight" class="charJobChange">Knight</option>
<option value="healer" id="healer" class="charJobChange">Healer</option>
<option value="mage" id="mage" class="charJobChange">Mage</option>
<option value="rogue" id="rogue" class="charJobChange">Rogue</option>
<option value="sorcerer" id="sorcerer" class="charJobChange">Sorcerer</option>
<option value="nightshadow" id="nightshadow" class="charJobChange">NightShadow</option>
</select>
</section>
Hide option if value == 'option 3'
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectName">
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
<option value="option 3">Option 3 (hide on chnage)</option>
<option value="option 4">Option 4</option>
<option value="option 5">Option 5</option>
</select>
<script>
$('#selectName').on('change', function () {
if ($(this).val() == 'option 3') {
$('option[value="option 3"]',this).hide();
} else {
$('option[value="option 3"]',this).show();
}
}).trigger('change');;
</script>
Just use a query selector for find the matching option and hide it. Here is a minimal example:
var charSelect = document.querySelector('select[name="charSelection"]');
var jobSelect = document.querySelector('select[name="jobSelection"]');
charSelect.addEventListener('change', function(){
// Unhide any hidden options
jobSelect.querySelectorAll('option').forEach(opt=>opt.style.display = null);
// Hide the option that matches the above selected one
var value = this.value.toLowerCase();
jobSelect.querySelector(`option[value="${value}"]`).style.display = "none";
});
<select name="charSelection">
<option value="Knight" selected="selected">Knight</option>
<option value="NightShadow">NightShadow</option>
<option value="Rogue">Rogue</option>
</select>
<select name="jobSelection">
<option value="titan" selected="selected">Titan</option>
<option value="knight">Knight</option>
<option value="healer">Healer</option>
<option value="mage">Mage</option>
<option value="rogue">Rogue</option>
<option value="sorcerer">Sorcerer</option>
<option value="nightshadow">NightShadow</option>
</select>
I have two dynamic dropdowns but both dropdown's value and options are same. What I want that if user select 'apple' from first dropdown then the second dropdown's apple option will be disabled (using javascript). In short user can not select same value from both.
//first drop down
<select name="fruit1">
<option value="1">Apple</option>
<option value="2">Mango</option>
</select>
//second dropdown
<select name="fruit2">
<option value="1">Apple</option>
<option value="2">Mango</option>
</select>
I have tried with jQuery:
function witness()
{
var op=document.getElementById("witness1").value;
$('option[value='+op+']').prop('disabled', true);
}
But with this both dropdown's value are disabled and if I select mango then apple will not enabled it remains disabled. I know I did not pass id so both dropdown value are disabled but where should i pass ?
If user select apple then in second dropdown apple will be disabled, I want to do this using Javascript or jQuery.
Fiddle: https://jsfiddle.net/3pfo1d1f/
To get the functionality you're after, you need to hook into the change event on the first dropdown, in order to disable the matching element in the second drop-down.
I also initialised the first element in the second dropdown as disabled ( as this chosen by default in the first dropdown)
Used jquery as you are:
HTML:
<!-- first dropdown -->
<select id="fruit1">
<option value="1">Apple</option>
<option value="2">Mango</option>
</select>
<br /> <br />
<!-- second dropdown -->
<select id="fruit2">
<option value="1" disabled>Apple</option>
<option value="2">Mango</option>
</select>
JQuery:
$('#fruit1').on( "change", function() {
var op = $( this ).val();
$('#fruit2 option').prop('disabled', false);
$('#fruit2 option[value='+op+']').prop('disabled', true);
});
This should still work, no matter how many options you have in both the dropdowns
Try this out:
HTML:
<select id='fruit1' onchange="witness();">
<option selected></option>
<option value="1">Apple</option>
<option value="2">Mango</option>
</select>
<select id='fruit2'>
<option selected></option>
<option value="1">Apple</option>
<option value="2">Mango</option>
</select>
JQuery:
function witness(){
$("#fruit2 option").each(function(){
if($("#fruit1 option:selected").val() == $(this).val())
$(this).attr("disabled", "disabled");
else
$(this).removeAttr("disabled");
});
}
You can see a working exemple here:
https://jsfiddle.net/mqjxL4n0/
<select name="firstselect" id="firstselect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
<select name="secondselect" id="secondselect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
<script>
$(document).ready(function(){
$('#firstselect').change(function(){
var firstselected = $(this).val();
if(firstselected ){
$('#secondselect option').each(function(){
$(this).prop('disabled', false);
if($(this).val()==firstselected )
$(this).prop('disabled', true);
});
}
else {
$('#secondselect option').each(function(){
$(this).prop('disabled', false);
});
}
});
});
</script>
Trying to make a dependent select box.
I have two models, Areas and buildings, one area have many buildings, so in that case the parent select box will be (Areas) and the child is (Buildings).
On my php page i query all the areas row in parent select box , and query for all buildings in child select box.
First: The Parent select box (Areas):-
<select id="buildgs" onchange="showBuildings()">
#foreach ($areas as $a)
<option value="{{$a->name}}">{{$a->name}}</option>
#endforeach
</select>
The above code result :-
<select id="buildgs" " onchange="showBuildings()">
<option value="A">A</option>
<option value="B">B</option>
</select>
Second: The child select (Buildings):-
<select id="building" >
<option value=""></option>
#foreach ($areas as $a)
#foreach($a->buildings as $b)
<option style="display: none" id="{{$a->name}}" value="{{$b->id}}">
#if($b->symbol)
{{$b->symbol}} ({{$b->name}})
#else
{{$b->name}}
#endif
</option>
#endforeach
#endforeach
</select>
The above code result :-
<select id="building">
<option style="display: none" id="A" value="58">
STFA Land Area Workshop
</option>
<option style="display: none" id="A" value="121">
Temporary offices
</option>
<option style="display: none" id="B" value="60">
TC (Training Center)
</option>
<option style="display: none" id="B" value="110">
STFA Onshore Cabins
</option>
<option style="display: none" id="B" value="111">
STFA Onshore WS
</option>
</select>
Jquery and Javascript code:-
<script>
function showBuildings(){
//getting the value from Parent (Areas)
var x = $("#buildgs").val();
//This one just for testing and it's working
document.getElementById('testt').innerHTML='this changed to '+ x;
//This supposed to change all child <option>.style with x id but it not doing any thing !!!!!
document.getElementById(x).style.display='display';
}
</script>
First of all, The id property must be unique, replace them with class.
Change this line:
<option style="display: none" id="{{$a->name}}" value="{{$b->id}}">
To:
<option style="display: none" class="{{$a->name}}" value="{{$b->id}}">
And change this line:
document.getElementById(x).style.display='display';
To:
var results = document.getElementsByClassName(x);
for(var i = 0; i < results.length; i++) {
results[i].style.display='display';
}
UPDATE
I see that you use jQuery to retrieve the value of the select box, here is a clean method with less code to achieve what you want:
<select id="buildgs" onchange="showBuildings(this.value)">
Your new function:
<script>
function showBuildings(val){
$('#building option').not('.'+val).hide(); // Don't forget this!
$('#building option.' + val).show();
}
</script>
I have a dropdown with two tiers. I want to get the option value from the item selected from the second dropdown list.
I have figured out how to do this for the first list, but I want to be able to grab the value for -any- list. In my jsfiddle, you'll see there's a value in console.log for any of the items in the Pie list when you click on them, but not for any of the items in the Trees or Cars lists when they're clicked.
I thought I could just give all of the selection lists the same ID, but apparently not. Any suggestions? I've done some searching, but haven't found what I'm looking for. I'm using D3 and jQuery already, so those are good, but plain javascript is also fine. Thanks!
jsfiddle is here.
<div class="ccms_form_element cfdiv_custom" id="indSelectors">
<label>Type:</label>
<select size="1" id="dropStyle" class=" validate['required']" title="" type="select" name="style">
<option value="">-Select-</option>
<option value="Pies">Pies</option>
<option value="Trees">Trees</option>
<option value="Cars">Cars</option>
</select>
<div class="clear"></div>
<div id="error-message-style"></div>
</div>
<div id="Pies" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Pies</label>
<select id="inds">
<option value="">- Select -</option>
<option value="28">Apple</option>
<option value="3">Cherry</option>
<option value="44">Pumpkin</option>
</select>
</div>
<div id="Trees" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Trees</label>
<select id="inds">
<option value="">- Select -</option>
<option value="38">Maple</option>
<option value="11">Oak</option>
<option value="14">Birch</option>
</select>
</div>
<div id="Cars" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Cars</label>
<select id="inds">
<option value="">- Select -</option>
<option value="39">Mazda</option>
<option value="62">Ford</option>
<option value="25">Toyota</option>
</select>
</div>
<div class="clear"></div><div id="error-message-style-sub-1"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#dropStyle").change(function () {
var targID = $(this).val();
$("div.style-sub-1").hide();
$('#' + targID).show();
})
d3.select('#inds')
.on("change", function () {
var sect = document.getElementById("inds");
var section = sect.options[sect.selectedIndex].value;
console.log("section:", section);
// do other stuff with the section name
});
</script>
Element IDs should be unique within the entire document and it is not a good practice to have same id for multiple elements.
what does document.getElementById("inds") or $("#inds") return? You will get the first element always.
Rather, use a class. Just change id="inds" to class="inds" and update code like below.
$('.inds')
.on("change", function () {
var section = $(this).val();
console.log("section:", section);
// do other stuff with the section name
});
Updated Fiddle
Try this jQuery Plugin
https://code.google.com/p/jquery-option-tree/
Demonstration:
http://kotowicz.net/jquery-option-tree/demo/demo.html
I have question where you need to find pairs of words in Russian and English
<div class="form-group" id="question4">
<label for="q4FirstSelectEN">4</label>
<div class="row">
<div class="col-lg-offset-2 col-lg-2 q4EN">
<select name="firstSelectEn" id="q4FirstSelectEN">
<option disabled selected style="display: none" value=""></option>
<option value="red">red</option>
<option value="green">green</option>
<option value="purple">purple</option>
</select>
<select class="top-buffer" name="secondSelectEn" id="q4SecondSelectEN">
<option disabled selected style="display: none" value=""></option>
<option value="red">red</option>
<option value="green">green</option>
<option value="purple">purple</option>
</select>
<select class="top-buffer" name="secondSelectEn" id="q4ThirdSelectEN">
<option disabled selected style="display: none" value=""></option>
<option value="red">red</option>
<option value="green">green</option>
<option value="purple">purple</option>
</select>
</div>
<div class="col-lg-2 q4RU">
<select name="firstSelectRu" id="q4FirstSelectRu">
<option disabled selected style="display: none" value=""></option>
<option value="red">красный</option>
<option value="green">зелёный</option>
<option value="purple">фиолетовый</option>
</select>
<select class="top-buffer" name="firstSelectRu" id="q4SecondSelectRu">
<option disabled selected style="display: none" value=""></option>
<option value="red">красный</option>
<option value="green">зелёный</option>
<option value="purple">фиолетовый</option>
</select>
<select class="top-buffer" name="firstSelectRu" id="q4ThirdSelectRU">
<option disabled selected style="display: none" value=""></option>
<option value="red">красный</option>
<option value="green">зелёный</option>
<option value="purple">фиолетовый</option>
</select>
</div>
</div>
</div>
When user selects for example 'red' in (select) inside (div class='q4EN') in all remaining selects in this (div class=q4EN) selected 'red' option become nonSelectable
(nonSelectable is class in css with display:none)
When user change decision and select 'green' instead of 'red' in first (select) red became available in rest selects and green become nonSelectable
When all 3 select have their value user can't change anything
My js for this is not working and I out of ideas
$(".q4EN").find("select").change(function () {
$(".q4EN").find("select")
.not(this)
.find("option:selected")
.addClass("nonSelectable");
});
I believe the problem is order of operations.
$(".q4EN").find("select").change(function () {
$(".q4EN").find("select") //Finds all select lists
.not(this) //Finds all except the one just changed
.find("option:selected") //Finds selected of all except the one just changed
.addClass("nonSelectable"); //Wont do anything because nothing was selected
});
Try the following:
$(".q4EN").find("select").change(function() {UpdateOptions();});
function UpdateOptions(){
var ss = $(".q4EN").find("select");
ss.find('option').prop("disabled", false); //Enable all before disabling selected
ss.each(function () {
var s = $(this).val();
if(s != undefined && s != "") {
ss.find("option[value=" + s + "]").prop("disabled", true);
}
});
}
This is an alternate way to achieve what you need. It basically iterate through every select element and find the corresponding option and disables it.
$('select').find("option").addClass("selectable");
$('select').on("change",function()
{
// $(this).find("option").prop("disabled",false); // uncomment this if you wish to reset the disabled selection
var $thisId = this.id;
var $selectedOption = $(this).find("option:selected").val();
$('select').each(function()
{
if(this.id !== $thisId)
{
// $(this).find("option").removeClass("non-selectable").addClass("selectable"); // uncomment this if you wish to reset the disabled selection
$(this).find("option[value=" + $selectedOption + "]").prop("disabled",true).addClass("non-selectable").removeClass("selectable");
}
});
})
https://fiddle.jshell.net/a2n234eq/4/
To target a specific group ( like EN and RU ) , change $('select') to $('.q4EN select')