js模拟select下拉框

㈠ 如何用js选中下拉框选项

1、打开vscode，创建一个H5规范的页面，用于演示js如何给下拉框设置默认值。

㈡ 如何用js实现下拉框中selected

思路：设置下拉框的value属性，那么下拉框的option选项中相应value值选项就会被选中。

下面实例演示——根据文本框值设置下拉框选中项：

1、HTML结构

<selectid="test">
	<optionvalue="0">--pleaseselect--</option>
	<optionvalue="1">option-1</option>
	<optionvalue="2">option-2</option>
	<optionvalue="3">option-3</option>
</select><br>
<inputtype="text"id="val"><inputtype="button"value="设置"onclick="fun()">

2、javascript代码

functionfun(){
	varval=document.getElementById("val").value;
	document.getElementById("test").value=val;
}

3、效果演示

㈢ js怎么设置select的样式，边框和三角的颜色

select属于浏览器内置组件，标准CSS无法调整其样式。

你可以使用div来模拟select。

首先创建一个<div />来模拟下拉框。

<divclass="mySelect"></div>

然后在里面加上显示选中值的<div />和模拟三角的<div />以及下拉列表<ul />

<divclass="mySelect">
<divclass="mySelectValue"></div>
<divclass="mySelectDropdown"></div>
<ulclass="mySelectOptions"></ul>
</div>

你可以用CSS来设置自己喜欢的样式。

接下来就是用Javascript来控制模拟的下拉框了。（这里为了方便，使用了jQuery）

//创建临时DOM，内容为模拟的下拉框（其中省略的部分为上面写的html代码）
var$mySelect=$('<divclass="mySelect">...</div>');
//把原来select有的样式复制到模拟的下拉框上
$mySelect.attr('class',$('#select').attr('class'));
$mySelect.attr('style',$('#select').attr('style'));
//把原来select的选项复制到模拟的下拉框中
$('#selectoption').each(function(){
varvalue=$(this).attr('value'),
name=$(this).html();
$mySelect.find('.mySelectOptions').append('<liclass="mySelectOption"data-id="'+value+'">'+name+'</li>');
});
//在模拟下拉框中设置选中的值
$mySelect.find('.mySelectValue').html($('#selectoption:selected').html());
//隐藏原有的select
$('#select').hide();
//给模拟的下拉框绑定事件
$mySelect
.on('click',function(e){
//阻止点击事件向上冒泡
e.stopImmediatePropagation();
//反转下拉列表的显示
$('.mySelectOptions',this).toggle();
//给原有的select模拟点击事件
$('#select').trigger('click');
})
.on('click','.mySelectOption',function(e){
//阻止点击事件向上冒泡
e.stopImmediatePropagation();
//把选中的值显示到模拟的下拉框中
$mySelect.find('.mySelectValue').html($(this).html());
//隐藏下拉列表
$mySelect.find('.mySelectOptions').hide();
//把选中的值给到原来的select中
$('#select').val($(this).data('id'));
//给原来的select模拟change事件
$('#select').trigger('change');
});
//基本功能就到此了。其中可以缓存jQuery对象来优化，还能添加焦点事件，键盘事件等，按自己的需求慢慢修改吧。

㈣ js打开select的下拉选项

如果不需要抄下拉框，那么可以不用<select，网上那些点击后下面弹出自定义选项的，都不是用的<select，而是通过CSS画出的类似<select样子的标记，比如<div、<span等 最简单的方法，在那个地方放个下拉框样子图片，然后点图的时候弹出你下面那个树 BTW：<select的下拉是没办法通过JS来关闭的，那个是浏览器本身的行为