Click here to Skip to main content
15,910,211 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i have two dropdownlist in one span
same down down list in second span
both span select hours and minute form drop down
for this i use this code

SQL
<select id="hourselect" size="1" onclick="loadhourselector()"></select>
                           <select id="minuteselect" size="1" onclick="loadminuteselector()"></select>



C#
function loadhourselector()
        {
            var start_time = 00;
            var end_time = 23;
            for (var i = start_time; i <= end_time; i++)
            {
                node = document.createElement("Option");
                textnode = document.createTextNode(i);
                node.appendChild(textnode);
                document.getElementById("hourselect").appendChild(node);

            }
        }
        function loadminuteselector()
        {
            var start_time = 00;
            var end_time = 59;
            for (var i = start_time; i <= end_time; i++)
            {
                node = document.createElement("Option");
                textnode = document.createTextNode(i);
                node.appendChild(textnode);
                document.getElementById("minuteselect").appendChild(node);
            }
        }


this work for fist span drop down list but when i want to apply on second span it not take input
why??
code for second span



SQL
<select id="hourselect" size="1" onclick="loadhourselector()"></select>
                            <select id="minuteselect" size="1" onclick="loadminuteselector()"></select>
Posted
Comments
kbrandwijk 4-Sep-14 6:51am    
Providing the right tags helps a lot in getting the right answers. This is a HTML / Javascript question, that has nothing to do with C#. Please update tags accordingly.
Gihan Liyanage 4-Sep-14 7:09am    
Both codes for 2 spans are same.. Is it mistake when writing here, or even in the code ???

1 solution

You have duplicate id's, in both spans, the selects have id 'hourselect' and 'minuteselect'.
In your JS functions, you call document.getElementById. Depending on which browser you use, you can get different behavior because of duplicate id's.

You should probably use the loadhourselector(this) pattern, and use the 'this' passed to the function to call appendChild on:
JavaScript
function loadhourselector(element)
{
    var start_time = 00;
    var end_time = 23;
    for (var i = start_time; i <= end_time; i++)
    {
        node = document.createElement("Option");
        textnode = document.createTextNode(i);
        node.appendChild(textnode);
        element.appendChild(node);
    }
}

HTML
<select id="hourselect" size="1" onclick="loadhourselector(this)"></select>
 
Share this answer
 
Comments
Member 10891595 4-Sep-14 7:24am    
sir ur code is work well with first span but did not work for second span what can i do
because it is worthless to write fuction again and again for every span
Member 10891595 4-Sep-14 7:49am    
and ur code is work for every span but problem is that if i m click on dropdown twice its contenct is append double time how can i prevent it to append again
i want to append hour in first drop down and minute in second drop down
hour in first is 0 to 23 and minute range is 0 to 59
kbrandwijk 4-Sep-14 11:43am    
You could either clear the dropdown in the beginning of the method, while(element.options.length) { element.remove(0) }; or check if the dropdown already contains options before adding the options , if (!element.options.length)

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

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900