Is it possible to use a for loop in <select> in html? and how?

后端 未结 6 1516
不知归路
不知归路 2021-01-05 20:38

I am trying to use a for loop in html but i dont even know if this is possible. Is it? and if yes how? I dont want to use php. only html and javascript.

this is my

相关标签:
6条回答
  • 2021-01-05 20:52

    Lots of answers.... here is another approach NOT using document.write OR innerHTML OR jQuery....

    HTML

    <select id="foo"></select>
    

    JS

    (function() { // don't leak
        var elm = document.getElementById('foo'), // get the select
            df = document.createDocumentFragment(); // create a document fragment to hold the options while we create them
        for (var i = 1; i <= 42; i++) { // loop, i like 42.
            var option = document.createElement('option'); // create the option element
            option.value = i; // set the value property
            option.appendChild(document.createTextNode("option #" + i)); // set the textContent in a safe way.
            df.appendChild(option); // append the option to the document fragment
        }
        elm.appendChild(df); // append the document fragment to the DOM. this is the better way rather than setting innerHTML a bunch of times (or even once with a long string)
    }());
    

    And here is a Fiddle to demo it.

    0 讨论(0)
  • 2021-01-05 20:54

    No you can't use a for loop in HTML. HTML is a markup language, you cannot use logical code. However you could use javascript to do your logic depending on what your objective is.

    Here is an example using jQuery, a popular javascript library:

    for(i=0; i<5; i++){
        $("select").append("<option>" + i + "</option>");
    } 
    

    See example: http://jsfiddle.net/T4UXw/

    0 讨论(0)
  • 2021-01-05 20:58

    Yes you can for example write this code in html body tag

    <select>
    <script language="javascript" type="text/javascript"> 
    
    for(var d=1;d<=31;d++)
    {
        document.write("<option>"+d+"</option>");
    }
    </script>
    </select>
    
    0 讨论(0)
  • 2021-01-05 21:00

    HTML is not a programming language, just a markup language, so it doesn't include things like for loops or if statements. Javascript does though. You could use javascript to generate/manipulate the HTML, and thus use for loops to create your <option> tags inside the <select>. As a startup for javascript see checkout w3schools.com

    I don't like using plain javascript though, I would rather choose a javascript framework like jQuery to do this. Using jquery it is really easy to do cross-platform compatible manipulation of the HTML dom using javascript. You would only need to include some extra javascript files inside your HTML to get it working. See http://jquery.com/

    An example of using jquery would be this:

    <select id='myselect'></select>
    <script type='text/javascript'>
    var values=[[1,'tree'],[2,'flower'],[3,'car']];
    for(v in values){
        var option=$('<option></option>');
        option.attr('value',values[v][0]);
        option.text(values[v][1]);
        $('#myselect').append(option);
    }
    </script>
    

    You can also try this out on http://jsfiddle.net/6HUHG/3/

    0 讨论(0)
  • 2021-01-05 21:03

    May be you can play with javascript and innerHTML. Try this

    HTML

    <body onload="selectFunction()">
    <select id="selectId">
    
    </select>
    

    Javascript

    function selectFunction(){  
        var x=0;   
        for(x=0;x<5;x++){
        var option = "<option value='" + x + "'>Label " + x + "</option>"
        document.getElementById('selectId').innerHTML += option;   
        } 
    }   
    
    0 讨论(0)
  • 2021-01-05 21:13

    One way is to use DynamicHTML. Let the html page have a place holder for the options of select tag.

    <select id="selectBox"></select>
    

    In a js file

    var options = ["one","two","three"], selectHtml = "";
    
    for(var optionIndex = 0; optionIndex < options.length; optionIndex++) {
    
        selectHtml += ("<option>" + options[optionIndex] + "</option>");
    
    }
    
    document.getElementById("selectBox").innerHTML = selectHtml;
    

    Put the above code in a function and call that function onload.

    0 讨论(0)
提交回复
热议问题