MultiSelect下拉窗口小部件未显示所选选项?

时间:2013-09-19 14:06:34

标签: javascript jquery widget option html-select

所以我从这里使用多选小部件:http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/并且它在这个实例中正常工作。当我使用与普通(仅选择1选项)下拉列表相同的下拉样式(看似一致)时,我的问题是下拉列表显示1选定。我需要更改此选项以显示所选的选项,因此' Red'来自红色,黄色,蓝色。确定所选选项文本的代码如下:

  $.widget("ech.multiselect", {

    // default options
    options: {
      header: true,
      height: 175,
      minWidth: 225,
      classes: '',
      checkAllText: 'Check all',
      uncheckAllText: 'Uncheck all',
      noneSelectedText: 'Select options',
      selectedText: '# selected',
      selectedList: 0,
      show: null,
      hide: null,
      autoOpen: false,
      multiple: true,
      position: {},
      appendTo: "body"
    }

因此,如果下拉列表具有类.normal,我需要selectedText来显示所选选项。有任何想法吗?提前致谢。

2 个答案:

答案 0 :(得分:2)

您必须更改 jquery.multiselect.js 文件中的一些代码。 用以下代码替换更新函数:

// updates the button text. call refresh() to rebuild
    update: function() {
      var o = this.options;
      var $inputs = this.inputs;
      var $checked = $inputs.filter(':checked');
      var numChecked = $checked.length;
      var value;

      if(numChecked === 0) {
        value = o.noneSelectedText;
      } else if( numChecked===1){
    value = $checked.val();
} else {
        if($.isFunction(o.selectedText)) {
          value = o.selectedText.call(this, numChecked, $inputs.length, $checked.get());
        } else if(/\d/.test(o.selectedList) && o.selectedList > 0 && numChecked <= o.selectedList) {
          value = $checked.map(function() { return $(this).next().html(); }).get().join(', ');
        } else {
          value = o.selectedText.replace('#', numChecked).replace('#', $inputs.length);
        }
      }

      this._setButtonValue(value);

      return value;
    },

我没有测试过这个但是告诉它是否适合你。

答案 1 :(得分:0)

我有同样的问题,即时通讯使用javascript 1.7.2

问题是第一次加载时只考虑了selectedText,当我更改复选框时,我的按钮的slectedText没有改变。最后,我设法通过修改jquery.multiselect.js来解决问题:

在_create:function()

将按钮标签编辑为:

buttonlabel =(this.buttonlabel = $(''))                 html的(o.noneSelectedText)                 .appendTo(按钮)                 .attr(“id”,“buttonlabel_”+ this.element.attr('id')),

在更新中:function()

将this.buttonlabel.html(value)更改为$(“#buttonlabel_”+ this.element.attr(“id”))。text(value);

希望这有帮助。

干杯