Conditional dropdown not working as intended - javascript

This is related to HTML and JavaScript. I'm a newbie in HTML and JavaScript.
I have four DropDowns. The first two are dependent on each other. The next two are dependent on each other. The first two DropDowns work perfectly.
For e.g. if the option No school is selected, the second DropDown populates values as expected.
The same does not happen for the next two DropDowns. If No is chosen in the third DropDown, the fourth DropDown should populate a list.
This does not happen.
Please run the code to understand what is happening.
Thanks in advance.
Regards
David
The code is:
function dynamic_sch(listindex)
{
document.getElementById("subcategory").length = 0;
switch (listindex)
{
case "No_sch_att" :
document.getElementById("subcategory").options[0]=new Option("Please select reason","");
document.getElementById("subcategory").options[1]=new Option("Did not know what to do","Did not know what to do");
document.getElementById("subcategory").options[2]=new Option("Unable to provide escort","Unable to provide escort");
document.getElementById("subcategory").options[3]=new Option("Unable to adjust in school setting","Unable to adjust in school setting");
document.getElementById("subcategory").options[4]=new Option("Cant travel long distance","Cant travel long distance");
document.getElementById("subcategory").options[5]=new Option("Cant afford travel","Cant travel long distance");
break;
case "Spl_sch" :
document.getElementById("subcategory").options[0]=new Option("Please select reason","");
document.getElementById("subcategory").options[1]=new Option("Only option available","Only option available");
document.getElementById("subcategory").options[2]=new Option("Could not adjust in mainstream school","Could not adjust in mainstream school");
document.getElementById("subcategory").options[3]=new Option("Denied admission in mainstream school","Denied admission in mainstream school");
document.getElementById("subcategory").options[4]=new Option("Parents preferred choice","Parents preferred choice");
document.getElementById("subcategory").options[2]=new Option("Non availability of escort/transport","Non availability of escort/transport");
document.getElementById("subcategory").options[2]=new Option("Not happy with progress quality in school","Not happy with progress quality in school");
break;
case "home_edn" :
document.getElementById("subcategory").options[0]=new Option("Please select reason","");
document.getElementById("subcategory").options[1]=new Option("Preferred choice","Preferred choice");
document.getElementById("subcategory").options[2]=new Option("Did not know what to do","Did not know what to do");
document.getElementById("subcategory").options[3]=new Option("Unable to provide escort","Unable to provide escort");
document.getElementById("subcategory").options[4]=new Option("Unable to adjust in school setting","Unable to adjust in school setting");
document.getElementById("subcategory").options[5]=new Option("Cant travel long distance","Cant travel long distance");
break;
}
return true;
}
function dynamic_yn(listindex)
{
document.getElementById("sub_category").length = 0;
switch (listindex)
{
case "no_rec" :
document.getElementById("sub_category").options[0]=new Option("Please select reason","");
document.getElementById("sub_category").options[1]=new Option("Did not know what to do","Did not know what to do");
document.getElementById("sub_category").options[2]=new Option("Unable to provide escort","Unable to provide escort");
document.getElementById("sub_category").options[3]=new Option("Unable to adjust in school setting","Unable to adjust in school setting");
document.getElementById("sub_category").options[4]=new Option("Cant travel long distance","Cant travel long distance");
document.getElementById("sub_category").options[5]=new Option("Cant afford travel","Cant travel long distance");
break;
}
return true;
}
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<body>
<div style="display:inline-block">
<div class="category_div" id="category_div">
<label>School attended</label>
<select name="category" style="max-width:70%" class="required-entry" id="category" onchange="JavaScriptt: dynamic_sch(this.options[this.selectedIndex].value);">
<option value="">Select School attended</option>
<option value="No_sch_att">No school attended</option>
<option value="Incl_mainst">Inclusive Mainstream</option>
<option value="Spl_sch">Special School</option>
<option value="Int_spl_nrml">Integrated Spl+Normal</option>
<option value="home_edn">Home Education</option>
<option value="Opn_sch">Open Schooling</option>
</select>
</div>
</div>
<div style="display:inline-block">
<div class="sub_category_div" id="sub_category_div">
<div class="category_div" id="category_div">
<label>Reason Why ?</label>
<select name="subcategory" id="subcategory" style="max-width:100%"><option value="">Please select reason </option></select>
<noscript>
<select name="subcategory" id="subcategory"
<option value="">Please select reason</option>
</select>
</noscript>
</div>
</div>
</div>
<div style="display:inline-block">
<div class="category" id="category">
<label>Access to play</label>
<select name="category" style="max-width:70%" class="required-entry" id="category" onchange="JavaScriptt: dynamic_yn(this.options[this.selectedIndex].value);">
<option value="">Select Choice</option>
<option value="Yes_rec">Yes</option>
<option value="no_rec">No</option>
</select>
</div>
</div>
<div style="display:inline-block">
<div class="sub_category" id="sub_category">
<div class="category" id="category">
<label>Reason Why ?</label>
<select name="sub_category" id="sub_category" style="max-width:100%"><option value="">Please select reason </option></select>
<noscript>
<select name="sub_category" id="sub_category">
<option value="">Please select reason</option>
</select>
</noscript>
</div>
</div>
</div>
</body>
</html>

