multiSelect - 下拉菜單。當新選項添加

我使用一些代碼從 http://abeautifulsite.net/blog/2008/04/jquery-multiselect/#demo multiSelect - 下拉菜單。當新選項添加

它看起來巨星，但我需要清除dropdwn並添加新的選項寬度改變。當我這樣做時，寬度不變，並且展開。

我該如何添加選項寬度改變multidropdown的佈局？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title></title> 
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
<script src="http://labs.abeautifulsite.net/projects/js/jquery/multiSelect/jquery.bgiframe.min.js" type="text/javascript"></script> 
<script src="http://labs.abeautifulsite.net/projects/js/jquery/multiSelect/jquery.multiSelect.js" type="text/javascript"></script> 
<link href="http://labs.abeautifulsite.net/projects/js/jquery/multiSelect/jquery.multiSelect.css" rel="stylesheet" type="text/css" /> 

    <script type="text/javascript"> 

     $(document).ready(function() { 
     // Options displayed in comma-separated list 
      $("#d").multiSelect({ oneOrMoreSelected: '*' });    
      $("#f").multiSelect({ oneOrMoreSelected: '*' });    
     }); 
     var i=0; 

     function insOptions() { 
      var ddl = $("#d"); 

      ddl.append("<option value='" + i+ "'>" + i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i + "</option>"); 
      i++; 
      ddl.append("<option value='" + i+ "'>" + i + "</option>"); 
      i++; 
      ddl.append("<option value='" + i+ "'>" + i + "</option>"); 
      ++i; 
      //document.getElementById("control_9").options.add(opt); 
      var widthh = $("#d").width(); 

      $("#d").multiSelect({ oneOrMoreSelected: '*' });  

      var ddl = $("#f"); 

      ddl.append("<option value='" + i+ "'>" + i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i + "</option>"); 
      i++; 
      ddl.append("<option value='" + i+ "'>" + i + "</option>"); 
      i++; 
      ddl.append("<option value='" + i+ "'>" + i + "</option>"); 
      ++i; 
      //document.getElementById("control_9").options.add(opt); 
      var widthh = $("#f").width(); 

      $("#f").multiSelect({ oneOrMoreSelected: '*' });  
     } 
    </script> 
</head> 
<body> 
    <form action="" name="myForm" method="post"> 
     <p> 
      <select id="d" multiple="multiple" style="width: 120px"> 
       <option value=""></option> 
       <option value="option_1">Option 1</option> 
       <option value="option_2">Option 2</option> 
      </select> 
     </p> 
       <p> 
      <select id="f" multiple="multiple" style="width: 220px"> 
       <option value=""></option> 
       <option value="option_1">Option 1</option> 
       <option value="option_2">Option 2</option> 
      </select> 
     </p> 
     <p> 
      <input type="button" value="Add new options in dropdown" onclick="insOptions();"> 
     </p> 
    </form> 
</body> 
</html>

來源

2011-10-12 boje

嘗試使用此

<fieldset data-role="controlgroup" style="width:200px"> 


    <select name="hobbies" style="padding:0px;" multiple="multiple" id="ddhobbies" data-native-menu="false"> 
     <option>Hobbies</option> 
     <option value="Reading">Reading</option> 
     <option value="Music">Music</option> 
     <option value="Movies">Movies</option> 
     <option value="Sports">Sports</option> 
     <option value="Cooking">Cooking</option> 
     <option value="Dancing">Dancing</option> 
     <option value="Social Service">Social Service</option> 
     <option value="Drawing/Painting">Drawing/Painting</option> 
     <option value="Other">Other</option> 

    </select></fieldset>

我希望它能幫助。

來源

2011-11-10 07:17:16

multiSelect - 下拉菜單。當新選項添加​​

回答

相關問題

multiSelect - 下拉菜單。當新選項添加