Question

我正在使用这个Dual Listbox Plugin，我试图使用从box1到box2中选择的jQuery的onClick事件来获取值，

这是我正在使用的代码

<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>

我正在尝试类似的东西？（我知道下面的代码不实用）

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

Answer 1

你有没有试过这样的事情：

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

祝你好运！

Answer 2

使用serialize()表单元素时，必须具有name属性：

<select name='box1View' id="box1View" multiple="multiple" class="multiple" style="height:200px;">
    <option value="5" selcted>ITEM005</option>
    <option value="6">ITEM006</option>
    <option value="7">ITEM007</option>
    <option value="8">ITEM008</option>
</select>

请注意，live已弃用，您可以使用on()方法，尝试以下操作：

$('form').on('click', 'a.button', function(){
    var formData = $('select').serialize();
});

Answer 3

试试这个

$("#purchaseEditUpdateItemBtn").click(function(event){
console.log("Selected from box 1 "+$("select#box1View option:selected")); // selected from #box1View
console.log("Selected from box 2 "+$("select#box2View option:selected")); // selected from #vow2View
console.log($("#purchaseEditUpdateItemForm").serialize());
});

使用jQuery获取选定的值

3 个答案: