Custom Select

You can handle the onclick action on a select input element to make your own select, if you set the attribute data-ts.custom="true". Following example is custom user select, which made step by step.

1. Create your own select input element.

<form data-ts="Form">
	<fieldset>
		<label>
			<span>Select</span>
			<select id="mySelect" data-ts.custom="true">
				<option value=""></option>
				<option value="Karl Benson">Karl Benson</option>
				<option value="Marshall Garrett">Marshall Garrett</option>
				<option value="Natalie Carr">Natalie Carr</option>
				<option value="Rochelle Cox">Rochelle Cox</option>
				<option value="Mae Schultz">Mae Schultz</option>
				<option value="Jimmie Edwards">Jimmie Edwards</option>
			</select>
		</label>
	</fieldset>
</form>

2. Create your own Aside and fill up options in the panel of the Aside

<aside data-ts="Aside" data-ts.title="Custom Select" id="myAside">
	<div data-ts="Panel" class="user-container">
		<div name="Karl Benson">
			<img data-ts="UserImage" alt="Karl Benson"/>
			<span>Karl Benson</span>
		</div>
		<div name="Marshall Garrett">
			<img data-ts="UserImage" alt="Marshall Garrett"/>
			<span>Marshall Garrett</span>
		</div>
		<div name="Natalie Carr">
			<img data-ts="UserImage" alt="Natalie Carr"/>
			<span>Natalie Carr</span>
		</div>
		<div name="Rochelle Cox">
			<img data-ts="UserImage" alt="Rochelle Cox"/>
			<span>Rochelle Cox</span>
		</div>
		<div name="Mae Schultz">
			<img data-ts="UserImage" alt="Mae Schultz"/>
			<span>Mae Schultz</span>
		</div>
		<div name="Jimmie Edwards">
			<img data-ts="UserImage" alt="Jimmie Edwards"/>
			<span>Jimmie Edwards</span>
		</div>
	</div>
</aside>

3. Handle the onClick event of the options

$(document).ready(function() {
	$(".user-container div").click(function(e){
		var name = $(e.currentTarget).attr("name");
		ts.ui.get("#myAside", aside => aside.close());
		$("#mySelect").val(name);
		ts.ui.Notification.success(name);
	});
});

4. You can run the following code first.

$("#mySelect").click(function(){
	ts.ui.get("#myAside", aside => {
		aside.open();
	})
});

5. Click the select below to check how it works. Good luck!