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來關閉的，那個是瀏覽器本身的行為