jQuery的多個下拉選項選擇和丟失提交數據

Question

我有兩個下拉菜單。一個擁有所有費率頭，另一個擁有選定的費用頭。當左滴頭費用雙擊時，它被添加到右側下拉並從左手下拉刪除。

下面是我的jQuery代碼：

// This code transfers fee head from left to right 
// This is working fine 
$(document).ready(function() { 
    $("#feeheads").dblclick(function(event){ 
     var txt = $("#feeheads option:selected").text(); 
     var val = $("#feeheads option:selected").val(); 
     $("#feestruct").append('<option value="'+val+'">'+txt+'</option>'); 
     $("#feeheads option:selected").remove(); 
     var a = $('#feeheads > option').length; 
     var s = $('#feestruct > option').length; 
     $("#allcount").html(a); 
     $("#selcount").html(s); 
    }); 
}); 

// This code selects all options in right dropdown and submits form 
$(document).ready(function() { 
    $('#btnsave').click(function() { 
     $('#feestruct option').attr('selected', 'selected'); 
     $("#form1").submit(); 
    }); 
}); 

提交的數據只接收1值作爲「feestruct」 ID未註明爲「feestruct []」，但如果我把它命名爲「feestruct []」我無法像第一個jquery函數中那樣從左向右轉換feehead。

Answer 1

嗨試試這個jsfiddle其正確轉移feehead freestruct和freestruct值到下一頁。

$(document).ready(function() { 
 
    $("#feeheads").dblclick(function(event) { 
 
    var txt = $("#feeheads option:selected").text(); 
 
    var val = $("#feeheads option:selected").val(); 
 
    $("#feestruct").append('<option value="' + val + '">' + txt + '</option>'); 
 
    $("#feeheads option:selected").remove(); 
 
    var a = $('#feeheads > option').length; 
 
    var s = $('#feestruct > option').length; 
 
    $("#allcount").html(a); 
 
    $("#selcount").html(s); 
 
    }); 
 
}); 
 

 
// This code selects all options in right dropdown and submits form 
 
$(document).ready(function() { 
 
    $('#btnsave').click(function() { 
 
    $('#feestruct option').attr('selected', 'selected'); 
 
    $("#form1").submit(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id='form1'> 
 
    Freeheads 
 
    <select name="feeheads" id="feeheads" multiple="multiple" size="5 
 
    <option value=" 1 ">Value = 1</option> 
 
    <option value="2 ">Value = 2</option> 
 
    <option value="3 ">Value = 3</option> 
 
    <option value="4 ">Value = 4</option> 
 
    
 
</select> 
 
<br/> 
 

 

 
free Struct: 
 
<select name="feestruct " id="feestruct " multiple="multiple " size="10> 
 
    <option value="11">Value = 11</option> 
 
    <option value="12">Value = 12</option> 
 
    <option value="13">Value = 13</option> 
 

 
    </select> 
 
    <br/>All Count: 
 
    <div id=allcount></div> 
 
    <br/>Selected count Count: 
 
    <div id=selcount></div> 
 
    <br/> 
 

 
    <input id='btnsave' type=submit value='SAVE' /> 
 
</form>