我需要从MaterialiseCSS芯片获取数据,但我不知道,如何。
$('.chips-placeholder').material_chip({
placeholder: 'Stanici přidíte stisknutím klávesy enter',
secondaryPlaceholder: '+Přidat',
});
function Show(){
var data = $('.chips-placeholder').material_chip('data');
document.write(data);
}
<!--Added external styles and scripts-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Html body-->
<div class="chips chips-placeholder"></div>
<button onclick="Show()" type="button">Show</button>
感谢您的帮助。
答案 0 :(得分:8)
因此,要访问数据芯片,您只需要这样做:
var data= $('#id of your chips div').material_chip('data');
alert(data[0].tag);`
&#39; 0&#39;是您的数据的索引(0,1,2,3,...)
&#39;标签&#39;是芯片内容,您还可以使用&#39; .id&#39;
获取数据的ID答案 1 :(得分:1)
要从Materializecss芯片中获取数据,请使用以下代码。
$('#button').click(function(){
alert(JSON.stringify(M.Chips.getInstance($('.chips')).chipsData));
});
答案 2 :(得分:0)
这对我来说很棒
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.chips');
var instances = M.Chips.init(elems, {
placeholder: "Ajouter des Tags",
secondaryPlaceholder: "+tag",
onChipAdd: chips2Input,
onChipDelete: chips2Input,
Limit: 10,
minLength: 1
});
function chips2Input(){
var instance = M.Chips.getInstance(document.getElementById('chip1')), inpt = document.getElementById('myInputField');
inpt.value = null;
for(var i=0; i<instance.chipsData.length; i++){
if(inpt.value == null)
inpt.value = instance.chipsData[i].tag;
else{
inpt.value += ','+instance.chipsData[i].tag; //csv
}
}
console.log('new value: ', inpt.value);
}
});
</script>
答案 3 :(得分:0)
他们似乎改变了,改变了最新版本中可用的方法。
文档建议您应该可以将值作为对象的属性进行访问,但是我花了一个小时才发现没有任何地方。
直到发生以下情况
$('.chips-placeholder').chips({
placeholder: 'Enter a tag',
secondaryPlaceholder: '+Tag',
onChipAdd: (event, chip) => {
console.log(event[0].M_Chips.chipsData);
},
在onChipAdd事件期间,我能够访问该事件。在该对象内是标签数组。
我知道这不是有据可查的方式,但是在开票时,客户会接受这么多时间,我必须继续前进