Question

我正在尝试找到一种方法来控制数据绑定下拉列表框中显示的项目的宽度。我目前正在尝试使用jQuery来控制显示的选项的宽度，但是在提出正确的语法时遇到了问题。任何帮助将不胜感激或更好地了解处理问题的一些方法。 DropDown是一个ASP控件，所以进入选项部分的问题如下所示。

<script src="../../scripts/jquery-1.7.js" type="text/javascript"></script> 
<script type="text/javascript">

  $(document).ready(function() {
    $('#<%=DropDownList1.ClientID %>').css({ 'width': '10' });
    $('#<%=DropDownList1.ClientID %>'option).css({ 'width': '70' });

    alert("Testing."); 
  }); 
</script>

更新：我被要求从后面的代码中提供一些html，DDL中有超过3000条记录，所以这里是前几个....

 <select name="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder2$DropDownList1" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder2$DropDownList1\',\'\')', 0)" id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder2_DropDownList1">
<option selected="selected" value="434"> </option>
<option value="1160">-</option>
<option value="638"> 
</option>
<option value="702">    [%iScreen%]   = getnum(&quot;iScreen&quot;)
[%iButton%]   = getnum(&quot;iButton&quot;)
[%iProg%]     = getnum(&quot;iProg&quot;)
[%itest1%]    = getnum(&quot;itest1&quot;)
[%iSelectMY%] = getnum(&quot;iSelectMY&quot;)
[%iDSAPNO%]   = getnum(&quot;iDSAPNO&quot;)
[%iVehicle%]  = getnum(&quot;iVehicle&quot;)
[%iIESC%]     = getnum(&quot;iIESC&quot;)
[%iEngine%]   = getnum(&quot;iEngine&quot;)
[%iDSA%]      = getnum(&quot;iDSA&quot;)
[%iEXY%]      = getnum(&quot;iEXY&quot;)
[%iACCPNO%]   = getnum(&quot;iACCPNO&quot;)
[%sPart%]     = </option>
<option value="113">
</option>
<option value="342">
</option>
<option value="628">
    Isolation Solenoid

    Please Depress and Release Brake

    When You Press 'On' The Modulator is Drive For 15 Seconds.

    Check That No Braking Force Is Exerted.
</option>
<option value="2898">%</option>
<option value="3095">&amp;8BK</option>
<option value="3091">&amp;WZA</option>here

为了列出所有内容，我意识到选项中也有块文本。这是我无法控制的db后端的本质。

谢谢，

Answer 1

您在下拉列表ID和'option'之间缺少一个空格，并且选项位于字符串之外：

$('#<%=DropDownList1.ClientID %> option').css({ 'width': '70' });

Answer 2

您无法控制<option>元素的宽度，因为它们包含在下拉UI中。只有<select>可以设置宽度。

控制下拉列表框宽度

2 个答案: