Select Multiple with Material Design Lite

Asked

Viewed 109 times

1

How to make a <select multiple> with the CDM?

I looked at the website but found nothing. I saw that the Angularjs has it but not the use in the project

html-select material-design multiple

1 answer

0


Two very simple examples:

Using as a basis the menu component, added the checkbox options

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<button id="demo" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>

<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="demo">
    <li class="mdl-list__item">
        <span class="mdl-list__item-primary-content">
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="0">
                <input type="checkbox" value="foo" id="0" name="foobar[]" class="mdl-checkbox__input" />
                foo
            </label>
        </span>
    </li>
    <li class="mdl-list__item">
        <span class="mdl-list__item-primary-content">
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="1">
                <input type="checkbox" value="bar" id="1" name="foobar[]" class="mdl-checkbox__input" />
                bar
            </label>
        </span>
    </li>
    <li class="mdl-list__item">
        <span class="mdl-list__item-primary-content">
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="2">
                <input type="checkbox" value="baz" id="2" name="foobar[]" class="mdl-checkbox__input" />
                baz
            </label>
        </span>
    </li>
</ul>

With the library getmdl-select:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<link rel="stylesheet" href="http://creativeit.github.io/getmdl-select/getmdl-select.min.css">
<script defer src="http://creativeit.github.io/getmdl-select/getmdl-select.min.js"></script>


<div class="mdl-textfield mdl-js-textfield getmdl-select">
  <input type="text" value="" class="mdl-textfield__input" id="sample2" readonly>
  <input type="hidden" value="" name="sample2">
  <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
  <label for="sample2" class="mdl-textfield__label">Country</label>
  <ul for="sample2" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
    <li class="mdl-list__item">
      <span class="mdl-list__item-primary-content">
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="0">
                <input type="checkbox" value="foo" id="0" name="foobar[]" class="mdl-checkbox__input" />
                foo
            </label>
        </span>
    </li>
    <li class="mdl-list__item">
      <span class="mdl-list__item-primary-content">
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="1">
                <input type="checkbox" value="bar" id="1" name="foobar[]" class="mdl-checkbox__input" />
                bar
            </label>
        </span>
    </li>
    <li class="mdl-list__item">
      <span class="mdl-list__item-primary-content">
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="2">
                <input type="checkbox" value="baz" id="2" name="foobar[]" class="mdl-checkbox__input" />
                baz
            </label>
        </span>
    </li>
  </ul>
</div>

Browser other questions tagged html-select material-design multiple

You are not signed in. Login or sign up in order to post.