我已经阅读了组件列表并阅读了提供的 CSS，但我没有看到任何提及选择框 - 只是常规输入；文本、单选、复选框、文本区域等。
您如何使用带有选择框的 Material Design Lite？将这些类用于常规文本输入可以帮助您完成一半，但这肯定是不正确的。
问问题
48838 次
10 回答
46
这对我来说效果很好（以燃料为例）：
<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 src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<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。
于 2017-04-14T01:53:10.200 回答
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>
jsFiddle 链接：https ://jsfiddle.net/zatxzx6b/3/embedded/result/
于 2015-07-29T19:13:43.547 回答
5
我也遇到了同样的问题。自己实现总是很棒，但如果你想节省时间，这个库做得很好。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>
于 2016-07-10T19:49:37.253 回答
3
我在 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>
于 2016-06-08T00:13:04.393 回答
2
Project Polymer 由 Google 提供，它是 Material Design lite 中缺少的各种组件的最佳选择。您可以在此处找到有关如何获取聚合物元素的详细信息https://elements.polymer-project.org/guides/using-elements
具体来说，您可以在此处找到一个选择下拉 Web 组件 - https://elements.polymer-project.org/elements/paper-dropdown-menu?view=demo:demo/index.html
于 2015-09-29T00:42:42.927 回答
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>
于 2015-12-24T20:17:14.633 回答
0
您可以使用已经存在的组件重新创建它。具体使用文本字段和菜单。
注意：我将mdl-select添加到mdl-textfield并将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。
于 2020-08-15T18:49:25.517 回答
0
我知道这篇文章很旧。但是，我有一个不同的解决方案，它对我很有用，并想分享。
我以@John Knott 的解决方案为基础，使用 mdl textfield 和 select as 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;
}
}
})
为什么我这样做？
菜单看起来比默认浏览器的选择框在视觉上更好。但是，不想对选择的选项做一些 css 魔术。而且，这似乎比那更容易。
这可以通过许多其他方式来完成。我发现它更好，并在我的一个项目中实施。希望能帮助到你！:)
于 2018-08-18T10:32:39.790 回答
-1
无论如何，看看Angular Material团队是如何实现它的：https ://material.angularjs.org/latest/#/demo/material.components.select
是的，就像输入+下拉菜单一样
于 2015-07-10T07:53:34.770 回答
-1
当 Google 团队正在研究这个问题时，我需要为这个问题创建一个快速简单的解决方案，并编写了一个 javascript/jquery 函数：
于 2015-08-06T23:31:44.537 回答