とにかくリストボックスにイメージ（デュアルリストボックスとイメージコンボボックスプラグインを使用）または別のソリューションを使用していますか？

Question

jquery dual listbox plugin（これはうまくいきますが）を使用していますが、リストボックスの各項目の横に画像があります。 this image combobox jquery pluginのような機能を適用したいと思っていました。

私はこれらの2つを組み合わせようとしましたが、うまくいかないようです。私はの.msdropdown（）画像のコンボコードの例外を得ています。

は、これらのプラグインの効果を一緒に働かせることができましたか、この要件を解決する別の方法を提案できます。画像ドンを追加し、それらの内部HTML要素が剥ぎ取られ、およびCSSスタイル - <select> Sは非常に彼らが何をするかに制限されているHTML内

<option> S：あなたはあなたのアプローチに問題があるでしょう理由はここに

Answer 1

です仕事はありません。この回答を参照してください。

• Is it possible to style a select box?

jquery.dd.jsスクリプトは、プログラム<span> Sを含む<div>と<select>を置き換えた後、キーを押すと、イベント自体ハンドル - シングルのためにドロップダウンを選択します。

jquery.duallistbox-1.3.jsスクリプトは<select>にあるリスト要素に依存しています。選択動作イベントをエミュレートしません。複数の選択を行うには、組み込みブラウザの動作（プラットフォームによって異なります）を使用しています。

スタンドとしては互換性がありません。それらを組み合わせるには、<select>/<option>ではなく、<div>/<span>を使用して複数の選択をエミュレートする必要があります（プラットフォームの違いを考慮してください）。確かに可能ですが、迅速な修正はありません。

Answer 2

ページ上にあるマルチ選択を再作成する必要がないようにするには、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/を見てみましょう。

リストが更新されるたびに、アイコンの位置を更新する必要があります。

Answer 3

私は@James Crookのコメントに完全に同意します。

しかし、私が作成したthis Codepen working exampleを試してみるとよいでしょう。

が持つselect HTML要素のコードを次：ソリューションについて

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

として：私たちが必要とする

<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を適用する最初の結果、このプラグインは2つの異なるselect HTML要素。そして、私たちは次のようにそれらのそれぞれにjquery.msDropDownプラグインを適用する必要があります。これにより

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

、UIは準備ができています。

しかし、我々は両方のプラグインの機能を維持する必要があります。 jquery.duallistboxボタンの

1. クリック：

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

2. またはjquery.duallistboxフィルタinputフィールド内を結ぶことにより、私たちは、のいずれかによって、ユーザによって行われた変更がある更新/再レンダリングdropdowns with iconsすべての時間を必要とします：

   $('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(); 
}; 

私はselect HTML要素にoptionsの多くを扱うときに、このプロセスは、パフォーマンスに関しては高価なことができることを強調するために必要：このメソッドは次のようになります。間違いなく回避策であり、jquery.msDropDownプラグインに実装する.redraw()メソッドを使用することが最善の方法です。

この解決策があなたの問題解決に役立つことを願っています。