Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Select component passed to Vanilla JS. Handle options and normally fix all known issues. #2670

Closed
wants to merge 6 commits into from
Closed

Select component passed to Vanilla JS. Handle options and normally fix all known issues. #2670

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
58b51f4
Select component passed to Vanilla JS. Normally fix all known issues.
Jan 17, 2016
afea5f9
CSS oversights.
Jan 17, 2016
f9b040c
Add options for select.
Jan 18, 2016
488c1e0
Update the documentation.
Jan 18, 2016
4b42ffa
Specify some details options.
Jan 18, 2016
88c9706
Update documentation with example.
Jan 18, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 87 additions & 4 deletions forms.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -413,7 +413,20 @@ <h2 class="header">Select</h2>
<option value="4">Option 4</option>
</optgroup>
</select>
<label>Optgroups</label>
<label>Materialize Select with Optgroups</label>
</div>
<div class="input-field col s12 m6">
<select multiple>
<optgroup label="team 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</optgroup>
<optgroup label="team 2">
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</optgroup>
</select>
<label>Materialize Multiple Select with Optgroups</label>
</div>
<div class="col s12">
<br>
Expand Down Expand Up @@ -474,6 +487,20 @@ <h2 class="header">Select</h2>
&lt;label>Materialize Multiple Select&lt;/label>
&lt;/div>

&lt;div class="input-field col s12">
&lt;select>
&lt;optgroup label="team 1">
&lt;option value="1">Option 1&lt;/option>
&lt;option value="2">Option 2&lt;/option>
&lt;/optgroup>
&lt;optgroup label="team 2">
&lt;option value="3">Option 3&lt;/option>
&lt;option value="4">Option 4&lt;/option>
&lt;/optgroup>
&lt;/select>
&lt;label>Materialize Select with Optgroups&lt;/label>
&lt;/div>

&lt;div class="input-field col s12">
&lt;select multiple>
&lt;optgroup label="team 1">
Expand All @@ -485,7 +512,7 @@ <h2 class="header">Select</h2>
&lt;option value="4">Option 4&lt;/option>
&lt;/optgroup>
&lt;/select>
&lt;label>Optgroups&lt;/label>
&lt;label>Materialize Multiple Select with Optgroups&lt;/label>
&lt;/div>

&lt;div class="input-field col s12 m6">
Expand Down Expand Up @@ -570,15 +597,71 @@ <h4>Initialization</h4>
</code></pre>
</div>
<div class="col s12">
<h4>Updating/Destroying Select</h4>
<p>If you want to update the items inside the select, just rerun the initialization code from above after editing the original select. Or you can destroy the material select with this function below, and create a new select altogether</p>
<h4>Initialization with options</h4>
<p>You can initialize the select element with some options.</p>
<pre><code class="language-javascript col s12">
$(document).ready(function() {
$('select').material_select({
'hover': false,
'belowOrigin': true,
'maxWidth': 500, // width 500px
'maxHeight': 200, // height 200px
'arrangement': 'top' // Open the dropdown to top
});
});
</code></pre>
</div>
<div class="col s12">
<h4>Updating Select</h4>
<p>You can update the material select by passing new values with this function below, in this case you don't need to use the destroying select function.</p>
<pre><code class="language-javascript">
$('select').val([value1, value2]).trigger('update'); // for multiple select
$('select').val(value).trigger('update'); // for single select
</code></pre>
</div>
<div class="col s12">
<h4>Destroying Select</h4>
<p>Or you can destroy the material select with this function below, and create a new select altogether</p>
<pre><code class="language-javascript">
$('select').material_select('destroy');
</code></pre>
</div>
</div>
</div>

<div id="select-option" class="section">
<h4>Options</h4>
<table class="striped">
<thead>
<tr>
<th>Option name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>hover</td>
<td>If true, the dropdown will open on hover. Default: false. Available: true. Typeof: boolean</td>
</tr>
<tr>
<td>belowOrigin</td>
<td>If true, the dropdown will show below the activator. Default: false. Available: true. Typeof: boolean</td>
</tr>
<tr>
<td>maxHeight</td>
<td>Defines the max-height CSS property of the dropdown Default: null. Typeof: number (100)</td>
</tr>
<tr>
<td>maxWidth</td>
<td>Defines the max-width CSS property of the dropdown. Default: null. Typeof: number (100)</td>
</tr>
<tr>
<td>arrangement</td>
<td>Defines the direction of the opening menu (dropdown). Default: 'bottom'. Available: 'bottom'. Typeof: string</td>
</tr>
</tbody>
</table>
</div>

<div id="radio" class="section scrollspy">
<h2 class="header">Radio Buttons</h2>
Expand Down
Loading