1.select默认是inline元素，你可以

 

   
   
   
   
    
    
    
    
    
  1. select 
    2. 
    
    
    
    
  2. { 
    3. 
    
    
    
    
  3.     display:block; 
    4. 
    
    
    
    
  4. } 
    5.

2.默认select会选择第一项option，如果初始状态不选可以：

jq写法：

   
   
   
   
    
    
    
    
    
  1. $("select").each(function(){this.selectedIndex=-1}); 
    2.

或者干脆加个冗余option：

 

   
   
   
   
    
    
    
    
    
  1. <select> 
    2. 
    
    
    
    
  2.     <option>请选择网站...option> 
    3. 
    
    
    
    
  3.     <option value="http://www.qq.com">腾讯网option> 
    4. 
    
    
    
    
  4.     <option value="http://www.163.com">网易option> 
    5. 
    
    
    
    
  5.     <option value="http://www.google.com">谷歌option> 
    6. 
    
    
    
    
  6. select> 
    7.

注：

 

   
   
   
   
    
    
    
    
    
  1. The selectedIndex property returns -1 if a select object does not contain any selected items. Setting the selectedIndex property clears any existing selected items. 
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. The selectedIndex property is most useful when used with select objects that support selecting only one item at a time—that is, those in which the MULTIPLE attribute is not specified.  
    4.

3.获取选择项的值：

 

   
   
   
   
    
    
    
    
    
  1. <select id="ddlCities" onchange="alert(this.options[this.selectedIndex].value);"> 
    2. 
    
    
    
    
  2.     <option value="0">北京option> 
    3. 
    
    
    
    
  3.     <option value="1">济南option> 
    4. 
    
    
    
    
  4.     <option value="2">威海option> 
    5. 
    
    
    
    
  5. select> 
    6.

获取文本：

 

   
   
   
   
    
    
    
    
    
  1. this.options[this.selectedIndex].text 
    2.

更简洁的直接selectObj.value

 

4.多选

 

   
   
   
   
    
    
    
    
    
  1. <select id="ddlCities" multiple="multiple" size="2"> 
    2. 
    
    
    
    
  2.     <option value="0">北京option> 
    3. 
    
    
    
    
  3.     <option value="1">济南option> 
    4. 
    
    
    
    
  4.     <option value="2">威海option> 
    5. 
    
    
    
    
  5. select> 
    6.

 使用jq获取选择，仅测试所以写在标签上：

 

   
   
   
   
    
    
    
    
    
  1. <select id="ddlCities" multiple="multiple" size="2" onchange="alert($(this).find('option:selected').text());"> 
    2. 
    
    
    
    
  2.     <option value="0">北京option> 
    3. 
    
    
    
    
  3.     <option value="1">济南option> 
    4. 
    
    
    
    
  4.     <option value="2">威海option> 
    5. 
    
    
    
    
  5. select> 
    6.

如果纯js写，需要循环了：

 

   
   
   
   
    
    
    
    
    
  1. > 
    2. 
    
    
    
    
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
    
    
    
    
  3. <head> 
    4. 
    
    
    
    
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5. 
    
    
    
    
  5. <title>无标题文档title> 
    6. 
    
    
    
    
  6. <style type="text/css"> 
    7. 
    
    
    
    
  7. select 
    8. 
    
    
    
    
  8. { 
    9. 
    
    
    
    
  9.     display:block; 
    10. 
    
    
    
    
  10. } 
    11. 
    
    
    
    
  11. style> 
    12. 
    
    
    
    
  12. <script type="text/javascript"> 
    13. 
    
    
    
    
  13. function ddlCities_onchange(theSel) 
    14. 
    
    
    
    
  14. { 
    15. 
    
    
    
    
  15.     var arr=[]; 
    16. 
    
    
    
    
  16.     for(var i=0;i<theSel.options.length;i++) 
    17. 
    
    
    
    
  17.     { 
    18. 
    
    
    
    
  18.         if(theSel.options[i].selected) 
    19. 
    
    
    
    
  19.             arr.push(theSel.options[i].innerText);   
    20. 
    
    
    
    
  20.     } 
    21. 
    
    
    
    
  21.     alert(arr.join()); 
    22. 
    
    
    
    
  22. } 
    23. 
    
    
    
    
  23. script> 
    24. 
    
    
    
    
  24. head> 
    25. 
    
    
    
    
  25.  
    26. 
    
    
    
    
  26. <body> 
    27. 
    
    
    
    
  27. <select> 
    28. 
    
    
    
    
  28.     <option>请选择网站...option> 
    29. 
    
    
    
    
  29.     <option value="http://www.qq.com">腾讯网option> 
    30. 
    
    
    
    
  30.     <option value="http://www.163.com">网易option> 
    31. 
    
    
    
    
  31.     <option value="http://www.google.com">谷歌option> 
    32. 
    
    
    
    
  32. select> 
    33. 
    
    
    
    
  33.  
    34. 
    
    
    
    
  34. <select id="ddlCities" multiple="multiple" size="2" onchange="ddlCities_onchange(this);"> 
    35. 
    
    
    
    
  35.     <option value="0">北京option> 
    36. 
    
    
    
    
  36.     <option value="1">济南option> 
    37. 
    
    
    
    
  37.     <option value="2">威海option> 
    38. 
    
    
    
    
  38. select> 
    39. 
    
    
    
    
  39. body> 
    40. 
    
    
    
    
  40. html> 
    41.

5.添加移除option:

jq添加：

   
   
   
   
    
    
    
    
    
  1. $("<option value='3'>南京option>").appendTo($("#ddlCities")); 
    2.

js写法：

 

   
   
   
   
    
    
    
    
    
  1. var anOption = document.createElement("option"); 
    2. 
    
    
    
    
  2. anOption.text="南京"; 
    3. 
    
    
    
    
  3. anOption.value="4"; 
    4. 
    
    
    
    
  4. document.getElementById("ddlCities").options.add(anOption); 
    5.

或者 document.getElementById("ddlCities").add(anOption);