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