javascript - ドロップ可能なdivを使用してリストボックスの値の色を変更する

Question

ドロップ可能な div を使用して、リストボックスの値の色を変更する必要があります。

<div>
<table><tr><td>Selected  First Names</tr><tr><td>
<select name="selectedfirstnames" id="listbox" size="11" multiple="multiple" >

    <option>--selected names--</option>

</select>
 </td></tr>
</table>
</div>

以下のjavascript関数を使用してリストボックスの値を入力します:

               function populatelistbox(selectedvalue){

            var select1 = $('#listbox');
            select1.append("<option name='selectedfirstnames' 
               value='"+fnamelist
               [selectedvalue]+"'>"+fnamelist[selectedvalue]+"</option>");

            } 

以下の div はドラッグ可能です。赤 緑 青

これらの div を list-box にドラッグ アンド ドロップすると、リストボックスの値の色が変わるはずです。誰でもこれを達成するのを手伝ってもらえますか?

http://jsfiddle.net/manjitwaikhom/3T4bA/