如何在HTML中做一个可以输入的下拉框

2023-02-19 21:25:01html-css029

如何在HTML中做一个可以输入的下拉框,第1张

HTML中做一个可以输入的下拉框，需要用户添加label标签设置我们的下拉菜单选项的内容相应的选项值，然后设置select标签，在select标签内部设置option选项标签，设置文本框，设置label标签，显示文本框的说明文字，然后添加textarea标签，内部设置我们文本框的相关属性即可。具体操作步骤如下。

1、添加label标签设置我们的下拉菜单选项的内容相应的选项值，然后设置select标签，在select标签内部设置option选项标签，这里需要几个选项就设置几个标签。如下图所示。

2、将下拉菜单需要显示的每一个内容设置在option标签中，如图所示，预览的设置效果，在网页中我们可以看到一个下拉菜单。如下图所示。

3、有时候下拉菜单也需要设置一个默认的值，如果大部分内容都是相同的，可以将它设置为默认值，只需要在它相应的属性中设置为选中状态。如下图所示。

4、再次预览我们的网页，可以看到刚才设置checked的选项已经默认显示在了设置的下拉菜单中选中状态。如下图所以。

5、设置文本框，设置label标签，显示文本框的说明文字，然后添加textarea标签，内部设置文本框的相关属性。如下图所示。

6、最后，可输入下拉框制作完成。如下图所示。

注意事项：

HTML中做一个可以输入的下拉框按照上述步骤操作即可制作完成。

select标记有一个属性multiple，将其设置成multiple="multiple"按住Ctrl键即可实现多选。请看例子：

<html>

<head>

<title>无标题文档</title>

</head>

function getValue()

{

var s = ""

for(var i=0i<form1.ss.options.lengthi++)

{

if(form1.ss.options[i].selected)

{

s+=form1.ss.options[i].value

}

alert(s)

}

</script>

<body>

请选择：

</select>

<br>

</form>

</body>

</html>

**************************补充**********************

修改select标签的size属性，把它的值改为1即可。

<html>

<head>

</head>

<body>

<div>

</select>

</div>

<p>

<div>

<div>多选须要添加 multiple属性<br>

在多选中size属性能够初始化下拉框默认显示几个选项

</div>

<div>

</select>

</div>

<p></p>

<div>selectName :<input type="text" id="txtName"/></div>

<div>selectValue:<input type="text" id="txtValue"/></div>

<div>

</select>

</div>

<p>

<table>

<td>

<div>

<option value="1">18-21sfiods</option>

<option value="2">22-25sjdfd</option>

<option value="6">Over40shhfsd</option>

<option value="7">Over50sdefs</option>

</select>

</div>

</td>

<input type="button" value=">" onclick = "rightSingle()" /><br>

<input type="button" value=">>" onclick = "rightAll()"/><br>

</td>

<td>

<div>

</select>

</div>

</td>

<tr>

</table>

</body>

//获得下拉列表对象

oListbox = document.getElementById("selectAge")

var ListUtil = new Object()

var selectbtn = document.getElementById("selectbtn")

function getSelAge (){

//访问选项

alert(oListbox.options[1].firstChild.nodeValue) //显示的内容

alert(oListbox.options[1].getAttribute("value"))//相应的value

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

alert("获得集合的元素个数长度== " + oListbox.options.length) //获得集合的元素个数长度

}

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

//获得选中选项

function getSelect(){

var indx = oListbox.selectedIndex

alert("获得选中的选项的索引 "+ indx )

}

//多选下拉框

var moreselAgeList = document.getElementById("moreselAge")

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

//入参下拉框对象

ListUtil.getSelectIndexes = function (oListbox){

var arrIndexes = new Array()

for(var i=0 i<oListbox.options.lengthi++){

//假设该项被选中则把该项相应的索引加入到数组中

if(oListbox.options[i].selected){

arrIndexes.push(i)

}

return arrIndexes //返回选中的选项索引

}

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

// 多选

function moreSelect(){

var arrIndexes = ListUtil.getSelectIndexes(moreselAgeList)

alert("选中的数组length = "+ arrIndexes.length + " 选中的选项索引为："+ arrIndexes)

}

/************************加入新选项***************************************************************/

var addNewLisbox = document.getElementById("addNew") //获得下拉框对象

var otxtName = document.getElementById("txtName") //name 文本框

var otxtValue = document.getElementById("txtValue") //value 文本框

//加入方法

ListUtil.addOptions = function(oListbox,sName,sValue){

var arryV = new Array()

//标记输入的值能否够加入

var isAdd = false

//推断是否有反复的值

for(var i =0 i<oListbox.options.lengthi++){

var sv = oListbox.options[i].getAttribute("value")

if(sv == sValue){

alert("不能加入反复的value")

return

}else{

isAdd = true

}

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

//以下使用dom方法创建节点

var oOption = document.createElement("option")// 创建option元素

oOption.appendChild(document.createTextNode(sName))

//由于选项的值不是必须的，所以假设传入了值则加入进来

if(arguments.length == 3){

oOption.setAttribute("value",sValue)

}

oListbox.appendChild(oOption) //把选项加入进列表框

alert("加入成功!!")

} // end if(isAdd)

}

//加入button的点击事件方法

function addNewSelections(){

var txtname = otxtName.value

var txtvalue = otxtValue.value

if(txtname != "" && txtvalue != ""){

ListUtil.addOptions(addNewLisbox,txtname,txtvalue)//加入新项

otxtName.value = ""

otxtValue.value = ""

}else{

alert("请输入要加入的值和name")

return

}

/*******************删除选中选项****************************************************************/

//传入下拉框对象和(索引)

ListUtil.deleteOptons = function(oListbox){

var selIndex = oListbox.selectedIndex

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

alert("列表中无元素可删除")

return

}

oListbox.remove(selIndex) //删除选中的选项

}

//删除button点击事件

function deleteselections(){

ListUtil.deleteOptons(addNewLisbox)

}

/**********删除全部***********************************************************************/

ListUtil.deletsAllOptions = function(oListbox){

if(oListbox.options.length != 0){

for(var i= oListbox.options.length-1i>=0i--){ //倒着删除是由于

oListbox.remove(i)

}

}else{

alert("该列表为空!")

}

function deleteAllSelections(){

ListUtil.deletsAllOptions(addNewLisbox)

}

/*******移动选项***************************************************************************************/

//获得下拉框

var move1Listbox = document.getElementById("move1") //左边下拉框

var move2Listbox = document.getElementById("move2") //右边下拉框

//移动一个或多个选中的选项

ListUtil.move = function(oListboxFrom ,oListboxTo){

//var idx1 = oListboxFrom.selectedIndex

var arrIndexes = ListUtil.getSelectIndexes(oListboxFrom)

var oOption

if(arrIndexes.length == 0 ){

alert("请选择至少一个选项!")

return

}else{

for(var i=oListboxFrom.options.length-1i>=0i--){

oOption = oListboxFrom.options[i]

if(oOption.selected && oOption != null ){

oListboxTo.appendChild(oOption)

}

//向右移一个元素

function rightSingle(){

ListUtil.move(move1Listbox,move2Listbox)

}

//向左移一个元素

function leftSingle(){

ListUtil.move(move2Listbox,move1Listbox)

}

ListUtil.moveAll = function(oListboxFrom,oListboxTo){

for(var i=oListboxFrom.options.length-1i>=0i--){

oOption = oListboxFrom.options[i]

//alert(oOption)

oListboxTo.appendChild(oOption)

}

//向右移全部选项

function rightAll(){

ListUtil.moveAll(move1Listbox,move2Listbox)

}

//向左移全部选项

function leftAll(){

ListUtil.moveAll(move2Listbox,move1Listbox)

}

</script>

</html>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：Java的概念和定义是什么？

# 下一篇：有哪些c语言的小项目适合新手练习的，几百到几千行的那种

推荐阅读

热门文章

最新发布

标签列表

如何在HTML中做一个可以输入的下拉框

给您推荐相同类型的内容：