Function that creates a drop down menu
Question
So the first thing i have to say, this is for school and I'm not allowed to use JQuery and such things.
What i want to do is, to write a function that creates when I call it a drop down menu with a specific length, for a drop down menu for dates.
function date(start, end) {
var dateV ="";
for(i=start;i<=end;i++)
dateV += "<option value='"+i+"'>"+i+"</option>";
document.write(dateV);
}
The Vars start and end are for the loop, as an example for the year i use 1900 as start and 2014 as end.
This function is written in an external File (how we are supposed to do it) but it isn't working . But it is working if i write this function in the HTML Header
I tried to call it like this:
Day:
<select name="tag">
<script type="text/javascript" src="myjsfile.js">
date(1,31);
</script>
</select>
So know i would like to now why it isnt working in an external File but in the header. Lots of people already told me that document.write() could be the problem. if this is the problem what other function could i use?.
EDIT:
How i call it:
<select name="tag" id="dd1">
<script type="text/javascript">
date(1,31,dd1);
</script>
</select>
And thats the function in an external file:
function date(start,end,div) {
var select1 = document.getElementById(div);
for(i=start;i<=end;i++){
var option = document.createElement("option");
option.text = i;
option.value= i;
select1.add(option);
}
}
The third new parameter is to keep it static because i need a dropdown menu for days, months and years and then i need a new id every time(or?)
2 answers
solution1
1 ACCPTED 2014-03-03 07:13:23
Day:
<select name="tag" id="ddl">
</select>
<script>
date(1,23);
function date(start,end)
{
var select1 = document.getElementById("ddl");
for(i=start;i<=end;i++){
var option = document.createElement("option");
option.text = i;
option.value= i;
select1.add(option);
}
}
</script>
Now its perfect JScript
Yes it does not use " $ " sign ,It is pure Javascript.There is no need of JQuery now.
Explanation =>
1)First i created variable "select1" which stores HTML element "ddl" (got it be its id).
2)Then we have start and end value. So till the value ends , Create HTML element "option" And store in it i)Value to be in <option> tag and ii)Text in it.
3) Then add that variable as child in the variable "select1".
//NEW CODE According to you
<html>
<head>
</head>
<body>
Day:
<select name="tag" id="ddl">
</select>
<script src="stk.js" type="text/javascript">
</script>
<script>
date(1,23);
</script>
</body>
</html>
//stk.js
function date(start,end)
{
var select1 = document.getElementById("ddl");
for(i=start;i<=end;i++){
var option = document.createElement("option");
option.text = i;
option.value = i;
select1.add(option);
}
}
solution2
0 2014-03-03 07:23:15
You can manage this way, try this code
Add id in HTML code
<select name="tag" id="dd"></select>
javascript
<script>
function date(start, end) {
var dateV ="";
for(i=start;i<=end;i++)
dateV += "<option value='"+i+"'>"+i+"</option>";
document.getElementById('dd').innerHTML = dateV;
}
date(1, 10);
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.