1. html中表单下拉框1到100怎么做
html中表单下拉框1到100的步骤
1、新建一个html文件。
2、在body标签里写入下拉列表select标记。
3、在select标记中用option写入下拉框内的值，想要多少就写多少即可。
(1)前端中下拉框怎样用扩展阅读：
HTML
表单
1、表单是一个包含表单元素的区域。
2、表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
3、表单使用表单标签
<form>
来设置:
4、HTML
表单
-
输入元素，多数情况下被用到的表单标签是输入标签（<input>），输入类型是由类型属性（type）定义的。
2. 如何触发下拉框下拉事件
下面介绍两种方式，主要给出插件代码：
1，可以手动写js，设置下拉框为多选下拉框。
2，也可以使用对应的插件，比如zui.sexy中chosen插件，非常的专业好用。当然还有其他的前端插件，都是可以用的。
插件代码（对应的js包需要自己导入，这里给出关键实现代码）：
<selectdata-placeholder="选择一些爱吃的水果..."class="chosen-selectform-control"tabindex="2"multiple="">
<optionvalue="strawberries">草莓</option>
<optionvalue="apple">苹果</option>
<optionvalue="orange">橙子</option>
<optionvalue="cherry">樱桃</option>
<optionvalue="banana">香蕉</option>
<optionvalue="figs">无花果</option>
</select>
<!--下面的代码为插件的具体实现-->
$('select.chosen-select').chosen({
no_results_text:'没有找到',//当检索时没有找到匹配项时显示的提示文本
disable_search_threshold:10,//10个以下的选择项则不显示检索框
search_contains:true//从任意位置开始检索
});
导入对应的js包，利用上面的代码，即可实现多选下拉框的需求，截图如下：
成功完美的实现！
3. 使用html和css实现元素下拉框的方法
以将 下拉菜单嵌入由盒子中 充当的按钮 为例来说明问题，以类选择器为button的盒子当作触发下拉菜单的容器(即是当鼠标移动到该按钮上面出现下拉框)，则必须将hover属性附着在按钮盒子的上一级盒子上，但是通常上一级的盒子比当前盒子大或者里面有多个小盒子，那么鼠标放在按钮外部和上一级盒子的内部仍然可以将下拉带单显示，于是尝试在按钮盒子的上一级加上了一个与按钮大小一样的按钮，并将下拉菜单附着于此。
第一想法就是给未显示（默认隐藏时）的下拉菜单栏添加，其结果就是边框一直处于显示状态，在下拉菜单栏隐藏时无法隐藏。解决方法就是将边框的属性加在hover属性里面，未显示时的边框设置为零。
未显示时属性为（ display: none;）显示时属性为（display: block;），结果就是能够显示与隐藏，但是动画效果没有表现出来。想不通...
除了使用display的属性之外，还可以使用：下拉菜单栏的隐藏通过使菜单栏的属性overflow: hidden; 来实现。
list中（隐藏时）的height设置为零，hover中（显示时）的height设置为110px，使用动画transition属性来过渡。
同样是通过overflow: hidden;实现隐藏，但是是通过visibility:visible;显示隐藏，动画效果仍然有效。
就是相比方法二将hover里面的属性由display: block; 改为visibility:visible;
以上均为鄙人实践的结果，理解甚微，纰漏繁多，还请斧正。
比如说：下拉菜单收起时的动画没有搞明白怎样控制，而且下拉菜单收起时的动画没有边框；假如使用visibility: hidden;和visibility:visible;实现隐藏和显示时，会出现动画效果播放完之前，下拉菜单栏内容已经展示出来。
4. 如何在select下拉框设置滚动条
1、双击打开HBuilder编辑工具，新建静态页面select.html，并引入jquerymobile相关的css文件和JavaScript文件，还需要引入jquery核心文件。
2、然后需要按照图示代码利用jquerymobile布局样式设置上中下，分别使用对应的样式设置布局。
3、然后需要按照图示代码在中间布局的div标签中插入form表单，并在form表单插入一个select下拉框。
4、保存代码并预览该静态页面，可以查看到一个下拉框，点击下拉框查看效果。
5、然后需要按照图示代码再次在select下拉框标签添加属性data-mini，设置为true。
6、然后需要按照图示代码再在该下拉框select元素添加属性data-iconpos，设置值为left即可。
5. 关于前端下拉框获取的问题，请详细解答
这个不是很简单吗？你先分析问题：你通过接口从后台返回数据，那么你肯定是遍历循环出来的吧，那你就做一个判断，先获取这个选择框的value, if(value == 10){那你就遍历循环10条数据}else if(value == 15){那你就遍历循环15条数据 }
6. 如何用JS选中下拉框选项
1、打开vscode，创建一个H5规范的页面，用于演示js如何给下拉框设置默认值。
7. 前端文本框与下拉框可自由切换吗
可以。
robotframework自动化系列:文本类型的下拉框 对于下拉框定位和输入,这里主要遇到有两种类型的下拉选择. 其中一个类型是select-options格式。
多行文本 多行文本使用textarea标签,默认值需要写在中间,和input标签不同,name属性用于后台获取数据。
8. html的下拉框的几个基本使用方法
看你要修改到何种程度了，如果只是增加长度、高度等样式可以这样，比如:<div class="div1"><select><option></option></select></div>这样的结构，你可以用.div1 select{样式},来定义一些基本的长度啊、宽度啊、内边距、外边距什么的，如果你想要做的更加美观好看，估计要用到js来控制了
9. 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>
10. html下拉框怎么设置默认值
html下拉框怎么设置默认值？
步骤如下：
html代码部分：
<select> <optionvalue="1">
北京</option> <optionvalue="1"selected>
天津</option> <optionvalue="1">
上海</option> </select>
说明：selected属性就是默认值，天津被默认选中。
效果图：
注意事项：默认值只能设置一个，设置多个的话最后一个默认值是最终的默认值。