I try to create an infinite dropdown list. With this I mean if you click something on the first dropdown list, the second dropdown list will pop up. If you choose something on the second the third one will pop up...
The only difference between the dropdown lists is that only the first one will be required to fill in.
My dropdown list:
<select name="dropdown" style="font-size:18pt;height:40px;width:410px;" onclick="myFunction()" required>
<option value="">Choose something</option>
{{range .}} <option value='1'>{{.Name}}</option>
{{end}}
</select>
The new coming dropdown lists:
<div id="myDIV" style="display:none">
<select name="dropdown" style="font-size:18pt;height:40px;width:410px;" onselect="myFunction()">
<option value="">Choose something</option>
{{range .}} <option value='1'>{{.Name}}</option>
{{end}}
</select>
</div>
The Java Script:
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
I also searched for another function than onclick, because that's not for the dropdown lists I think, at least it's buggy. I tried some others but than it doesn't do anything
How can I make an automatically infinite generating dropdownlist?
If i understood you correctly the following is what you want to do.
var addDropDown = function (e) {
e.currentTarget.removeEventListener(e.type, addDropDown);
var clone = e.currentTarget.cloneNode(true);
clone.setAttribute('id', "dropdown-" + document.getElementsByTagName("select").length)
e.currentTarget.parentNode.insertBefore(clone, e.currentTarget.nextSibling);
clone.addEventListener("change", addDropDown);
}
document.getElementById("dropdown-0").addEventListener("change", addDropDown);
<select id="dropdown-0" name="dropdown">
<option value="">make a selection</option>
<option value='1'>Option1</option>
</select>
Related
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>
I need to create multiple identical dropdown lists, with only the first visible and when filled, the next one shows.
I found some examples and made it so that the second only shows after the first is filled, but I am unable to create a code that works for all lists (without replicating everything). I'm not a programmer, but I can see examples and kinda adapt them.
Can anyone help me?
This is what I used:
var elem = document.getElementById("q1");
elem.onchange = function(){
var hiddenDiv = document.getElementById("q2");
hiddenDiv.style.display = (this.value == "") ? "none":"block";
this.disabled = 'disabled';
};
https://jsfiddle.net/mbus6w11/6/
This is what I am proposing:
Have each select element in a div and give each of them an ID,
Add an onChange function to all of your select elements (you can leave the last one out)
In your script, set the visibility of second and third div as false,
In the onChange function, set visibility of the next select element true.
Here is the code:
<div id = "first">
<select onchange="myFunction1()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</div>
<div id = "second">
<select onchange="myFunction2()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</div>
<div id = "third">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</div>
Javascript:
document.getElementById("second").style.visibility = "hidden";
document.getElementById("third").style.visibility = "hidden";
function myFunction1() {
document.getElementById("second").style.visibility = "visible";
}
function myFunction2() {
document.getElementById("third").style.visibility = "visible";
}
I currently have a working HTML dropdown option, with a submit button that displays text based upon the options selected (Thanks to SO member Paul Redmond for creating it).
<label for="car">Car</label>
<select id="car">
<option value="Ford">Ford</option>
<option value="Fiat">Fiat</option>
<option value="Volvo">Volvo</option>
</select>
<label for="engine">Engine</label>
<select id="engine">
<option value="1.4 Petrol">1.4 Petrol</option>
<option value="1.6 Petrol">1.6 Petrol</option>
<option value="2.0 TDI">2.0 TDI</option>
</select>
<button id="process">Update</button>
<p>You have chosen a <span class="car">Ford </span> with a <span class="engine">1.4 Petrol</span> engine.</p>
CodePen Link:
http://codepen.io/paulcredmond/pen/jrdowR
I was wondering how I can hide the text at the bottom of the HTML file and only display it once the user presses 'Update'.
I was also wondering how I can add an IF statement to the JS code, so that if one or both dropdown is not used/selected then it would prompt the user by editing the text at the bottom of the HTML code.
My apologies if the answer is very obvious, I have very limited knowledge of HTML and JS and my efforts throughout the morning seemed futile.
Thanks for reading and thanks for any guidance.
Edit (Update):
Here is my attempt at editing the JS, but i'm not too sure on how to remove the block of HTML text and simply display the text from my IF statement.
$('#process').on('click', function() {
var car = $('#car :selected').text();
var engine = $('#engine :selected').text();
if (car == "Ford"){
$('p .car').text("Error");
$('p .engine').text("Error");
} else{
$('p .car').text(car);
$('p .engine').text(engine);
}
});
I have managed to get a workaround for this, it:
1.) Displays the text below only when the button is pressed.
2.) Hides the text if a specific value is selected from the dropdown box and should instead display an error message.
HTML Code:
<!--Credit to StackOverflow member Paul Redmond-->
<label for="car">Car</label>
<select id="car">
<option value="Ford">Ford</option>
<option value="Fiat">Fiat</option>
<option value="Volvo">Volvo</option>
</select>
<label for="engine">Engine</label>
<select id="engine">
<option value="1.4 Petrol 1.4">1.4 Petrol1</option>
<option value="1.6 Petrol">1.6 Petrol</option>
<option value="2.0 TDI">2.0 TDI</option>
</select>
<button id="process">Update</button>
<a id="displayText" style="display: none"><p>Please Select Another Option</p></a>
<div id="toggleText" style="display: none"><h1><p>You have chosen a <span class="car">Ford </span> with a <span class="engine">1.4 Petrol</span> engine.</p></h1></div>
JS Code
$('#process').on('click', function() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
var car = $('#car :selected').text();
var engine = $('#engine :selected').text();
if (car == "Fiat"){
ele.style.display = "none";
text.style.display = "block";
} else{
ele.style.display = "block";
text.style.display = "none";
$('p .car').text(car);
$('p .engine').text(engine);
}
});
Please let me know if there is a simpler way to achieve this or if there is error that you spot.
I'm trying to achieve one simple requirement, but couldn't make it!
My requirement is very simple - wanna display some alert to the user based on the options he selects from the drop down.
Below is the code, I've designed now. Please check and correct me where I'm going wrong.
<SCRIPT type="text/javascript">
var txt = this.getField("ddPortfolio").value;
If(txt == "Distribution")
window.alert("distribution");
</SCRIPT>
<div style="float:right">
<select name = "ddPortfolio">
<option value="volvo">-- Select Option --</option>
<option value="saab">Training</option>
<option value="mercedes">Internal</option>
<option value="audi">External</option>
</select>
</div>
You have some syntax errors. Also there is no Distribution value in your options. I think you want this:
html
<div style="float:right">
<select name = "ddPortfolio" onchange="test(this);">
<option value="volvo">-- Select Option --</option>
<option value="saab">Training</option>
<option value="mercedes">Internal</option>
<option value="audi">External</option>
</select>
</div>
js
function test(obj){
var txt = obj.value;
if(txt == "audi"){
window.alert("audi");
}
}
fiddle
HTML
<select onchange="getval(this);">
<option value="1">One</option>
<option value="2">Two</option>
</select>
SCRIPT
<script type="text/javascript">
function getval(sel) {
alert(sel.value) ;
}
</script>
Simple Drop down box working using javascript.
You checked If(txt == "Distribution") but that was not one of the options in your select in the code you provided. also it's the onchange triegger you need
You also need to add an id to the select so you can reference it for example
HTML snippet
<select name = "ddPortfolio" id = "ddPortfolio">
Javscript
var MyColumn = document.getElementById("ddPortfolio");
MyColumn.onchange = function(){if (MyColumn.value == "audi") {alert('hi');}};
http://jsfiddle.net/64Z7H/
I'm trying to create a page where you users have to make multiple selections that are based on each other. How do you create a form such that a specific type of dropdown menu #2 appears based on the user's selection in dropdown menu #1.
For example, lets say a user has to choose a "product category" and a "product subcategory". If a user chooses "bedding" from the first drop down menu, a second drop-down menu automatically appears with choices like "bed, mattress, pillow".
To further this example, lets say the user chose "electronics" instead of "bedding." Then the second-drop down menu would have choices like "tv, mp3 players, computers".
How would one go about doing something like that? Is it something you would do in HTML/CSS or some other form?
Thanks for the help!
EDIT - I'm using Django / Python to construct this website along with HTML, CSS, and Javascript.
You can use a combination of HTML and JavaScript (JSFIDDLE):
<select id="opts" onchange="showForm()">
<option value="0">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<div id="f1" style="display:none">
<form name="form1">
<select id="opts" onchange="showForm()">
<option value="0">Select Option</option>
<option value="1">Option 1A</option>
<option value="2">Option 1B</option>
</select>
</form>
</div>
<div id="f2" style="display:none">
<form name="form2">
<select id="opts" onchange="showForm()">
<option value="0">Select Option</option>
<option value="1">Option 2A</option>
<option value="2">Option 2B</option>
</select>
</form>
</div>
<script type="text/javascript">
function showForm() {
var selopt = document.getElementById("opts").value;
if (selopt == 1) {
document.getElementById("f1").style.display = "block";
document.getElementById("f2").style.display = "none";
}
if (selopt == 2) {
document.getElementById("f2").style.display = "block";
document.getElementById("f1").style.display = "none";
}
if (selopt == 0) {
document.getElementById("f2").style.display = "none";
document.getElementById("f1").style.display = "none";
}
}
</script>
Like this? Created a js fiddle.
http://jsfiddle.net/wigster/MeTQQ/
It grabs the value of the drop down box, and then if it matches the rule, it'll set the other drop-down box to show, if not, keeps that other drop-down box hidden.
If you wish to use jQuery, you can use this test case:
http://jsfiddle.net/exXmJ/
The way I see it there are two ways to go. Delete the dropdown and exchange it for a new one, or hide/show two different dropdowns. Alexander covered the second method so I won't go into that.