所选值不起作用。如何使用剑道多选(MVVM)获取所选元素的值？

Question

我有一个剑道多选。我想获取所选值，但我按所选元素数组的数字顺序获取第一个元素。我想用剑道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>

Answer 1

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

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

使用多选时，您需要记住该值是一个值数组。为了在屏幕上显示值，我只是将数组连接成一个字符串。

为了完整起见，以下是我用于示例的代码：

<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>

Answer 2

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)