我已阅读了“组件”列表并阅读了所提供的CSS，但我没有看到任何选择框的提及 - 只是常规输入;文本，广播，复选框，文本区域等。
如何将Material Design Lite与选择框一起使用？ 使用常规文本输入的类将您带到中途，但肯定不正确。
答案 0 :(得分：29)
这对我来说效果很好（以燃料为例）：
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<select class="mdl-textfield__input" id="octane" name="octane">
<option></option>
<option value="85">85</option>
<option value="87">87</option>
<option value="89">89</option>
<option value="91">91</option>
<option value="diesel">Diesel</option>
</select>
<label class="mdl-textfield__label" for="octane">Octane</label>
</div>
没有库或任何东西只需要标准的MDL CSS和JavaScript。
答案 1 :(得分：13)
目前，我所做的是JavaScript中的菜单。无论如何，我都需要在JavaScript中执行此操作，因此仅使用菜单而不是下拉菜单不是问题。希望你觉得它很有用！
<div id="insert-here"></div>
<script>
var onSelect = function(){
this.button.innerHTML = this.innerHTML;
}
var insertPoint = 'insert-here';
var numberOfDropdowns = 0;
function makeDropdown(options){
// create the button
var button = document.createElement('BUTTON');
button.id = numberOfDropdowns; // this is how Material Design associates option/button
button.setAttribute('class', 'mdl-button mdl-js-button');
button.innerHTML = 'Default';
document.getElementById(insertPoint).appendChild(button);
// add the options to the button (unordered list)
var ul = document.createElement('UL');
ul.setAttribute('class', 'mdl-menu mdl-js-menu mdl-js-ripple-effect');
ul.setAttribute('for', numberOfDropdowns); // associate button
for(var index in options) {
// add each item to the list
var li = document.createElement('LI');
li.setAttribute('class', 'mdl-menu__item');
li.innerHTML = options[index];
li.button = button;
li.onclick = onSelect;
ul.appendChild(li);
}
document.getElementById(insertPoint).appendChild(ul);
// and finally add the list to the HTML
numberOfDropdowns++;
}
var optionsA = ["a", "b", "c", "d"];
makeDropdown(optionsA);
var optionsB = ["e", "f", "g", "h"];
makeDropdown(optionsB);
</script>
答案 2 :(得分：4)
我也遇到了同样的问题。实现自己永远是伟大的，但如果你想节省时间，这个库做得很好。 https://github.com/MEYVN-digital/mdl-selectfield。只需将此文件与JS文件一起添加到<head>：
<div class="mdl-selectfield mdl-js-selectfield">
<select id="myselect" name="myselect" class="mdl-selectfield__select">
<option value=""></option>
<option value="option0_value">option 0</option>
<option value="option1_value">option 1</option>
</select>
<label class="mdl-selectfield__label" for="myselect">Choose option</label>
</div>
答案 3 :(得分：2)
Project Polymer is by Google and its the best option for various components that are missing from Material Design lite. You can find details on how to get polymer elements here https://elements.polymer-project.org/guides/using-elements
Specifically, you can find a select dropdown web component here - https://elements.polymer-project.org/elements/paper-dropdown-menu?view=demo:demo/index.html
答案 4 :(得分：2)
我在Angular2应用程序中使用这个。设置/安装/使用很容易：
https://github.com/mebibou/mdl-selectfield
npm install mdl-selectfield
然后包括CSS和JS：
<link rel="stylesheet" href="./node_modules/mdl-selectfield/dist/mdl-selectfield.min.css">
然后在HTML中添加类。这是一个例子：
<div class="mdl-selectfield mdl-js-selectfield">
<select id="gender" class="mdl-selectfield__select">
<option value=""></option>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
</select>
<label class="mdl-selectfield__label" for="gender">User gender</label>
<span class="mdl-selectfield__error">Select a value</span>
</div>
答案 5 :(得分：1)
我使用jquery代码和类css来输入类型文本，如下所示：
jquery代码：
$(document).ready(function () {
$("select").change(function () {
if ($('#' + $(this).attr("id") + ' option:selected').val() === '') {
$(this).parent('div').removeClass('is-dirty');
} else {
$(this).parent('div').addClass('is-dirty');
}
});
});
在html中（第一个选项必须为空）：
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<select id="example" class="mdl-textfield__input">
<option value=""></option>
<option value="1">Option</option>
</select>
<label class="mdl-textfield__label is-dirty" for="example">example</label>
</div>
答案 6 :(得分：0)
我知道这则帖子很旧。但是，我有一个不同的解决方案，对我来说非常有用，并希望分享。
我建立在@John Knott的解决方案的基础上，将mdl textfield与select作为mdl-textfield__input + @ user2255242的菜单解决方案一起使用，但不涉及js。
这是说明解决方案的小提琴。
HTML-我已经使用文本字段+菜单（ul + li）来进行选择，其余部分由CSS来完成。
<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>
<div id="app">
<div class="sorter-holder">
<!-- the textfield, notice the readonly on input -->
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" v-model="sortBy" id="sorterHolder" readonly>
<label class="mdl-textfield__label" for="sorterHolder">Sort by</label>
</div>
<!-- menu which will act as the options of select. The menu is for the input, and not the div which has mdl-textfield class -->
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect sorter-menu" for="sorterHolder">
<li class="mdl-menu__item" v-for="srtr in sortables" @click="update(srtr)">{{ srtr }}</li>
</ul>
</div>
</div>
CSS-主要部分是CSS
/*
The menu is positioned absolute, and it's positions are calculated dynamically (I think). I wanted it to extend for the entire width of input, and for that needed a relative parent.
Also, the display inline-block was not required in where I actually implemented it. Over there, it was block. So, this might need to change according to layout. */
.sorter-holder {
position: relative;
display: inline-block;
}
/* just giving them a width of 100% to extend for the entire textfield */
.sorter-holder .mdl-menu__outline,
.sorter-holder .mdl-menu__container,
.sorter-menu {
width: 100% !important;
}
VueJS-该示例在Vue JS中，但可以在任何其他框架中轻松复制，因为主要是由HTML + CSS执行的
new Vue({
el: "#app",
data: {
sortables: [
'Name (A-Z)',
'Name (Z-A)',
'Newest First',
'Oldest First'
],
sortBy: null
},
methods: {
update: function (sortBy) {
this.sortBy = sortBy;
}
}
})
为什么我要这样做？
菜单在视觉上比默认浏览器的选择框更好。但是，不想在select的选项上做一些CSS魔术。而且，这似乎比这容易。
这可以通过许多其他方式来完成。我发现它更好，并在我的一个项目中实施。希望能帮助到你！ ：）
答案 7 :(得分：0)
您可以使用现有组件来重新创建它。使用特定的文本字段和菜单。
注意：我在 mdl-textfield 中添加了 mdl-select ，在中添加了 mdl-select-option mdl-menu__item 。
<div class="mdl-textfield mdl-select mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="formState" name="pageCollection" value="">
<label class="mdl-textfield__label" for="formState">State...</label>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="formState">
<li class="mdl-menu__item mdl-select-option">CA</li>
<li class="mdl-menu__item mdl-select-option">WA</li>
<li class="mdl-menu__item mdl-select-option">IA</li>
</ul>
但是，您仍然需要添加一些JavaScript。
var mdlAddon = {
_select: function(){
var e = document.querySelectorAll('.mdl-select-option');
for(var i = 0; i < e.length; i++){
e[i].addEventListener('click', function(event){
var value = event.target.innerText;
var id = event.target.parentElement.getAttribute('for');
var target = document.getElementById(id);
target.value = value;
target.parentElement.classList.add('is-dirty');
});
}
},
}
mdlAddon._select();
这会将事件侦听器添加到所有mdl-select-option，但是您可以通过添加onclick =“”来轻松更改它。
我也建议这样做，以使用户无法实际在文本框中键入内容。
var mdlAddon = {
_select: function(){
var e = document.querySelectorAll('.mdl-select-option');
for(var i = 0; i < e.length; i++){
e[i].addEventListener('click', function(event){
var value = event.target.innerText;
var id = event.target.parentElement.getAttribute('for');
var target = document.getElementById(id);
target.value = value;
target.parentElement.classList.add('is-dirty');
});
}
var e = document.querySelectorAll('.mdl-select');
for(var i = 0; i < e.length; i++){
e[i].addEventListener('keydown', function(event){
event.preventDefault();
});
}
},
}
mdlAddon._select();
只需确保在加载元素后运行它。这很简单，但是至少在使用MDL时不需要额外的CSS。
答案 8 :(得分：-1)
无论如何，看看Angular Material团队如何实施它：https://material.angularjs.org/latest/#/demo/material.components.select
是的，就像输入+下拉
一样答案 9 :(得分：-1)
虽然谷歌团队正在研究这个问题，但我需要为这个问题创建一个快速简便的解决方案并编写一个javascript / jquery函数：