i checked your code , isssue is coming becuase for your last dropdown you have two elements having same id, hence the script is not updating the options
first one
<div class="sub_category" id="sub_category">
second one
<select name="sub_category" id="sub_category"
change the id for div and it should work

In HTML file id should be unique. In your code snippet you have multiple elements with same id. For example,
<div class="category" id="category">
<label>Access to play</label>
<select name="category" style="max-width:70%" class="required-entry" id="category" onchange="JavaScriptt: dynamic_yn(this.options[this.selectedIndex].value);">
<option value="">Select Choice</option>
<option value="Yes_rec">Yes</option>
<option value="no_rec">No</option>
</select>
</div>
In above code you have category as id to div and select. Change the id of div,
<div class="category" id="category_div">
Also this,
<div class="sub_category" id="sub_category">
<div class="category" id="category"> //This id should be removed
<label>Reason Why ?</label>
<select name="sub_category" id="sub_category" style="max-width:100%">
<option value="">Please select reason </option>
</select>
<noscript>
<select name="sub_category" id="sub_category">
<option value="">Please select reason</option>
</select>
</noscript>
</div>
</div>
In above code you have sub_category as id to div and select. Also you need to remove id="category" wchich is not necessory. Change the id of div,
<div class="sub_category" id="sub_category_div">
Demo
Note: You have added 2 select with same id in last block. If not needed you can remove one.

Related

Only send data from html form select is it is active

