当前位置：首页 » 编程语言 » 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下拉框相关的阅读推荐