Question

我有2个多选框，我选择了一些选项并将其添加到另一个选择框。当我单击“保存”时，所选的选项值应存储在一个数组中并传递给主控制器。当我发出警报时，我得到了正确的数据，但我在firebug控制台中得到以下错误，我无法解决它。请在这方面帮助我。这是错误和代码。

for (var i = 0; i <= PairedSelectBox.options.length; i++) {
    selectedClientChips.push(PairedSelectBox.options[i].value);
    alert("selectedClientChips == " + selectedClientChips);
}

我在控制台中收到错误

TypeError: PairedSelectBox.options[i] is undefined
selectedClientChips.push(PairedSelectBox.options[i].value);

这是html代码：

<table>
    <tr>
        <td>
            <label style="font-size: medium;">Client Chip details</label>
        </td>
    </tr>

    <tr>
        <td>
            <label>Search</label>
            <input type="text" id="searchId">
            <input type="button" value="Go" onclick="getClientChipDetails();"></td>
    </tr>
    <tr>
        <td>
            <label style="font-size: small;">Client-Chip data</label>
        </td>
        <td></td>
        <td>
            <label style="font-size: small">Selected Client-Chip data</label>
        </td>
    </tr>
    <tr>
        <td>
            <select id="MasterSelectBox" name="MasterSelectBox" size="10" multiple="multiple"></select>
        </td>
        <td>
            <button id="btnAdd">> </button>
            <br>
            <button id="btnRemove">< </button>
        </td>

        <td>
            <select id="PairedSelectBox" name="PairedSelectBox" size="10" multiple="multiple">
            </select>
        </td>
    </tr>

</table>

这是剧本：

$(document).ready(function () {

    $('#MasterSelectBox').pairMaster();
    $('#btnAdd').click(function () {
        $('#MasterSelectBox').addSelected('#PairedSelectBox');
    });
    $('#btnRemove').click(function () {
        $('#PairedSelectBox').removeSelected('#MasterSelectBox');
    });
});

Answer 1

试试this。我修改你的代码。

<强> HTML

<table>
    <tr><td>Master select box</td><td>Paired select box</td></tr>
    <tr>
        <td>
            <select id="MasterSelectBox" name="MasterSelectBox" size="10" multiple="multiple">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
            </select>
        </td>
        <td>
            <button id="btnAdd"> > </button><br>
            <button id="btnRemove"> < </button>
        </td>
        <td>
            <select id="PairedSelectBox" name="PairedSelectBox" size="10" multiple="multiple"></select>
        </td>        
    </tr>
</table>
<button id="save">Save</button>
<p id="output"></p>

Javascript

$(document).ready( function(){ 
    $('#MasterSelectBox').pairMaster();
    $('#btnAdd').click(function(){
        $('#MasterSelectBox').addSelected('#PairedSelectBox');
    });
    $('#btnRemove').click(function(){
        $('#PairedSelectBox').removeSelected('#MasterSelectBox');
    });
    $( "#save" ).click( function( e ) {
        $( "#output" ).empty();
        $.each( $( "#PairedSelectBox" ).val(), function( i, v ) {
            $( "#output" ).append( $( "<span> " + v + " </span>" ) );
        } );
    } );
});

P.S。并使用rawgit.com链接到库，而不是raw.githubusercontent.com将脚本附加到jsfiddle。

Answer 2

@madhu我在jsfiddle上用以下代码更新你的代码......

$(document).ready( function(){
    var data=[];
    //$('#MasterSelectBox').pairMaster();
    $('#btnAdd').click(function(){
        $("#MasterSelectBox option:selected").each(function () {  
    var selText = $(this).val();  
   data.push(selText);
});      

      $.each(data, function(val, text) {
                    $('#PairedSelectBox').append( $('<option>').text(text).attr('value',text));
                    }); 

    });
    $('#save_btn').click(function(){
        alert("your data is"+JSON.stringify(data));
    });
});

检查你的jsfiddle链接

Answer 3

我明白了...我没有对配对的选择框进行取消。 var PairedSelectBox = document.getElementById（“PairedSelectBox”）; // alert（“PairedSelectBox ===”+ PairedSelectBox）;

 for (var i = 0; i<PairedSelectBox.options.length; i++) {
     selectedClientChips.push(PairedSelectBox.options[i].value);
     //alert("selectedClientChips == " + selectedClientChips); 
     }
 alert("selectedClientChips==="+selectedClientChips);

在javascript中将选定的选项值添加到数组中

3 个答案: