简体   繁体   English

创建下拉菜单的功能

[英]Function that creates a drop down menu

So the first thing i have to say, this is for school and I'm not allowed to use JQuery and such things. 因此,我首先要说的是,这是在学校里,不允许使用JQuery之类的东西。

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. Vars的起点和终点用于循环,例如,我使用1900作为起点,使用2014作为终点的年份。

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 但它工作 ,如果我写在HTML头这一功能

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. 很多人已经告诉我, document.write()可能是问题所在。 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?) 第三个新参数是使其保持静态,因为我需要几天,几个月和几年的下拉菜单,然后每次都需要一个新的id(或?)

           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);
}               
}

You can manage this way, try this code 您可以通过这种方式进行管理,尝试以下代码

Add id in HTML code 在HTML代码中添加ID

    <select name="tag" id="dd"></select>

javascript 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>

FIDDLE DEMO 现场演示

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM