是否可以设置jQuery自动完成组合框的宽度?

前端之家收集整理的这篇文章主要介绍了是否可以设置jQuery自动完成组合框的宽度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用 this jQuery UI combobox autocomplete control开箱的jQuery UI网站:

我的问题是,我有一个页面上的多个组合框,我希望他们有不同的宽度为每一个。

我可以通过添加这个CSS更改所有的宽度:

.ui-autocomplete-input
 {
     width: 300px;
 }

但我不能找出一种方法来改变其中一个的宽度。

解决方法

一个简单的
$('.ui-autocomplete-input').css('width','300px')

工作(我试图在链接页面Firebug)更改页面上的第一个。

您可以执行以下操作:

$($('.ui-autocomplete-input')[N]).css('width','300px') #N is the nth Box on the page

更改第N个。

要通过特性找到一个特定的,你可以在许多方面做到。

通过第一个“选项”(在本例中为“asp”)找到它:

$('.ui-autocomplete-input').map(function(){if ($(this).parent().children()[1].options[0].text == 'asp'){ $(this).css('width','300px'); return false;} })

找到它的“标签”:

$('.ui-autocomplete-input').map(function(){if ($($(this).parent().children()[0]).text() == "Your preferred programming language: "){ $(this).css('width','300px'); return false;}})

等等…

我会更新,如果你有一个想法,如何你想找到你的组合框。

编辑评论

oo,这使它更容易。从您链接到的示例源中,HTML已经包装在div中:

<div class="ui-widget" id="uniqueID">
    <label>Your preferred programming language: </label>
    <select>
        <option value="a">asp</option>
        <option value="c">c</option>
        <option value="cpp">c++</option>
        <option value="cf">coldfusion</option>
        <option value="g">groovy</option>
        <option value="h">haskell</option>
        <option value="j">java</option>
        <option value="js">javascript</option>
        <option value="p1">perl</option>
        <option value="p2">PHP</option>
        <option value="p3">python</option>
        <option value="r">ruby</option>
        <option value="s">scala</option>
    </select>
</div>

我会给那个div一个唯一的id然后:

$('#uniqueID > input.ui-autocomplete-input').css('width','300px')

它选择您的div的子元素,它们是具有类“ui-autocomplete-input”的输入。

原文链接:https://www.f2er.com/jquery/184007.html

猜你在找的jQuery相关文章