當前位置：首頁 » 編程語言 » html5下拉框

html5下拉框

發布時間: 2021-03-23 08:57:25

A. html下拉列表怎麼做

</select>

B. dx html5怎樣寫下拉菜單

1）、普通下拉列表菜單
html代碼如下：
<formaction=""method="get">
<label>1、普通下拉列表菜單</label>
<selectname="">
<optionvalue="0">DIVCSS5</option>
<optionvalue="1">DIVCSS5</option>
</select>
</form>

2）、跳轉下拉列表菜單（如常見點擊後跳轉到選擇網站）
常常一些網站做友情鏈接，與部門之間使用select下拉標簽實現網址跳轉。下面我們通過代碼與案例接受select跳轉菜單應用。
跳轉菜單html代碼如下：
<formaction=""method="get">
<label>2、跳轉的下拉列表菜單</label>
<selectname="jumpMenu"id="jumpMenu"
onchange="MM_jumpMenu('parent',this,0)">
<optionvalue="http://www.Rothur.com/">Rothur</option>
<optionvalue="http://www.Rothur.com/">Rothur</option>
</select>
</form>
實現跳轉還需要在head標簽內加入Js腳本動作代碼：
<scripttype="text/javascript"><!--functionMM_jumpMenu(targ,selObj,restore){//v3.0eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");if(restore)selObj.selectedIndex=0;}//--></script>

C. html的下拉框的幾個基本用法

Java代碼
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gbk">
<title>grid</title></head>
<body>
<inputtype="button"value="getSelect"onclick="getSelect()"/>
<inputtype="button"value="selectbtn"onclick="getSelAge()"/>

<div>
<selectname="selectAge"id="selectAge">
<optionvalue="1">18-21</option>
<optionvalue="2">22-25</option>
<optionvalue="3">26-29</option>
<optionvalue="4">30-35</option>
<optionvalue="5">Over35</option>

</select>
</div>
<p>
<inputtype="button"value="moreSelect"onclick="moreSelect()"/>
<div>
<div>多選需要增加multiple屬性<br>
在多選中size屬性可以初始化下拉框默認顯示幾個選項
</div>
<div>
<selectname="moreselAge"id="moreselAge"multiple="multiple">
<optionvalue="1">18-21</option>
<optionvalue="2">22-25</option>
<optionvalue="3">26-29</option>
<optionvalue="4">30-35</option>
<optionvalue="5">Over35</option>
<optionvalue="6">Over40</option>
<optionvalue="7">Over50</option>

</select>
</div>
</div>

<p></p>
<inputtype="button"value="addNewbtn"onclick="addNewSelections()"/>
<inputtype="button"value="deletebtn"onclick="deleteselections()"/>

<inputtype="button"value="deleAllbtn"onclick="deleteAllSelections()"/>
<div>selectName:<inputtype="text"id="txtName"/></div>
<div>selectValue:<inputtype="text"id="txtValue"/></div>


<div>
<selectname="moreselAge"id="addNew">
<optionvalue="1"selected>18-21</option>
<optionvalue="2">22-25</option>
<optionvalue="3">26-29</option>
<optionvalue="4">30-35</option>
<optionvalue="5">Over35</option>
<optionvalue="6">Over40</option>
<optionvalue="7">Over50</option>

</select>
</div>

<p>移動選項</p>
<p>
<table>
<trcollspan="2">
<td>
<div>
<selectname="moreselAge"id="move1"multiple="multiple"size="7">
<optionvalue="1">18-21sfiods</option>
<optionvalue="2">22-25sjdfd</option>
<optionvalue="3">26-29xxs</option>
<optionvalue="4">30-35vs</option>
<optionvalue="5">Over35dcff</option>
<optionvalue="6">Over40shhfsd</option>
<optionvalue="7">Over50sdefs</option>
<optionvalue="8">Over88www</option>

</select>
</div>

</td>
<tdwidth="100"align="center">
<inputtype="button"value=">"onclick="rightSingle()"/><br>
<inputtype="button"value=">>"onclick="rightAll()"/><br>
<inputtype="button"value="<"onclick="leftSingle()"/><br>
<inputtype="button"value="<<"onclick="leftAll()"/>
</td>

<td>
<div>
<selectname="moreselAge"id="move2"multiple="multiple"size="7">
<optionvalue="1">18-21</option>
<optionvalue="2">22-25</option>
<optionvalue="3">26-29</option>
<optionvalue="4">30-35</option>
<optionvalue="5">Over35</option>
<optionvalue="6">Over40</option>
<optionvalue="7">Over50</option>
<optionvalue="8">Over88</option>

</select>
</div>
</td>
<tr>
</table>
</body>
<scripttype="text/javascript">
//獲得下拉列表對象
oListbox=document.getElementById("selectAge");
varListUtil=newObject();


varselectbtn=document.getElementById("selectbtn");

functiongetSelAge(){
//訪問選項
alert(oListbox.options[1].firstChild.nodeValue);//顯示的內容

alert(oListbox.options[1].getAttribute("value"));//對應的value

alert("獲得它在集合中的位置=="+oListbox.options[2].index);//獲得它在集合中的位置

alert("獲得集合的元素個數長度=="+oListbox.options.length);//獲得集合的元素個數長度
}
/*************************************************************************************************/
//獲得選中選項
functiongetSelect(){
varindx=oListbox.selectedIndex;
alert("獲得選中的選項的索引"+indx);
}

//多選下拉框
varmoreselAgeList=document.getElementById("moreselAge");

/*******************************************************************/

//入參下拉框對象
ListUtil.getSelectIndexes=function(oListbox){
vararrIndexes=newArray();
for(vari=0;i<oListbox.options.length;i++){
//如果該項被選中則把該項對應的索引添加到數組中
if(oListbox.options[i].selected){
arrIndexes.push(i);
}
}
returnarrIndexes;//返回選中的選項索引
}

/***************************************************************/
//多選
functionmoreSelect(){
vararrIndexes=ListUtil.getSelectIndexes(moreselAgeList);
alert("選中的數組length="+arrIndexes.length+"選中的選項索引為："+arrIndexes);
}

/************************添加新選項***************************************************************/
//
varaddNewLisbox=document.getElementById("addNew");//獲得下拉框對象
varotxtName=document.getElementById("txtName");//name文本框
varotxtValue=document.getElementById("txtValue");//value文本框


//添加方法
ListUtil.addOptions=function(oListbox,sName,sValue){

vararryV=newArray();
//標記輸入的值是否可以添加
varisAdd=false;
//判斷是否有重復的值
for(vari=0;i<oListbox.options.length;i++){
varsv=oListbox.options[i].getAttribute("value");
if(sv==sValue){
alert("不能添加重復的value");
return;
}else{
isAdd=true;
}
}

if(isAdd||oListbox.options.length==0){

//下面使用dom方法創建節點
varoOption=document.createElement("option");//創建option元素
oOption.appendChild(document.createTextNode(sName));

//因為選項的值不是必須的，所以如果傳入了值則添加進來
if(arguments.length==3){
oOption.setAttribute("value",sValue);
}
oListbox.appendChild(oOption);//把選項添加進列表框
alert("添加成功!!");

}//endif(isAdd)


}

//添加按鈕的點擊事件方法
functionaddNewSelections(){
vartxtname=otxtName.value;
vartxtvalue=otxtValue.value;
if(txtname!=""&&txtvalue!=""){
ListUtil.addOptions(addNewLisbox,txtname,txtvalue);//添加新項
otxtName.value="";
otxtValue.value="";

}else{
alert("請輸入要添加的值和name");
return;
}
}

/*******************刪除選中選項****************************************************************/

//傳入下拉框對象和(索引)
ListUtil.deleteOptons=function(oListbox){
varselIndex=oListbox.selectedIndex;

if(oListbox.options.length==0){
alert("列表中無元素可刪除");
return;
}
oListbox.remove(selIndex);//刪除選中的選項
}

//刪除按鈕點擊事件
functiondeleteselections(){

ListUtil.deleteOptons(addNewLisbox);
}

/**********刪除所有***********************************************************************/
ListUtil.deletsAllOptions=function(oListbox){
if(oListbox.options.length!=0){
for(vari=oListbox.options.length-1;i>=0;i--){//倒著刪除是因為
oListbox.remove(i);
}
}else{
alert("該列表為空!");
}
}

functiondeleteAllSelections(){
ListUtil.deletsAllOptions(addNewLisbox);
}

/*******移動選項***************************************************************************************/

//獲得下拉框
varmove1Listbox=document.getElementById("move1");//左邊下拉框
varmove2Listbox=document.getElementById("move2");//右邊下拉框

//移動一個或多個選中的選項
ListUtil.move=function(oListboxFrom,oListboxTo){
//varidx1=oListboxFrom.selectedIndex;
vararrIndexes=ListUtil.getSelectIndexes(oListboxFrom);
varoOption;

if(arrIndexes.length==0){
alert("請選擇至少一個選項!");
return;
}else{

for(vari=oListboxFrom.options.length-1;i>=0;i--){
oOption=oListboxFrom.options[i];
if(oOption.selected&&oOption!=null){
oListboxTo.appendChild(oOption);
}

}

}

}

//向右移一個元素
functionrightSingle(){

ListUtil.move(move1Listbox,move2Listbox);
};

//向左移一個元素
functionleftSingle(){
ListUtil.move(move2Listbox,move1Listbox);
}

ListUtil.moveAll=function(oListboxFrom,oListboxTo){
for(vari=oListboxFrom.options.length-1;i>=0;i--){
oOption=oListboxFrom.options[i];
//alert(oOption);
oListboxTo.appendChild(oOption);
}
}

//向右移所有選項
functionrightAll(){

ListUtil.moveAll(move1Listbox,move2Listbox);
}

//向左移所有選項
functionleftAll(){
ListUtil.moveAll(move2Listbox,move1Listbox);
}</script>
</html>

D. html下拉框怎麼設置默認值

html下拉框設置默認值，用到的工具:notepad++,步驟如下：

html代碼部分：

<select>
<optionvalue="1">北京</option>
<optionvalue="1"selected>天津內</option>
<optionvalue="1">上海</option>
</select>

說明：selected屬性容就是默認值，天津被默認選中。

效果圖：

注意事項：默認值只能設置一個，設置多個的話最後一個默認值是最終的默認值。

E. html select標簽下拉列表展開

為簡化用戶操來作，希望自滑鼠懸停在下拉列表框上時，能自動展開。查了一下select的屬性，沒有相關的操作。最後找了一個變通的辦法，代碼如下：

<select onmouseover="size=10;" onmouseout="size=1;" onchange="size=1;">
<option value="126.htm">126</option>
<option value="163.htm">163</option>
<option value="16.NET.htm">163net</option>
<option value="163vip.htm">163vip</option>

就是讓滑鼠懸停後，顯示的數目就自動改成10或其它數目。滑鼠移開後，還原成只顯示一個。用戶點擊了某一項也讓它恢復成正常狀態。

F. 怎麼用html5+js+css實現如圖所示的搜索下拉框，謝謝

<divclass="searchModel">

<selectname=""id=""value="2">

<optionvalue="0">科室</option>

<optionvalue="1">疾病</option>

<optionvalue="2">醫院</option>

</select>

<inputtype="text"placeholder="請輸入搜索內容">

</div>

<style>

html,

body,

div,

input,

select,

button{

margin:0;

padding:0;

border:none;

outline:none;

}

.searchModel{

display:flex;

border:1pxsolidorange;

border-radius:4px;

overflow:hidden;

margin:20px;

height:44px;

}

.searchModelselect{

color:#fff;

background:orange;

padding:022px;

/*appearance:none;*/

/*-moz-appearance:none;*/

/*Firefox*/

/*-webkit-appearance:none;*/

/*Safari和Chrome*/

}

select::-ms-expand{display:none;}

.searchModelselectoption{

color:#333;

background:#fff;

}

.searchModelinput{

flex:1;

padding:010px;

}

.searchModelbutton{

width:44px;

color:#fff;

background:orange;

}

</style>

要改變下拉選項選中的樣式，就用div去模擬下拉框
js部分，button提交表單，或者是div模擬提交ajax

G. html下拉菜單怎麼寫

方法如下：

方法一：

HTML

5、定位下拉菜單，並將菜單項對齊。這將會同時去除灰色背景。

position:relative;聲明必須添加到列表項頂端。
position:absolute;聲明必須添加到相對位置定位的列表中。

H. html里怎麼設置下拉選項

<select name="yourName" id="yourId">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

這樣就行了，一個option就是一個選項，value表示當前選項的值

I. 如何在 HTML 頁面中創建簡單的下拉列表框

select標簽可以創建下拉列表，列入

<select>
<optionvalue="1">我是下拉項版目權1</option>
<optionvalue="2">我是下拉項目2</option>
<optionvalue="3">我是下拉項目3</option>
<optionvalue="4">我是下拉項目4</option>
</select>

閱讀全文

html5下拉框

與html5下拉框相關的閱讀推薦