html select(html select标签)
今天给各位分享html select的知识，其中也会对html select标签进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
html里怎么设置下拉选项
html里可以用<select>标签设置下拉框。下面详细介绍其用法。
这是测试链接，可以参考本教程自己实操网页链接。
1、<select>标签
<select>标签在HTML里面是下拉框，用户点一下可以选择里面的选项
2、<option>标签
<option>标签是<select>标签的选项，它有2个东西需要设置，分别是值value和文本显示。
例如这个opion
<option value="0">请选择分类</option>
它的value是0，文本是"请选择分类"。
如果你在页面保存了一些信息，一般提交给服务器的时候提交的是它的value。
3、尝试编写例子
例如下面的代码，在html里面展示的效果如图
<select>
<option value="0">请选择分类</option>
<option value="1">美食/营养</option>
<option value="10">游戏/数码</option>
<option value="37">手工/爱好</option>
<option value="50">生活/家居</option>
<option value="73">健康/养生</option>
<option value="86">运动/户外</option>
<option value="93">职场/理财</option>
<option value="101">情感/交际</option>
<option value="108">母婴/教育</option>
<option value="123">时尚/美容</option>
</select>
html中如何清空select标签中的值
html中清空select标签中的值方法如下：
准备材料：html+jquery、代码编辑器
1、新建一个html文件，命名为test.html，使用jquery清除select中的所有option。
2、在test.html文件内,使用select和option标签创建一个下拉选择框，代码如下：
3、在test.html文件内,设置select的id为myselect，用于下面通过该id获得select对象。
4、在test.html文件内，使用button标签创建一个按钮，按钮名称为“清除所有option”。
5、在test.html文件内，给button按钮绑定onclick点击事件，当按钮被点击时，执行deloption（）函数。
6、在js标签中，创建deloption()函数，在函数内，通过id获得select对象，使用find()方法获得所有的option对象，使用remove()方法来实现删除所有option。
7、在浏览器打开test.html文件，
8、点击按钮，查看实现的效果。
html的下拉框的几个基本用法
<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)
}
//加入button的点击事件方法
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);//删除选中的选项
}
//删除button点击事件
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>
html select的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html select标签、html select的信息别忘了在本站进行查找哦。