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屬性就是默認值，天津被默認選中。
效果圖：
注意事項：默認值只能設置一個，設置多個的話最後一個默認值是最終的默認值。