从Materialise css芯片获取数据

时间:2016-09-18 09:32:47

标签: javascript jquery frameworks

我需要从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>

感谢您的帮助。

4 个答案:

答案 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事件期间,我能够访问该事件。在该对象内是标签数组。

我知道这不是有据可查的方式,但是在开票时,客户会接受这么多时间,我必须继续前进