Jquery移动改变css宽度取决于控件的类

Question

我目前遇到了JQM的不好的一面。我已经说了两个下拉列表控件，我想根据他们的类添加不同的宽度。我该怎么办？

<asp:DropDownList runat="server" ID="ddlWidth1" 
        data-theme="e" </asp:DropDownList>

<asp:DropDownList runat="server" ID="ddlWidth2" 
        data-theme="e" </asp:DropDownList>

渲染HTM后，JQM设置了一些类，我可以像这样设置ddl's宽度：

.ui-select{
    width: 225px;
}

但是这使得ddl's宽度都相同。将css类添加到ddls将无济于事，因为在呈现HTML后我将丢失这些类。

Answer 1

这可以轻松完成，选择框必须包含在相应的 data-role="fieldcontain" DIV中。它们是专门为此目的而制作的。通过它们，任何内部形式元素都可以轻松修改。

工作示例：http://jsfiddle.net/Gajotres/FvQ5c/

HTML：

<div data-role="fieldcontain" id="ddlWidth1">
    <select>
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
    </select>
</div>
<div data-role="fieldcontain" id="ddlWidth2">
    <select>
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
    </select>
</div>

CSS：

#ddlWidth1  .ui-select { 
    width: 225px;
}

#ddlWidth2 .ui-select { 
    width: 100%;
}