所选值不起作用。如何使用kendo multiselect(MVVM)获取所选元素的值?

时间:2017-03-28 07:49:49

标签: javascript jquery html mvvm kendo-ui

我有一个剑道多选。 我想得到所选的值,但我得到所选元素数组的数字顺序的第一个元素。 我想用剑道MVVM。

HTML:

 <li>
        <select id="house" data-role="multiselect"
            data-placeholder="Choose...'"
            data-value-primitive="true"
            data-value-field="name"
            data-text-field="name"
            data-bind="value: select, source: array"></select>
        <hr/>
        <p data-bind="text: select"></p>
    </li>

2 个答案:

答案 0 :(得分:1)

jquery val函数将为您提供逗号分隔的索引

var selectedIndices = $("#house").val();
var data = selectedIndices.split(",");
console.log(data)

// or if it doesn't work you can try this other hackish way

var data=[];
var $select = $("#house");
$el.find('option:selected').each(function(){
    data.push({value:$(this).val(),text:$(this).text()});
});
console.log(data)

答案 1 :(得分:1)

我原则上准备了这个工作的演示。显然适应您的需求。

http://dojo.telerik.com/UZurO/2

使用MultiSelects,您需要记住该值是一个值数组。为了在屏幕上显示值,我简单地将数组连接成一个字符串。

为了完整性,这里是我用于样本的代码:

<div id="example">
    <div class="demo-section k-content">

        <select id="house" data-role="multiselect"
            data-placeholder="Choose...'"
            data-value-primitive="true"
            data-value-field="name"
            data-text-field="name"
            data-bind="value: select, source: array, events:{change: safeCode}"></select>
        <hr/>
        <p data-bind="text: values"></p>
    </div>

  <div> 
    <pre> 
    <code id="viewModel">
    </code>
    </pre>
  </div> 

  </div>    

<script>
    var viewModel = kendo.observable({
        array: [{name:"bob"}, {name:"tom"}, {name: "fred"}, {name:"sue"}, {name:"glenda"}],
        select: ["bob", "glenda"], 
        safeCode:function(){ 

          $('#viewModel').empty().html(JSON.stringify(this, null, 2)); 

        }, 

      values: function(){
        return this.get("select").join(); 
      }

    });
    kendo.bind($("#example"), viewModel);
</script>
</div>