Button click to show a dropdown

Question

0.00/5 (No votes)

See more:

trying to do this, a submit type regular button is displayed. when clicked,
it shows a dropdown list, upon selecting a value, another drop down list shows up and then submit.

how do i do this?
here is something i started with...

<!DOCTYPE html>
<html>
<body>

<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "<select>";
}
</script>

</body>
</html>

Posted 23-Jun-15 5:54am

Member 11709123

Add a Solution

Comments

Andy Lanng 23-Jun-15 12:18pm

Hmm - I see where you are going with this (thanks for a well phrased question ^_^)

You may want to consider adding a class called "hidden" which sets the style "display:none;". This is easily set and unset from javascript and allows you to have the dropdowns already in the markup. If they are in the markup then it's easier to set the [onSelectedValueChanged]* event.
Does that help?
*I am unsure of the exact name of the event

Member 11709123 23-Jun-15 13:51pm

thanks, i understand it now

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

F-ES Sitecore · Accepted Answer · 2015-06-23T06:48:00

Solution 1

XML

<button onclick="return myFunction()">Click me</button>

<p id="demo"></p>
<p id="demob"></p>

<script>
    function myFunction() {
        // append the whole html for a select
        document.getElementById("demo").innerHTML += "<select><option value='1'>One</option></select>";

        // or create one programatically and add it to the DOM

        var select = document.createElement("select");

        var option = document.createElement("option");
        option.value = "1";
        option.text = "One";
        select.appendChild(option);

        document.getElementById("demob").appendChild(select);

        return false;
    }
</script>

Posted 23-Jun-15 6:48am

F-ES Sitecore

Comments

Member 11709123 24-Jun-15 11:58am

for the second dropdown, how do i add more than 1 option,

var select = document.createElement("select");

var option = document.createElement("option");
option.value = "1";
option.text = "One";
select.appendChild(option);

im trying to add more than 1 option for the second dropdown and im unable to do that. kindly help

F-ES Sitecore 24-Jun-15 12:12pm

var option = document.createElement("option");
option.value = "1";
option.text = "One";
select.appendChild(option);

option = document.createElement("option");
option.value = "2";
option.text = "Two";
select.appendChild(option);

option = document.createElement("option");
option.value = "3";
option.text = "Three";
select.appendChild(option);

Member 11709123 9-Jul-15 11:41am

So the current dropdown is

option = document.createElement("option");
option.value = "2";
option.text = "Two";
select.appendChild(option);

But how do i include a coldfusion query as dropdown...option in place of above?

cfselect name="NameList" size="1" query="UserRole_q" value="EmpID" display="Name" selected="#temp#">
<option value="-1"</option>

Button click to show a dropdown

1 solution

Solution 1

Add your solution here

Preview 0

Button click to show a dropdown

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us