html中select用法？html中的select标签
老铁们，大家好，相信还有很多朋友对于html中select用法和html中的select标签的相关问题不太懂，没关系，今天就由我来为大家分享分享html中select用法以及html中的select标签的问题，文章篇幅可能偏长，希望可以帮助到大家，下面一起来看看吧！
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+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、点击按钮，查看实现的效果。
select中onchange的用法
用法：onchange事件会在域的内容改变时发生。
onchange="SomeJavaScriptCode"
onChange事件只有在值改变时才可触发，所以必须在每一次选择时（尤其第一次）保证选择的值是改变的！
onmousedown单击一次就查询一次，所以每选择一次就查询一次，增加了数据库的负担。每次选择至少要查询两次（一次是在数据库加载数据，一次是选择选项时又触发一次，）
咧：
<selectname="expireDay"id="expireDay"class="form-control"
onchange="searchChange(this.options[this.options.selectedIndex].value);">
<!--<optionvalue="">---请选择---</option>-->
<option
<c:iftest="${'0'==expireRemind.searchType}">
selected
</c:if>
value="0">aa</option>
<option
<c:iftest="${'1'==expireRemind.searchType}">
selected
</c:if>
value="1">bb</option>
</select>
可以显示和隐藏
functionsearchChange(obj){
if(obj=="0"){
$('#expireDate').hide();
$('#soonExpireDay').show();
}
if(obj=='1'){
$('#soonExpireDay').hide();
$('#expireDate').show();
}
}
扩展资料
通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
是一种解释性脚本语言（代码不进行预编译）。
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
参考资料来源：百度百科-javascript
html中select用法和html中的select标签的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！