Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

Introduction

A simple HTML select dropdown.

Helium View Reference

<select/>

Plain HTML

Output widget
<div class="widget-container">
	<label for="w8">GENDER</label>
	<select id="w8" 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':'w5', 
        'text':'Select label'
    }).appendTo(canvas);
    var input = $('<select />',{
        'id': 'w5', 
        'disabled': readOnly
    }).addClass("widget input select").appendTo(canvas);
    // Add options
    input.append("<option value='null'>Not Specified</option>");
    input.append("<option value='Option_One'>Option_One</option>");
    input.append("<option value='Option_Two'>Option_Two</option>");
    // Select default
    input.val('Option_One');
    canvas.appendTo($('#embeddedComponentContent'));
}
  • No labels