有无论如何有图像列表框（使用双列表框和图像组合框插件）或其他解决方案吗？

问题描述：

我使用的是jquery dual listbox plugin（这很好用），但我希望在每个列表框中的条目旁边都有图像。我想要像在this image combobox jquery plugin中那样应用功能。有无论如何有图像列表框（使用双列表框和图像组合框插件）或其他解决方案吗？

我试图将这两个结合起来，但它似乎没有工作。我不断收到图像组合代码的.msdropdown（）行的异常。

有人能够得到这些插件一起工作的效果，或者可以建议另一种方法来解决这个要求。

第一个链接被破坏，你有一个替代链接，例如github？ – Mousey 2015-09-08 23:38:28

答

这就是为什么你必须与你的方法问题：

<option>的HTML <select> s的在他们将做非常严格的限制之内秒 - 在他们里面的html元素被剥夺，和CSS样式，添加图像唐没有工作。看到这个答案：

Is it possible to style a select box?

的jquery.dd.js脚本编程包含<span>个<div>取代<select>然后处理按键和事件本身 - 单个选择下拉菜单。

的jquery.duallistbox-1.3.js脚本依赖于列表元素在<select>之中。它不模拟选择行为事件。它使用内置浏览器的行为（在不同平台上有所不同）来执行多项选择。

由于他们的立场，他们不兼容。要合并它们，您需要使用<div>/<span>而不是<select>/<option>来模拟多个选择，包括考虑到平台差异。当然可能，但不是一个快速修复。

答

为避免重新创建页面上的多重选择，您需要使用jQuery UI position（）插件将图标相对于页面上该选项的位置进行定位。

遍历选项：

jQuery('select[multiple]').children('option').each(function() { 
    var imgSrc = this.value + '.png'; 
    jQuery('<img src=" + imgSrc + '">').appendTo('body').position({ 
     // position properties 
    }); 

});

在http://jqueryui.com/demos/position/看看。

每次更新列表时，您都必须更新图标的位置。

答

我完全同意@James Crook的评论。

但是，您可能想尝试我创建的this Codepen working example。

关于解决方案：

有以下select HTML元素代码：

<select name="webmenu" id="webmenu"> 
    <option value="calendar" data-image="icons/icon_calendar.gif">Calendar</option> 
    <option value="shopping_cart" data-image="icons/icon_cart.gif">Shopping Cart</option> 
    <option value="cd" data-image="icons/icon_cd.gif">CD</option> 
    <option value="email" selected="selected" title="icons/icon_email.gif">Email</option> 
    <option value="faq" data-image="icons/icon_faq.gif">FAQ</option> 
    <option value="games" data-image="icons/icon_games.gif">Games</option> 
</select>

我们首先需要的是select HTML元素上应用jquery.duallistbox如下：

$("select").DualListBox({ 
    json: false // use local data 
    timeout: 300 // delay for filter functionality 
});

由于结果，这个插件创建了两个不同的select个HTML元素。我们需要对他们每个人的应用jquery.msDropDown插件如下：

$("select.unselected").msDropDown(); 
$("select.selected").msDropDown();

据此，UI已经准备就绪。

然而，我们需要保持功能的两个插件。我们需要更新/重新呈现dropdowns with icons每次有用户进行了更改或者通过时间：

上点击jquery.duallistbox按钮：

$('div.center-block button').on('click', updateDropdowns);

或内部jquery.duallistbox过滤input场搭售：

$('input.filter').on('keyup', function(){ 
    // Following timeout value (300) should not be lower than 
    // timeout option from DualListBox 
    setTimeout(updateDropdowns, 300); 
});

请注意，这些监听器引用了updateDropdowns方法。这里是我们玩DOM的地方，通过在每个select HTML元素上再次应用jquery.msDropDown插件来重新渲染下拉列表。这种方法看起来像：

var updateDropdowns = function(){ 
    // Update/re-render first dropdown 
    $('select.selected').detach().appendTo('.col-md-5:last'); 
    $('.col-md-5:last').find('div').remove(); 
    delete $('select.selected').data().dd; 
    $('select.selected').msDropdown(); 

    // Update/re-render second dropdown 
    $('select.unselected').detach().appendTo('.col-md-5:first'); 
    $('.col-md-5:first').find('div').remove(); 
    delete $('select.unselected').data().dd; 
    $('select.unselected').msDropdown(); 
};

我想强调的是有很多的options在select HTML元素打交道时，这个过程可能会在问候是昂贵的性能。肯定这是一个解决方法，最好的选择可能是应该为jquery.msDropDown插件实施.redraw()方法。

希望此解决方案有助于解决您的问题。

有无论如何有图像列表框（使用双列表框和图像组合框插件）或其他解决方案吗？

相关推荐