一、select多选框赋值
select多选框也称作下拉多选框，通过设置option的selected属性来指定被选中的项。示例代码如下：
苹果
橘子
香蕉
梨
以上代码中，通过设置option元素的selected属性来指定被选中的项。表示初始值为苹果和香蕉两项。
二、select多选框内容移动
常常需要在两个多选框之间进行内容的移动，将一个多选框中的内容移动到另一个多选框中。示例代码如下：
苹果
橘子
香蕉
梨
<input type="button" value="→" onclick="moveSelection('srcSelect', 'destSelect')">
<script>
function moveSelection(sourceId, targetId){
var src = document.getElementById(sourceId);
var dest = document.getElementById(targetId);
for(var i=0; i<src.options.length; i++){
if(src.options[i].selected){
dest.appendChild(src.options[i]);
i--;
}
}
}
</script>
以上代码中，使用JavaScript实现了将一个多选框中的内容移动到另一个多选框中。通过在源多选框中选中需移动的项，然后点击→按钮，即可将选中的项移动到目标多选框中。
三、select多选框在ie为啥出现了光标
在IE浏览器中，当多选框的样式设置为display:none或者visibility:hidden时，会出现光标问题。解决方法如下：
苹果
橘子
香蕉
梨
<input type="button" value="选择水果" onclick="showSelect()">
<script>
function showSelect(){
var select = document.getElementById('fruitSelect');
var div = document.getElementById('fruitDiv');
if(div.style.display == 'none'){
div.innerHTML = select.outerHTML;
div.style.display = 'block';
var options = div.getElementsByTagName('option');
for(var i=0; i<options.length; i++){
if(options[i].selected){
options[i].setAttribute('selected', 'selected');
}
}
select.name = '';
}else{
select.name = 'fruit';
var selectedOptions = div.getElementsByTagName('select')[0].getElementsByTagName('option');
for(var i=0; i<selectedOptions.length; i++){
if(selectedOptions[i].selected){
selectedOptions[i].setAttribute('selected', 'selected');
}
}
select.outerHTML = div.innerHTML;
div.style.display = 'none';
}
}
</script>
以上代码中，通过将多选框隐藏，并在点击按钮时将其复制到一个div中显示，以避免出现光标问题。
四、select多选框回显
在多选框提交表单后，如果需要回显用户之前选过的值，可以使用以下代码：
<option value="apple" =0?"selected":""%>>苹果
<option value="orange" =0?"selected":""%>>橘子
<option value="banana" =0?"selected":""%>>香蕉
<option value="pear" =0?"selected":""%>>梨
以上代码中，通过判断数组fruit中是否包含每一个选项的值，如果包含则设置option的selected属性为true，否则为false。
五、select多选框获取值
可以通过以下代码获取多选框中选中的项的值：
var select = document.getElementsByName("fruit")[0];
var selectedValues = [];
for(var i=0; i<select.options.length; i++){
if(select.options[i].selected){
selectedValues.push(select.options[i].value);
}
}
console.log(selectedValues);
以上代码中，通过遍历所有选项，将被选中的选项的值保存到数组中，以便后续使用。
六、select多选框获取最后点击的数据
可以通过下面的代码获取最后点击的选项的值：
var select = document.getElementsByName("fruit")[0];
var lastSelectedValue;
select.onmousedown = function(){
lastSelectedValue = this.value;
}
console.log(lastSelectedValue);
以上代码中，通过给select注册onmousedown事件，在鼠标点击时保存当前点击的选项的值，以便后续使用。
七、选择select
可以通过下面的代码实现选择一个option：
var select = document.getElementsByName("fruit")[0];
select.selectedIndex = 2;
console.log(select.value);
以上代码中，将selectedIndex属性设置为2，即可选中第3个选项，从而实现选择。
八、select选择框默认值
可以通过给option设置selected属性来设置select选择框的默认值。
苹果
橘子
香蕉
梨
九、select标签多选
使用multiple属性即可实现select标签的多选功能。
苹果
橘子
香蕉
梨
以上就是对select多选框的详细阐述，包括赋值、内容移动、光标问题、回显、获取值、获取最后点击的数据、选择、默认值和多选等多个方面。
