html下拉框程式碼html下拉框選擇事件

html下拉框怎麼設定預設值

  1、設定selected屬性就可以,具體的用法,首先開啟hbuilder軟體,新建一個html文件,裡面寫入一個select下拉框:
  2、然後給select中一個option設定selected屬性,設定一些簡單的樣式,再給body設定一個背景色即可:
  3、最後開啟瀏覽器,既可以看到select中下拉框的預設值是上海了:

html裡怎麼設定下拉選項?

  html裡可以用標籤  
  標籤的選項,它有2個東西需要設定,分別是值value和文字顯示。
  例如這個opion
    它的value是0,文字是"請選擇分類"。
  如果你在頁面儲存了一些資訊,一般提交給伺服器的時候提交的是它的value。
  3、嘗試編寫例子
  例如下面的程式碼,在html裡面展示的效果如圖
  

html中列表框和下拉選單框有什麼區別啊?
  在  HTML中,下拉選單和列表框的程式碼都是,它們的主要區別是:顯示的形式不同。  下拉選單框只露出一行,同時只能選擇一行。不佔地方,其它資料都藏在下拉選單的裡面。  列表框的資料可以顯示出多行,可以同時選擇多行。其餘的資料也可以藏在列表框的裡面,這個數由使用者設定屬性決定。size=決定露出的行數,multiple決定可以同時選擇多行。  1)下拉選單的程式碼:(以居住地為例)  居住地:    預設size=1,只顯示一行,只能選擇一行  北京  上海  天津  武漢  ......    它們在一個文字框裡只顯示出來一行,顯示哪一行由selected屬性來決定,其它的選項由使用者點選下拉選單的向下三角,拉開裡邊的所有選項進行選擇,一次只能選擇一項。  2)列表框的程式碼    size確定顯示4行,multiple決定可以同時選擇多項  北京  上海  天津  武漢  合肥  ......  
html的下拉框的幾個基本用法

        grid            

    18-21  22-25  26-29  30-35  Over35    

  

    

  

多選須要新增multiple屬性
  在多選中size屬效能夠初始化下拉框預設顯示幾個選項  

  

    18-21  22-25  26-29  30-35  Over35  Over40  Over50    

  

  

        

selectName:

  

selectValue:

    

    18-21  22-25  26-29  30-35  Over35  Over40  Over50    

  

移動選項

  

  

    

    "onclick="rightSingle()"/>
  >"onclick="rightAll()"/>
  
    

  

  

  
  

    18-21sfiods  22-25sjdfd  26-29xxs  30-35vs  Over35dcff  Over40shhfsd  Over50sdefs  Over88www    

  

  

    18-21  22-25  26-29  30-35  Over35  Over40  Over50  Over88    

  

          //獲得下拉選單物件  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=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);  }      
html下拉選單怎麼做
  下拉選單不知您說的是哪種,表單元素提供了select下拉框,完全滿足下拉選單的需求。  如果是導航類的下拉選單的話,首先給可選擇的主體部分設定寬高,相對定位屬性。然後主體部分建子標籤,也就是下拉出來的部分,這部分設定display:none,絕對定位。透過事件是滑鼠懸浮或者點選來動態切換子標籤的display,none為隱藏,block為顯示。

版權宣告:
作者:Julie Selby
連結:https://sh100k.com/html-xia-la-kuang-cheng-shi-ma-html-xia-la-kuang-xuan-ze/
來源:SH100K – 生活百科
文章版權歸作者所有,未經允許請勿轉載。

THE END
< <上一篇
下一篇>>