I have a series of select parts of a form, the javascript hides multiple possibilities for the following dropdown until the current drop down has a selection made, this determines which dropdown the user sees using the style="display:none;" attribute and javascript to switch it to block, .css({'display':'block'});.
The problem is that each <select> segment has the same name, e.g. <select class="form-control" name='phylum' id="sel1_1" style="display:none;"> this name='phylum' is used in the post phase of the form and needs to be associated with whichever dropdown list is used, but all of these have the default as 0 so if this is set it is overwritten by the final select in the list.
In javascript I therefore need to disable the html code, switching display:none; to display:block; has no effect as it is style only. Could I add disabled to all the <select> elements and somehow activate the required one?
Some example html and javascript snippets follow.
html
<div class='col-12 left'>
<div class='form-group'>
<label id="sel1_0" style="display:none;" for='uname'>Phylum/Division</label>
<select class="form-control" name='phylum' id="sel1_1" style="display:none;">
<option value="phylum" data-value="0">Choose</option>
<option value="Annelid" data-value="1">Annelid</option>
<option value="Arthropod" data-value="2">Arthropod</option>
<option value="Bryozoa" data-value="3">Bryozoa</option>
<option value="Chordata" data-value="4">Chordata</option>
<option value="Cnidaria" data-value="5">Cnidaria</option>
<option value="Echinoderm" data-value="6">Echinoderm</option>
<option value="Mollusc" data-value="7">Mollusc</option>
<option value="Nematode" data-value="8">Nematode</option>
<option value="Platyhelminthes" data-value="9">Platyhelminthes</option>
<option value="Rotifer" data-value="10">Rotifer</option>
<option value="Sponge" data-value="11">Sponge</option>
</select>
<select class="form-control" name='phylum' id="sel1_2" style="display:none;">
<option value="0" data-value="0">Choose</option>
<option value="1" data-value="1">C1</option>
<option value="2" data-value="2">D1</option>
</select>
</div>
</div>
javascript
$("#sel0").change(function() {
$('#sel1_1').css({'display':'block'});
The following doesn't seem to work
$('#sel1_1').css({'active'});

Trying but failing to create multiple hidden HTML <select> dropdown lists

I'm trying to create a submission form which will allow my users to
create an asset register list and I'm trying to get input for a
location field. The user must first however select a building, then
select a floor then finally select a room.
I could include all locations as 's within a single
element, however the list would be massive and ugly. Also, room names
are similar across sites so it would be best to keep them in a
separate element.
I would like the user to first select a building from a dropdown menu.
I would then like another dropdown menu to appear below that depending
on their building choice. Once they select their floor choice I would
then like a third select dropdown to appear which will then ask them
for the room (again depending on the option from the previous select
element).
I'm able to show one hidden select list by using an if...else function
and simply toggling between block/none but I don't seem to be able to
utilise the same technique for the value return on the (previously)
hidden select list.
I've included some primitive code. I'm not very experienced with
javascript so I've just created a simple if...else statement --with
plans to use a switch statement once I can get this proof of concept
down.
<script>
function locCheck(choice) {
if (choice.value == "195"){
document.getElementById("floor").style.display = "block";
}
else {
document.getElementById("195").style.display = "none";
}
}
</script>
<script>
function sublocCheck(choice) {
if (choice.value == "Ground Floor"){
document.getElementById("room").style.display = "block";
}
else {
document.getElementById("room").style.display = "none";
}
}
</script>
</head>
<body>
<div id="building">
<span>site*</span>
<div>
<select onchange='locCheck(this);'>
<option value="">-- Select A Site --</option>
<option value="195">195 </option>
<option value="123">123 </option>
<option value="8">8 </option>
<option value="Off-Site">Off-Site</option>
</select>
</div>
</div>
<div id="floor" style="display: none;">
<span>Floor*</span>
<div>
<select onchange="sublocCheck(sl);">
<option value="">-- Select A Floor --</option>
<option value="Ground Floor"> Ground Floor</option>
<option value="First Floor"> First Floor</option>
<option value="Basement Floor"> Basement Floor</option>
</select>
</div>
</div>
<div id="room" style="display: none;" >
<span>room*</span>
<div>
<select>
<option>-- Select A room --</option>
<option>room1</option>
<option>room2</option>
<option>room3</option>
</select>
</div>
</div>
</body>
Building (Always visible)
Floor (was hidden, can only be shown/hidden by Building list)
Room (was hidden, can only be shown/hidden by Floor or Building list)
If this isn't clear, I'd be glad to explain further. It's pretty late
and I'd just like a fresh pair of eyes to look at my code.
thanks in advance,
L
Your function call is wrong. Fix it to onchange="sublocCheck(this);" and it will fix your issue.
Second Problem is the else statement of locCheck the display none shall go to id=floor not id=195
By the way re-think about your approach. If you unselect the 195, the floor dropdown will hide. then you can't hide the room number dropdown.
<head>
<script>
function locCheck(choice) {
if (choice.value == "195"){
document.getElementById("floor").style.display = "block";
}
else {
document.getElementById("floor").style.display = "none";
}
}
</script>
<script>
function sublocCheck(choice) {
if (choice.value == "Ground Floor"){
document.getElementById("room").style.display = "block";
}
else {
document.getElementById("room").style.display = "none";
}
}
</script>
</head>
<body>
<div id="building">
<span>site*</span>
<div>
<select onchange='locCheck(this);'>
<option value="">-- Select A Site --</option>
<option value="195">195 </option>
<option value="123">123 </option>
<option value="8">8 </option>
<option value="Off-Site">Off-Site</option>
</select>
</div>
</div>
<div id="floor" style="display: none;">
<span>Floor*</span>
<div>
<select onchange="sublocCheck(this);">
<option value="">-- Select A Floor --</option>
<option value="Ground Floor"> Ground Floor</option>
<option value="First Floor"> First Floor</option>
<option value="Basement Floor"> Basement Floor</option>
</select>
</div>
</div>
<div id="room" style="display: none;" >
<span>room*</span>
<div>
<select>
<option>-- Select A room --</option>
<option>room1</option>
<option>room2</option>
<option>room3</option>
</select>
</div>
</div>
</body>

Select dropdown option by text if same list of class are found in protractor js

I'm working in Protractor and javasript. My page has 3 dropdowns of same class "imageeditor". I want to select the 2nd dropdown and click the option say "Package" by passing the text as parameter.I want the different xpath and css to perform the select option.
<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>
<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>
<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>
You can get the desired select element by index:
var desiredImageEditor = $$(".imageeditor select").get(1);
Now, in order to select an option, you have multiple ways to do so. One is to select the inner option by the class name and click it:
var desiredOption = desiredImageEditor.$("option.image-package-panel");
desiredImageEditor.click(); // open up dropdown
desiredOption.click();
Or, it should also be possible to just send keys to the select element:
desiredImageEditor.sendKeys("Package");
There is also this convenient abstraction over select and option.

Show specific content based on 4 drop-down selections

I've managed to source some code to achieve the above, however, despite several attempts, I cannot get it to work. Could anyone please assist me on this?
JS in HEAD of HTML file:
<script type="text/javascript">
jQuery(function($){
selects = $('#select-container select'),
results = $('#results-container > div');
selects.change(function(){
var values = '';
selects.each(function(){
values += '.' + $(this).val();
});
results.filter(values).show().siblings().hide();
});
});
</script>
HTML in BODY of HTML file:
<div class="margins1"><h2>Goal</h2>
<div id='select-container'>
<select>
<option value='none'>Select Option</option>
<option value='Fat Loss'>Fat Loss</option>
<option value='Lean Muscle'>Lean Muscle</option>
<option value='Size & Mass'>Size & Mass</option>
</select>
<h2>Dietary Requirements</h2>
<select>
<option value='none'>Select Option</option>
<option value='No Requirements'>No Requirements</option>
<option value='Vegetarian'>Vegetarian</option>
<option value='Vegan'>Vegan</option>
<option value='Gluten Free'>Gluten Free</option>
<option value='Gluten Free (vegetarian)'>Gluten Free (vegetarian)</option>
<option value='Gluten Free'>Gluten Free (vegan)</option>
<option value='Dairy Free'>Dairy Free</option>
<option value='Dairy Free (vegetarian)'>Dairy Free (vegetarian)</option>
<option value='Dairy Free (vegan)'>Dairy Free (vegan)</option>
<option value='Nut Free'>Nut Free</option>
<option value='Nut Free (vegetarian)'>Nut Free (vegetarian)</option>
<option value='Nut Free (vegan)'>Nut Free (vegan)</option>
<option value='Supplement Free'>Supplement Free</option>
<option value='Supplement Free (vegetarian)'>Supplement Free (vegetarian)</option>
<option value='Supplment Free (vegan)'>Supplement Free (vegan)</option>
</select>
<h2>Type of Day</h2>
<select>
<option value='none'>Select Option</option>
<option value='Non-Back-Load Day (10-Day Prep/CNS)'>Non-Back-Load Day (10-Day Prep/CNS)</option>
<option value='Back-Load Day (10-Day Prep/CNS)'>Back-Load Day (10-Day Prep/CNS)</option>
<option value='Non-Back-Load Day (CBL)'>Non-Back-Load Day (CBL)</option>
<option value='Back-Load Day (CBL)'>Back-Load Day (CBL)</option>
</select>
<h2>Cooking Level</h2>
<select>
<option value='none'>Select Option</option>
<option value='Minimal Cooking'>Minimal Cooking</option>
<option value='Moderate Cooking'>Moderate Cooking</option>
<option value='Maximum Cooking'>Maximum Cooking</option>
</select></br>
</div>
Here is the rest of the HTML code that assigns combinations of drop-down selections to a piece of text. I have only done one example:
<div class="margins2"><h1>Meal Plan...</h1>
<div id='results-container'>
<div class='Fat Loss No Requirements Back-Load Day (CBL) Moderate Cooking'> IT WORKS</div>
</div>
The second div class has 4 inputs. It looks strange without commas or separate '' marks but the tutorial doesn't include these and it works. Finally, here is some code from my EXTERNAL CSS file:
#results-container > div { display: none; }
Can anyone please assist me in fixing the issue of no text displaying or identify why this is happening? The JSFiddle link of the tutorial of what I want to achieve can be found here: http://jsfiddle.net/chnZP/
Many thanks
The problem seems to be in how the values in the drop-down lists are written. Because values are directly used as class names you are restricted in your choice of special characters.
Following the tutorial example, if you select alpha, blue and dog the script will turn this into a string ".alpha.blue.dog" and then select the elements containing those 3 class names using the .filter() method.
Because the string is sent to jQuery to manage it has to follow a strict syntax. This means you cannot using spaces, backslashes, parentheses (...and so on) in your class names because they will be parsed differently.
Editing the code slightly will fix it. http://jsfiddle.net/AjdHa/7/
<div id='select-container'>
<select>
<option value='none'>Select Option</option>
<option value='Fat_Loss'>Fat Loss</option>
</select>
<h2>Dietary Requirements</h2>
<select>
<option value='none'>Select Option</option>
<option value='No_Requirements'>No Requirements</option>
</select>
<h2>Type_of_Day</h2>
<select>
<option value='none'>Select Option</option>
<option value='Non-Back-Load_Day_CBL'>Non-Back-Load Day (CBL)</option>
</select>
<h2>Cooking Level</h2>
<select>
<option value='none'>Select Option</option>
<option value='Minimal_Cooking'>Minimal Cooking</option>
<option value='Moderate_Cooking'>Moderate Cooking</option>
<option value='Maximum_Cooking'>Maximum Cooking</option>
</select>
</div>
<div class="margins2">
<h1>Meal Plan...</h1>
<div id='results-container'>
<div class='Fat_Loss No_Requirements Non-Back-Load_Day_CBL Moderate_Cooking'>
IT WORKS
</div>
</div>
</div>

Hiding a class of Div depending on Select statement option

I'm fairly new to javascript and I'm trying to make an form for my website and I'm stuck on the javascript,
This is what I have:
<script type="text/javascript">
function hide(opt) {
if (getElementsByClassName(opt).style.display='none';){
getElementsByClassName(opt).style.display='block';
}
else{
getElementsByClassName(opt).style.display='none';
}
}
</script>
What I intended the script to do was recieve a variable (the option chosen by the user) and then reveal all the elements with the class of the same name (so if the option was orc the orc div would be displayed, but be hidden if the option chosen was elf etc.)
Html:
<form name="chargen" action="" method="post">
Name:<Input name="name" type="text" />
Gender:<select name="gender">
<option>Choose Gender...</option>
<option>Male</option>
<option>Female</option>
</select>
Species:<select name="species" onchange="hide(document.chargen.species.options[
document.chargen.species.selectedIndex ].value)">
<option> Choose Species...</option>
<option value="human">Human</option>
<option value="orc">Orc</option>
<option value="elf">Elf</option>
<option value="dwarf">Dwarf</option>
<option value="drow">Drow</option>
<option value="ent">Ent</option>
</select>
<div class="human" style="display:none;">
Sub Species:<select name="subspecies1">
<option>Norseman</option>
<option>Hellenic</option>
<option>Heartlander</option>
</select>
</div>
<div class="orc" style="display:none;">
Sub Species:<select name="subspecies2">
<option>Black Orc</option>
<option>Fel Orc</option>
<option>Green Orc</option>
</select>
</div>
<div class="human" style="display:none;">
Homeland:<select name="homeland1">
<option>Choose Homeland...</option>
<option value="citadel">Citadel</option>
<option value="wildharn">Wildharn</option>
<option value="Merith">Merith</option>
</select>
</div>
<div class="orc" style="display:none;">
Homeland:<select name="homeland2">
<option>Choose Homeland...</option>
<option value="1">Berherak</option>
<option value="2">Vasberan</option>
</select>
</div>
Unfortunately nothing happens when I change the contents of the species combobox (I've tried on multiple browsers) What am I doing wrong?
I realise that getElementsByClassName() is a HTML5 function, but according to the interwebs it is compatible with all major browsers.
Thanks for your time
getElementsByClassName returns an array, you must iterate on the result. And be careful to the = in tests (instead of ==).
But I suggest you have a look at jquery. Your life will be easier as what you want can be done as :
$('.human, .orc, .elf, .dwarf, .drow, .ent').hide();
$('.'+opt).show();
(see fiddle : http://jsfiddle.net/dystroy/2GmZ3/)

Categories