비어있을 때 선택 목록이 가로 방향으로 축소됩니다.

두 개의 선택 목록 상자가 있고 앞으로 (->) 및 뒤로 (< -) 버튼을 사용하여 항목 사이를 앞뒤로 이동할 수 있습니다. 그러나 선택 목록에 항목이 없으면 항목의 크기가 가로로 줄어 듭니다. 선택 목록을 고정 된 크기로 유지하는 방법은 옵션이 포함되어 있는지 여부에 관계없이?비어있을 때 선택 목록이 가로 방향으로 축소됩니다.

<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

놀라운, 당신은 여전히 넷스케이프에 대한 응답 animuson 4. – kennytm

이 그들에게 분-width 속성을 적용 : 아래

는 코드입니다. 예를 들어

는

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

출처

2010-05-01 16:34:23 animuson

감사를 테스트해야합니다. 하지만, IE에서 min-width가 지원됩니까? – joe

http://www.w3schools.com/css/pr_dim_min-width.asp – animuson

비어있을 때 선택 목록이 가로 방향으로 축소됩니다.

답변

관련 문제