Question 229868 in Html Question posted in
Some basic documentation can be found here.

Html – Can I get option elements from another file?

I’m working on creating a basic Naming Convention app. I’ve created a basic structure for it. The form has select elements and from dropdown, user will pick the best suitable option.

But there’s one select element that has over 300+ different option. And using them in index.html is a lot of lines and readibility is horrible. Is there any way I can get option’s from another file so that my html file would look clean?

Thanks in advance 🙂

I’ve searched online but none of those solutions resolved my problem. I just want a basic solution.

Tags:

2

Answers


  1. 0

    Main html file:

    <html>
    <head>
    </head>
    <body>
        <object name="combo" type="text/html" data="b.html">
        </object>
    </body>
</html>

    Included content (b.html) :

    <select id="combo1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="3">4</option>
</select>
    Login or Signup to reply.
  2. 0

    You can put your select options to the template at the bottom of the index page. Then use JavaScript to populate the list.

    <html>
<body>
    <!-- Your HTML here... -->
    <form method="GET">
        <select id="mySelect" name="list"></select>
        <button type="submit">Submit</button>
    </form>
    <!-- Other html... -->
    <!-- Options at the bottom of the file -->
    <script id="options" type="html/template">
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
    </script>
    <script type="text/javascript">
        var options = document.getElementById("options");
        var list = document.getElementById("mySelect");
        list.innerHTML = options.innerHTML;
    </script>
</body>
</html>

    In practice, however, such a long list of options is populated using server-side templates or dynamically loaded content. The solution depends on the technological stack. If you develop a small web application that will be hosted on a web server, you might want to consider JavaScript fetch function.

    Index.htm:

    <html>
<body>
    <!-- Your HTML here... -->
    <form method="GET">
        <select id="mySelect" name="list"></select>
        <button type="submit">Submit</button>
    </form>
    <!-- Other html... -->
    <!-- JavaScript to populate the list -->
    <script type="text/javascript">
        const request = (async () => {
            const response = await fetch("List.htm");
            const options = await response.text();

            var list = document.getElementById("mySelect");

            list.innerHTML = options;
        })();
    </script>
</body>
</html>

    List.htm:

    <option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search