JSFiddle - React, Tailwind, and code Playground
JavaScript
var input = $("<select>").attr("multiple", "multiple").attr("size", "4");
var op = $("<option>").attr("value", "bbb").attr("label", "choice bbb2").text("bbb2").attr("selected","selected");
input.append(op);
op = $("<option>").attr("value", "ccc").attr("label", "choice ccc3").text("ccc3");
input.append(op);
op = $("<option>").attr("value", "ddd").attr("label", "choice ddd4").text("ddd4").attr("selected","selected");
input.append(op);
$("body").append(input);
// disabled one
var input = $("<select>").attr("multiple", "multiple").attr("size", "4").attr("disabled", "disabled");
var op = $("<option>").attr("value", "bbb").attr("label", "choice bbb2").text("bbb2").attr("selected","selected");
input.append(op);
op = $("<option>").attr("value", "ccc").attr("label", "choice ccc3").text("ccc3");
input.append(op);
op = $("<option>").attr("value", "ddd").attr("label", "choice ddd4").text("ddd4").attr("selected","selected");
input.append(op);
$("body").append(input);
// these two use selection using val()
var input = $("<select>").attr("multiple", "multiple").attr("size", "4");
var op = $("<option>").attr("value", "bbb").attr("label", "choice bbb2").text("bbb2");
input.append(op);
op = $("<option>").attr("value", "ccc").attr("label", "choice ccc3").text("ccc3");
input.append(op);
op = $("<option>").attr("value", "ddd").attr("label", "choice ddd4").text("ddd4");
input.append(op);
input.val(["bbb","ddd"]);
$("body").append(input);
// disabled one
var input = $("<select>").attr("multiple", "multiple").attr("size", "4").attr("disabled", "disabled");
var op = $("<option>").attr("value", "bbb").attr("label", "choice bbb2").text("bbb2");
input.append(op);
op = $("<option>").attr("value", "ccc").attr("label", "choice ccc3").text("ccc3");
input.append(op);
op = $("<option>").attr("value", "ddd").attr("label", "choice ddd4").text("ddd4");
input.append(op);
input.val(["bbb","ddd"]);
$("body").append(input);
// also note that in Firefox labels in option tags are not...