jquery多个下拉选项选择和丢失提交数据

时间:2016-01-31 15:23:21

标签: jquery select option

我有两个下拉菜单。一个有所有费用头,第二个选择了费用头。当左侧双击时,将双头加入左侧,将其添加到右侧下拉列表并从左手下拉中移除。

以下是我的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个值&#34; feetruct&#34; id未被声明为&#34; feestruct []&#34;但如果我把它命名为&#34; feetruct []&#34;我在第一个jquery函数中无法从左到右传输费用头。

1 个答案:

答案 0 :(得分:0)

嗨试试这个jsfiddle它正确地将费用转移到freestruct和freestruct值到下一页。

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