CoderAnswer - 程序员编程问答

在加载时运行MultiSelect而不是单击

by @John Higgins

jquery

我试图在页面加载时运行以下代码,而不是像当前那样单击超链接。我正在使用一个名为[MultiSelect]的jQuery插件(https://springstubbe.us/projects/jquery-multiselect/)。

我想知道我需要删除jQuery脚本的哪些部分以及需要替换它们的内容。

我希望用PHP变量填充jQuery值,这样我就可以从MySQL数据库中提取结果,以便更新它们。

<li class="clear">
        <h4>Dynamically Populate List</h4>
        <a href="#" class="toggle">Toggle Plugin</a>
        <div class="render">
            <select name="" multiple="multiple">
            </select>
            <a href="#" class="loadoptions">Populate List</a><br/>
            <a href="#" class="dpopgetvalues">Get Selected Values</a>
        </div>
        <div class="code">
            <script>
$('select[multiple]').multiselect({
    columns  : 3,
    search   : true,
    selectAll: true
});

$('select[multiple]').siblings('a.loadoptions')
    .click(function( event ){
        event.preventDefault();

        var options = [{
            name   : 'Option 1',
            value  : 1,
            checked: false
        },{
            name   : 'Option 2',
            value  : 2,
            checked: true
        },{
            name   : 'Option 3',
            value  : 3,
            checked: false
        },{
            name   : 'Option 4',
            value  : 4,
            checked: true
        },{
            name   : 'Option 5',
            value  : 5,
            checked: false
        }];

        $(this).siblings('select[multiple]')
            .multiselect('loadOptions', options );
    });

$('select[multiple]').siblings('a.dpopgetvalues')
    .click(function( event ){
        event.preventDefault();

        alert(
            'Selected Values: '
           + $(this).siblings('select[multiple]').val()
        );
    });</script>
        </div>
    </li>

感谢您对此提供的任何帮助。

约翰


1个答案

0 by @Mark Schultheiss

尝试通过触发自定义事件事件}).trigger('set-config');来激活它。

注意: <s> it does not seem to have proper CSS in spite of me grabbing some from the site linked but that is not really the question here. I also grabbed the .js for the plugin from a CDN so not an exact match perhaps.</s>

由于问题/ cdn等原因,我删除了我在这里制作"working"版本的尝试。

<!-- language: lang-js -->

$(function() {
  $('select[multiple]').multiselect({
    columns: 3,
    search: true,
    selectAll: true
  });

  $('select[multiple]').on('set-config',
    function(event) {
      event.preventDefault();
      //也许在这里通过ajax得到这个?
      var options = [{
        name: 'Option 1',
        value: 1,
        checked: false
      }, {
        name: 'Option 2',
        value: 2,
        checked: true
      }, {
        name: 'Option 3',
        value: 3,
        checked: false
      }, {
        name: 'Option 4',
        value: 4,
        checked: true
      }, {
        name: 'Option 5',
        value: 5,
        checked: false
      }];

      $(this).multiselect('loadOptions', options);
    }).trigger('set-config');

  $('select[multiple]').siblings('a.dpopgetvalues')
    .click(function(event) {
      event.preventDefault();

      alert(
        'Selected Values: ' +
        $(this).siblings('select[multiple]').val()
      );
    });
});

相关问题