Question

i am using this Dual Listbox Plugin, i am trying to fetch the values using onClick event of jQuery that has been selected from box1 to box2,

this is the code i am using

<form action="" method="post" class="form" id="purchaseEditUpdateItemForm">
<div class="widget">
    <div class="title">
        <img src="/images/icons/dark/full2.png" alt="" class="titleIcon" />
        <a href="#" class="button blueB" id="purchaseEditUpdateItemBtn" style="margin: 4px;">
            <span>Update</span>
        </a>
    </div>
    <div class="body">
        <div class="leftPart">
            <div class="filter">
                <span>Filter:</span>
                <input type="text" id="box1Filter" class="boxFilter" />
                <input type="button" id="box1Clear" class="fBtn" value="x" />
                <div class="clear"></div>
            </div>
            <select id="box1View" multiple="multiple" class="multiple" style="height:200px;">
                <option value="5">ITEM005</option>
                <option value="6">ITEM006</option>
                <option value="7">ITEM007</option>
                <option value="8">ITEM008</option>
            </select>
            <br/>
            <span id="box1Counter" class="countLabel"></span>
            <div class="dn">
                <select id="box1Storage" name="box1Storage"></select>
            </div>
        </div>
        <div class="dualControl">
            <button id="to2" type="button" class="basic mr5 mb15">&nbsp;&gt;&nbsp;</button>
            <button id="allTo2" type="button" class="basic">&nbsp;&gt;&gt;&nbsp;</button>
            <br />
            <button id="to1" type="button" class="basic mr5">&nbsp;&lt;&nbsp;</button>
            <button id="allTo1" type="button" class="basic">&nbsp;&lt;&lt;&nbsp;</button>
        </div>
        <div class="rightPart">
            <div class="filter">
                <span>Filter:</span>
                <input type="text" id="box2Filter" class="boxFilter" />
                <input type="button" id="box2Clear" class="fBtn" value="x" />
                <div class="clear"></div>
            </div>
            <select id="box2View" multiple="multiple" class="multiple" style="height:200px;">
                <option value="1">ITEM001</option>
                <option value="2">ITEM002</option>
                <option value="3">ITEM003</option>
                <option value="4">ITEM004</option>
            </select>
            <br/>
            <span id="box2Counter" class="countLabel"></span>
            <div class="dn">
                <select id="box2Storage"></select>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
</form>

i am trying something like? (i know the below code is not practical)

$('#purchaseEditUpdateItemBtn').live('click', function(){
    var formData = $('#purchaseEditUpdateItemForm').serialize();
});

Answer 1

Have you tried something like this:

$('#purchaseEditUpdateItemBtn').click(function(){
   //If the items do not get the "selected" attribute, you could also use this:
   var items = $("select#boxview2 option");

$.each(items, function(index, elem){
   //this will log the value for each item inside the boxview2 list
   console.log(elem.val);
});
});

Good luck!