Select

Owned by Former user (Deleted)
Last updated: Oct 03, 2018
1 min read

Introduction

A simple HTML select dropdown.

Helium View Reference

<select/>

Plain HTML

Output widget
<div class="widget-container">
	<label for="w1">GENDER</label>
	<select id="w1" class="widget input select">
		<option value="null">Not Specified</option>
		<option value="Female">Female</option>
		<option value="Male">Male</option>
		<option value="Other">Other</option>
	</select>
</div>

JavaScript / jQuery

 

Output widget - Programmatically
function drawSelect() {
    var canvas = $('<div />').addClass('widget-container');
    var readOnly = false;
    $('<label />',{
        'for':'w1', 
        'text':'Select label'
    }).appendTo(canvas);
    var input = $('<select />',{
        'id': 'w1', 
        'disabled': readOnly
    }).addClass("widget input select").appendTo(canvas);
    // Add options
    input.append("<option value='null'>Not Specified</option>");
    input.append("<option value='Male'>Male</option>");
    input.append("<option value='Female'>Female</option>");
    input.append("<option value='Other'>Other</option>");
    // Select default
    input.val('Other');
    canvas.appendTo($('#embeddedComponentContent'));
}