Question

我正在使用类似于jQuery UI为组合框提供的示例的jquery小部件：

http://jqueryui.com/demos/autocomplete/#combobox

这个组合框装饰了这样的选择：

$('select[name=myselect]').combobox();

现在在其他一些逻辑中，我想改变选择，包括其所有内容：

$('select[name=myselect]').empty();
$('select[name=myselect]').append(
  $('select[name=otherselect]').children().clone());
$('select[name=myselect]').val('new-value');

现在我怎样才能让组合框重新渲染？

Answer 1

抱歉，我刚检查过，小部件似乎有自己的更改事件：

点击查看来源here查看完整示例

change: function( event, ui ) {
                            if ( !ui.item ) {
                                var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
                                    valid = false;
                                select.children( "option" ).each(function() {
                                    if ( $( this ).text().match( matcher ) ) {
                                        this.selected = valid = true;
                                        return false;
                                    }
                                });
                                if ( !valid ) {
                                    // remove invalid value, as it didn't match anything
                                    $( this ).val( "" );
                                    select.val( "" );
                                    input.data( "autocomplete" ).term = "";
                                    return false;
                                }
                            }
                        }

Answer 2

我通过扩展上述组合框控件找到了解决问题的方法。 XGreen的第一个建议是使用

$('.selector').live("change", ...)

不起作用，因为使用.val()修改选择时未触发更改事件（至少在jquery 1.4.4中没有。现在无法升级）

因此，我将此代码添加到组合框的构造中：

select.observe_field(1, function() {
  var selected = select.children(":selected");
  var value = selected.val() ? selected.text() : "";

  input.val(value);
});

其中observe_field在网络上找不到一些非常有效的功能：

jQuery.fn.observe_field = function(frequency, callback) {
  return this.each(function(){
    var element = $(this);
    var prev = element.val();
    var chk = function() {
      var val = element.val();
      if(prev != val){
        prev = val;
        element.map(callback); // invokes the callback on the element
      }
    };
    chk();
    frequency = frequency * 1000; // translate to milliseconds
    var ti = setInterval(chk, frequency);
    // reset counter after user interaction
    element.bind('keyup', function() {
      ti && clearInterval(ti);
      ti = setInterval(chk, frequency);
    });
  });
};

更好的解决方案仍然非常受欢迎！

从JavaScript访问jquery小部件

2 个答案: