关于select多选返回值的问题

昨天在码的时候碰上了这个问题，当使用select多选时，传到后台的值只有一个，是第一次被选中的第一个，无法上传多个值。

瞬间蛋疼了，感觉既然select有multiple这个属性，但是又不能返回多个选择值，感觉非常鸡肋，真的不知道这个是为了啥，然并卵，还是要解决的，去万能的互联网上查了一下，有不少猿跟我一样碰到了这个问题，基本的解决方案也还不错，现在提供下纯js解决这个问题的方案。

<script>
function selectValue(){
        var selectVal = document.getElementById("selectid");
        var value="";
        for(var i=0;i<selectVal.options.length;i++){
            if(selectVal.options[i].selected){               
                value+= selectVal.options[i].value+",";
            }
        }
        document.getElementById("wocao").value=value;
                alert(document.getElementById("wocao").value);
}
</script>

上面这是js操作的代码，下面贴下html的代码：

<select id="selectid" multiple="multiple">
	<option>中</option>
	<option>公</option>
	<option>社</option>
	<option>办</option>
</select>
<input type="hidden" id="wocao">
<button id="btn" οnclick="selectValue()">cdcd</button>

之所以新建一个hidden，是因为select的value属性不支持赋值，可以读出查看，但不能赋值，于是就想了这么个馊主意。

稍后把jquery处理的代码也一并贴上来，共同学习。

下面是jquery处理的代码

<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script>
function selectVa(){
var vals=$("#rf").find("option:selected").text();
$("#wocao").val(vals);
alert($("#wocao").val());
}
</script>

html部分代码相同，其实很简单，function内第一行是获取所选中的option的值，注意，这里不能将text()换成val()，如果是val()，获取到的只有第一个值；第二行就是把第一行取出的值赋给hiden元素的值了，第三行是alert一下，没什么用。还是那句话，select的值不支持被赋值，我试过了，所以还是要借助hidden元素。

接着我又发现了一个jquery解决这个问题更简单直接的方法，直接贴代码：

<script>
function selectVa(){
var vals=$("#rf").val();
$("#wocao").val(vals);
alert($("#wocao").val());
}
</script>

这几行代码里，第一行是直接获取select的val()，然后同样再赋值给hidden，然后上传。

到这里，我有点搞不明白了，这个$("#rf").val() 和document.getElementById("rf").value，怎么会不一样呢？希望大神能给予指点。