選擇列表在水平時縮小爲空

我有兩個選擇列表框，我可以使用前進（ - >）和後退（< - ）按鈕在它們之間來回移動項目。但是，如果選擇列表中沒有項目，則其水平縮小。任何方式保持選擇列表固定的大小，無論它是否包含任何選項？選擇列表在水平時縮小爲空

下面是代碼：

<html> 

<head> 
<script language="JavaScript" type="text/javascript"> 
<!-- 

var NS4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5); 

function addOption(theSel, theText, theValue) 
{ 
    var newOpt = new Option(theText, theValue); 
    var selLength = theSel.length; 
    theSel.options[selLength] = newOpt; 
} 

function deleteOption(theSel, theIndex) 
{ 
    var selLength = theSel.length; 
    if(selLength>0) 
    { 
    theSel.options[theIndex] = null; 
    } 
} 

function moveOptions(theSelFrom, theSelTo) 
{ 

    var selLength = theSelFrom.length; 
    var selectedText = new Array(); 
    var selectedValues = new Array(); 
    var selectedCount = 0; 

    var i; 

    // Find the selected Options in reverse order 
    // and delete them from the 'from' Select. 
    for(i=selLength-1; i>=0; i--) 
    { 
    if(theSelFrom.options[i].selected) 
    { 
     selectedText[selectedCount] = theSelFrom.options[i].text; 
     selectedValues[selectedCount] = theSelFrom.options[i].value; 
     deleteOption(theSelFrom, i); 
     selectedCount++; 
    } 
    } 

    // Add the selected text/values in reverse order. 
    // This will add the Options to the 'to' Select 
    // in the same order as they were in the 'from' Select. 
    for(i=selectedCount-1; i>=0; i--) 
    { 
    addOption(theSelTo, selectedText[i], selectedValues[i]); 
    } 

    if(NS4) history.go(0); 
} 

//--> 
</script> 
</head> 
<body> 


<form action="yourpage.asp" method="post"> 
<table border="0"> 
    <tr> 
     <td width="70"> 
      <select name="sel1" size="10" multiple="multiple"> 
      <option value="1">Left1</option> 
      <option value="2">Left2</option> 
      <option value="3">Left3</option> 
      <option value="4">Left4</option> 
      <option value="5">Left5</option> 
      </select> 
     </td> 
     <td align="center" valign="middle"> 
      <input type="button" value="--&gt;" 
      onclick="moveOptions(this.form.sel1, this.form.sel2);" /><br /> 
      <input type="button" value="&lt;--" 
      onclick="moveOptions(this.form.sel2, this.form.sel1);" /> 
     </td> 
     <td> 
      <select name="sel2" size="10" multiple="multiple"> 
      <option value="1">Right1</option> 
      <option value="2">Right2</option> 
      <option value="3">Right3</option> 
      <option value="4">Right4</option> 
      <option value="5">Right5</option> 
      </select> 
     </td> 
    </tr> 
</table> 
</form> 

</body> 
</html>

來源

2010-05-01 joe

最好的，你還需要測試的Netscape 4 – kennytm 2010-05-01 16:33:03

應用一個最小寬度屬性給他們。

例如：

<select name="sel1" size="10" multiple="multiple" style="min-width: 200px;">

來源

2010-05-01 16:34:23 animuson

感謝您的答覆animuson。但是，在IE中支持最小寬度？ – joe 2010-05-01 16:37:56

http://www.w3schools.com/css/pr_dim_min-width.asp – animuson 2010-05-01 16:43:16

選擇列表在水平時縮小爲空

回答

相關問題