選擇列表為空時水平縮小

Question

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

下面是代碼：

<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>

Answer 1

將最小寬度屬性應用於它們。

例如：

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

選擇列表為空時水平縮小

問題描述

1 個解決方案

解決方案1
3 2010-05-01 16:34:23

選擇列表為空時水平縮小

問題描述

1 個解決方案

解決方案1 3 2010-05-01 16:34:23

解決方案1
3 2010-05-01 16:34:23