Beginner's Guide • Light Theme • Zero Build Steps

How to Create HTML Select Dropdowns
Using CDN & window.ks

Need to render a dynamic <select> element from an array of strings or records in JSON? This tutorial shows you how to populate and mount a fully functional dropdown in the browser DOM in just a few lines of code—without hand-crafting <option> loops or string concatenation.

💡 How It Works ⚡ Method 1: byCdn (Direct Import) 🌐 Method 2: byKs (window.ks) ⚖️ Comparison 🎮 Live Interactive Demo

Architecture

What Happens When You Render a Select Dropdown?

The 4-stage pipeline that turns your JSON items into browser DOM elements.

1 JSON Input

Input JSON Array

An array of string values or records from your API or data.json:

[
  "State Bank of India",
  "HDFC Bank",
  "ICICI Bank"
]

Step 1: Raw Data →

2 Orchestrator

json-renderers Call

You execute the renderer passing type: "select" and your target DOM ID:

render({
  type: "select",
  data: data.LedgerName,
  targetHtmlId: "container"
});

Step 2: Builder Call →

3 DOM Engine

json-to-tag Creation

@keshavsoft/json-to-tag converts the specification into true browser elements:

<select class="form-select">
<option>State Bank...</option>
<option>HDFC Bank</option>
</select>

Step 3: Native DOM Nodes →

4 Live Mount

Mounted in Page

The dropdown is mounted into your container element, ready for user interactions:

<div id="container">
  <!-- <select> appears here! -->
</div>

Step 4: Interactive in Browser ✓

Sample Path: samples/select/byCdn/

Method 1: Direct CDN Import (byCdn)

▶️ Run samples/select/byCdn →

How byCdn Works

In this setup, your JavaScript file imports the default render function directly from the CDN link as an ES Module. Then, you call render({ type: "select", data, targetHtmlId }).

1. index.html (HTML Markup)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Select DOM Renderer Sample - json-renderers</title>

  <!-- Bootstrap CSS for clean dropdown styling -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
  <main class="container-fluid py-4">
    <h1>Select DOM Renderer Demo</h1>

    <!-- 1. Target container where the <select> is mounted -->
    <div id="dom-render-container">
      <div class="text-center py-5 text-muted">Rendering select dropdown...</div>
    </div>
  </main>

  <!-- 2. Load ES Module script -->
  <script type="module" src="./index.js"></script>
</body>
</html>

The container #dom-render-container is all that the runtime needs. The old placeholder content is replaced automatically.

2. index.js (JavaScript Logic)

// 1. Import render directly from jsDelivr CDN
import render from "https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js";

// 2. Import JSON data
import data from "./data.json" with { type: "json" };

const start = () => {
  try {
    // 3. Render select dropdown
    render({
      type: "select",
      data: data.LedgerName,               // Array of option items
      targetHtmlId: "dom-render-container", // Target container ID
      showLog: false
    });
  } catch (err) {
    console.log("error : ", err);
  }
};

start();

Advantage: Self-contained, tree-shakeable, and standard modern ES module behavior.

Sample Path: samples/select/byKs/

Method 2: Global window.ks (byKs)

▶️ Run samples/select/byKs →

How byKs Works

In this setup, you import the CDN bundle once for its side-effects (import "https://...";). The bundle automatically attaches its rendering method to the global browser scope: window.ks.jsonRenderers.renderToDom.

1. index.html (HTML Markup)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Select DOM Renderer Sample - json-renderers</title>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
  <main class="container-fluid py-4">
    <h1>Select DOM Renderer Demo</h1>

    <!-- Target container -->
    <div id="dom-render-container">
      <div class="text-center py-5 text-muted">Rendering select dropdown...</div>
    </div>
  </main>

  <!-- Load Module script -->
  <script type="module" src="./index.js"></script>
</body>
</html>

The HTML markup is identical between both methods, keeping your page structure clean.

2. index.js (Using window.ks)

// 1. Load bundle for side effects (registers window.ks)
import "https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js";

// 2. Import JSON data
import data from "./data.json" with { type: "json" };

const start = () => {
  try {
    // 3. Call the globally attached function:
    // window.ks.jsonRenderers.renderToDom(...)
    window.ks.jsonRenderers.renderToDom({
      type: "select",
      data: data.LedgerName,
      targetHtmlId: "dom-render-container",
      showLog: false
    });
  } catch (err) {
    console.log("error : ", err);
  }
};

start();

Advantage: Ideal when other files or scripts need to render selects without importing render repeatedly.

Side-by-Side

byCdn vs byKs Quick Comparison

Comparing syntax and usage patterns.

Feature	byCdn (Direct Module Import)	byKs (Global window.ks)
Import Statement	`import render from ".../min.js";`	`import ".../min.js";`
Execution Call	`render({ type: "select", ... });`	`window.ks.jsonRenderers.renderToDom({ ... });`
Global Variable	None (encapsulated within module)	Exposed at `window.ks.jsonRenderers`
Best Use Case	Modular frontend apps, Vite, Webpack, modern SPAs	Legacy codebases, multi-script pages, rapid prototyping in DevTools
Sample Path	samples/select/byCdn/	samples/select/byKs/

Options Guide

Select Configuration Options

Everything you can pass to the render function for select dropdowns.

type Required

Must be "select" to render a select dropdown.

type: "select"

targetHtmlId Required

The id of the element where the select element will be mounted.

targetHtmlId: "dom-render-container"

data Required

An array of strings (e.g. ["Option 1", "Option 2"]) or objects.

data: ["HDFC Bank", "SBI"]

showLog Optional

Boolean (true / false). Enables console debug information.

showLog: false

🌐

How to Populate Select Using fetch() from a REST API

If you are fetching options asynchronously from a backend endpoint or a local JSON file, wrap the call inside an async/await function:

// 1. Import renderer
import render from "https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js";

async function loadDropdown() {
  try {
    // 2. Fetch the JSON data
    const response = await fetch("./data.json");
    const json = await response.json();

    // 3. Mount select dropdown into DOM
    render({
      type: "select",
      data: json.LedgerName,               // e.g. ["Bank A", "Bank B", "Bank C"]
      targetHtmlId: "dom-render-container"
    });
  } catch (error) {
    console.error("Failed to load select options:", error);
  }
}

loadDropdown();

Live Sandbox

Interactive Select Playground

Test both CDN import and window.ks rendering right now in your browser.

⚙️ Interactive Controls

Rendering Mode:

Choose Dataset Preset:

Generated JavaScript:

render({
  type: "select",
  data: ["HDFC Bank", "State Bank of India", ...],
  targetHtmlId: "live-select-output"
});

Container: `#live-select-output`

Ready

Rendered <select> Element:

Click "Render Select to DOM Now" to mount the dropdown.

Currently Selected Value: (None selected yet)

💻 Execution Status & Logs

[Ready] Select renderer module loaded. Ready to mount.

Run Samples in Browser

Both select samples are available locally in the repository:

⚡

samples/select/byCdn

Direct ES Module CDN import demo.

Open Sample →

🌐

samples/select/byKs

Global window.ks namespace demo.