Question

我正在使用bsmSelect jQuery插件。基本上，它的作用是改变渲染选择倍数的方式，以便更容易选择选项。它隐藏了select元素并显示了一个列表。

所以，首先我将插件函数应用于我的select-multiple元素：

$(document).ready(function() {
  ...
  $('#my_select_multiple').bsmSelect({
    plugins: [$.bsmSelect.plugins.sortable()],
    title: 'Add',
    removeLabel: 'Remove'
  });
  ...
});

另一方面，我有另一个select元素（这个很简单），它有一个ajax请求绑定到它的change事件。此ajax请求获取新的#my_select_multiple选项，具体取决于选择的简单值。 Ajax响应是#my_select_multiple选项的新HTML。所以我有：

function getNewOptions(val) {
  var r = $.ajax({
    type: 'GET',
    url: /*My URL*/
  }).responseText;
  return r;
}

...

$(document).ready(function() {
...
  $('#my_select_simple').change() {
    $('#my_select_multiple').html(getNewOptions($(this).val()));
  }
...
});

AJAX按预期工作。正确获取新选项并将它们插入#my_select_multiple（由bsmSelect插件隐藏，但我可以使用Firebug进行检查）。但是bsmSelect没有意识到新的变化，也没有得到更新。

所以，我认为我想要的是重新申请$('#my_select_multiple').bsmSelect();新的选项。

我一直在四处寻找，这就是我尝试过的。

1。我试图再次使用AJAX请求的success和complete（一次）调用该函数。没工作：

function getNewOptions(val) {
  var r = $.ajax({
    type: 'GET',
    url: /*My URL*/,
    success: function() { $('#my_select_multiple').bsmSelect(); }
  }).responseText;
  return r;
}

2. 我试图将该函数与on jQuery函数绑定。没工作：

$('#my_select_simple').on('change', function() {
  $('#my_select_multiple').bsmSelect();
});

3. 我已经尝试过1和2删除bsmSelect生成的HTML。没用。

非常感谢。

更新：确切的代码

首先我有一个global.js文件，它将bsmSelect插件应用于某些选择倍数（.quizzes）：

$('.quizzes').bsmSelect({
  plugins: [$.bsmSelect.plugins.sortable()],
  title: 'Add',
  removeLabel: 'Remove'
});

然后，在php文件中我定义了updateQuizzes函数并将其绑定到select simple（project_id）更改事件：

<script type="text/javascript">
  function updateQuizzes(project_id) {
    var r = $.ajax({
    type: 'GET',
url: '<?php echo url_for('event/updateQuizzes')?>'+'<?php echo   ($form->getObject()->isNew()?'':'?id='.$form->getObject()->getId()).($form->getObject()->isNew()?'?project_id=':'&project_id=')?>'+project_id,
    success: function() { $('.quizzes').bsmSelect({
      plugins: [$.bsmSelect.plugins.sortable()],
      title: 'Add',
      removeLabel: 'Remove'
    }); }
  }).responseText;
  return r;
  }

  $('#project_id').change(function(){
    $('.quizzes').html(updateQuizzes($(this).val()));
  });
</script>

正如我所说，AJAX请求没有问题，但第二次没有调用bsmSelect ...

Answer 1

不确定问题是否存在，但您可以尝试

$('#my_select_simple').change() {
    $('#my_select_multiple').html(getNewOptions($(this).val())).trigger('change');
}

这会触发select_multiple上的更改事件，并可能触发bsmSelect。我不确定这里的问题是什么，但这是我能想到的最好的。

Answer 2

我认为您希望在Ajax调用的success中设置HTML，例如：

function loadNewOptions(val) {
    $.ajax({
        type: 'GET',
        url: /*My URL*/,
        success: function(data) { 
            $('#my_select_multiple').html(data).bsmSelect(); 
        }
    });
}

然后呼叫：

$('#my_select_simple').change() {
    loadNewOptions($(this).val());
}

Answer 3

$(document).ready(function() {

  $('#my_select_simple').change() {
    $('#my_select_multiple').load("your Url", function(){
        $('#my_select_multiple').bsmSelect();
    });
  }

});

这样的事情应该有效。

.load会将您的网址返回#my_select_multiple

第一个参数是要加载的url，第二个参数是完成后调用的函数。这是你需要设置你的花式选择器。

Answer 4

好的，I opened a ticket和bsmSelect开发者已在几分钟内回复了我。太好了！

要让bsmSelect了解其选择更改，您必须在选择上触发change事件。无需再次调用bsmSelect。

所以可以这样：

function loadNewOptions(val) {
  var r = $.ajax({
    type: 'GET',
    url: /*My URL*/,
    success: function(data) {
      $('#my_select_multiple').html(data).trigger('change');
    }
  }).responseText;
  return r;
}

$('#my_select_simple').change(function() {
  loadNewOptions($(this).val());
});

jQuery插件bsmSelect在再次调用并且其选择选项已更改时不会更新其值

4 个答案: