您的位置:

详解select多选框

一、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多选框回显

在多选框提交表单后,如果需要回显用户之前选过的值,可以使用以下代码:


以上代码中,通过判断数组fruit中是否包含每一个选项的值,如果包含则设置option的selected属性为true,否则为false。

五、select多选框获取值

可以通过以下代码获取多选框中选中的项的值:

var select = document.getElementsByName("fruit")[0];
var selectedValues = [];
for(var i=0; i


   

以上代码中,通过遍历所有选项,将被选中的选项的值保存到数组中,以便后续使用。

六、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多选框的详细阐述,包括赋值、内容移动、光标问题、回显、获取值、获取最后点击的数据、选择、默认值和多选等多个方面。