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

2024/2/27 7:40:16

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 goal: i have a file containing .txt files. i want to count the number of txt files and when i get the number i want to send it to where i will use a for loop to put the txt file's numbers in a dropbox.

Thanks

Answer

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

HTML

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

JS

(function() { // don't leakvar elm = document.getElementById('foo'), // get the selectdf = document.createDocumentFragment(); // create a document fragment to hold the options while we create themfor (var i = 1; i <= 42; i++) { // loop, i like 42.var option = document.createElement('option'); // create the option elementoption.value = i; // set the value propertyoption.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.

http://en.ppmy.cn/q/41446.html

Related Q&A

Next.js dynamic page params for static export

I have page which depends on route params (ex.: slug) like so http://example.com/blog/:slug. This route path is defined properly in my next.config.js file:module.exports = withPlugins(plugins, {exportP…

An unhandled exception occurred: Could not find module @angular-devkit/build-angular

When running the terminal commands ng server or ng serve Im getting this issue:An unhandled exception occurred: Could not find module "@angular-devkit/build-angular"

Javascript sort callback

I need to sort a big list of Javascript items and Im using the sort function like this:var sorted_list = non_sorted.sort(function(a,b){ // Sort stuff here });What Id like to do is to call a function wh…

How to pass data from ASP.NET WebForms to Aurelia Global Scope

I am bootstrapping Aurelia from a Web-forms based legacy application. My authentication related information is maintained in the web-forms application in the Custom Base Page class. How do I pass &…

How can I access style properties on javascript objects which are using external style sheets?

I have an external style sheet with this in it:.box { padding-left:30px; background-color: #BBFF88; border-width: 0; overflow: hidden; width: 400px; height: 150px; }I then have this:<div id="0&…

How do I get VML working in standards mode?

I would like to be able to use vml objects on a page rendering in standards mode rather than quirks mode. Ive found fragments of answers scattered around but cant figure it out. Raphael pulls it off so…

jquery - slideToggle not smooth

I have a problem with the slideToggle function in jQuery. It is not smooth at all. Whenever I click the "See More" button, the content that should slideToggle, just pops out with no effect wh…

Boolean operations on a SVG pathstring

Ive come to a conceptually difficult problem.In short, I need to find the vector path of two vector paths combined through different boolean operations. Such as the Union, the Difference, the Intersect…

line on d3 map not forming a curve

I have created a map using d3.js. I want to show a curved line between two locations. I am able to show a line, but sometimes it does not form a perfect curve. For some lines, the lines curve behind th…

Function declaration - Function Expression - Scope

In javascript, What is the difference between function declaration and function expression in terms of scope? function declaration means we are polluting the global space. Is it the same case with fun…