jquery ui selectmenu：如何正确设置动态宽度？

我想使用felixnagel的jquery ui selectmenu。它可以工作，但我有一个问题，jquery总是为selectmenu设置太小的宽度，这样打开/关闭图标就会出现在内容上方。我知道我可以在命令selectmenu（）中设置宽度，但是我有两个不同的selectmenu，所以我想知道我可以在哪里影响正确的计算selectmenu的宽度，这样我就可以给它一个额外的px宽度

我试图在.js文件中找到它，但从现在起我就没有成功。希望你们中有人知道我能在这里做什么

多谢各位

---

鲁文

也许像这样的东西会对你有所帮助

<select width="200">
    <option>Small</option>
</select>


$(document).ready(function(){
    $.each($('select'), function () {
        $(this).selectmenu({ width : $(this).attr("width")})
    })
})

小的
$（文档）.ready（函数（）{
$。每个（$（'select'），函数（）{
$（this.selectmenu（{width:$（this.attr（“width”）}）
})
})

您可以遍历每个选择元素，并且可以在“选择元素宽度”属性中指定with。也许你会发现它很有用，可以修改它来满足你的需要

编辑1： 或者，如果您只是想通过代码添加一些额外的内容（我认为您也可以使用CSS），您可以使用以下内容：

<select>
    <option>Small</option>
</select>


$(document).ready(function(){
    $.each($('select'), function () {
        $(this).selectmenu({ width : $(this).width() + 100}) // You just take the width of the current select and add some extra value to it
    })
})

小的
$（文档）.ready（函数（）{
$。每个（$（'select'），函数（）{
$（this.selectmenu（{width:$（this.width（）+100}）//您只需获取当前select的宽度并向其添加一些额外的值即可
})
})

以前的解决方案几乎是正确的

您必须按如下方式设置css宽度并调用selectmenu：

$('select').selectmenu({ width : $(this).css('width')});

---

这很简单，可以根据内容进行调整

$( "select" ).selectmenu({ width : 'auto'});

这使用硬编码宽度，以避免在选择注释中提到的不同宽度的项目时出现问题：

$( "select" ).selectmenu({ width : 250});

---

对于百分比，如下所示：

$('select').selectmenu({ width : $(this).css('width')});

在CSS中声明百分比：

 select{
    width: 100%;
 }

在JavaScript中：

jQuery("select").selectmenu(
        {
            width:  jQuery(this).attr("width"),
        }   
);

---

这是一种黑客攻击，我不知道它有多强大，但我在一个特定的实例中成功地使用了它：

$("select").each(function(){
    var $this=$(this);
    $this.selectmenu();
    var menu=$this.selectmenu("menuWidget");
    var button=$this.selectmenu("widget");
    button.click();
    var longest=null;
    menu.children("li").each(function(){
        var $this=$(this);
        if(longest==null || longest.text().length < $this.text().length){
            longest=$this;
        }
    });
    menu.css("width","auto");
    var width=longest.mouseover().width();
    button.click();
    var innerButton = button.find(".ui-selectmenu-text");
    var paddingRight=parseFloat(innerButton.css("padding-right"));
    var paddingLeft=parseFloat(innerButton.css("padding-left"));
    var total=width+paddingLeft+paddingRight + 2;
    $this.selectmenu("option","width", total);
})

$（“选择”）。每个（函数（）{
var$this=$（this）；
$this.selectmenu（）；
var menu=$this.selectmenu（“menuWidget”）；
var按钮=$this.selectmenu（“小部件”）；
按钮。单击（）；
var=null；
菜单。子菜单（“li”）。每个（函数（）{
var$this=$（this）；
if（longest==null | | longest.text（）.length<$this.text（）.length）{
最长=$this；
}
});
css（“宽度”、“自动”）；
var width=最长的.mouseover（）.width（）；
按钮。单击（）；
var innerButton=button.find（“.ui selectmenu text”）；
var paddingRight=parseFloat（innerButton.css（“paddingRight”）；
var paddingLeft=parseFloat（innerButton.css（“paddingLeft”）；
var total=宽度+填充左+填充右+2；
$this.选择菜单（“选项”，“宽度”，总计）；
})

简而言之，它的作用是：

• 打开菜单，使其充满和布局
• 找到最长的元素
• 将菜单宽度设置为“自动”，将鼠标悬停在最长的元素上并获取其宽度
• 关闭菜单
• 获取按钮小部件的左右填充
• 将其添加到最长项目的计算宽度中，并将其用作宽度
  • 添加2个像素以获得良好的测量效果（我认为是边框或其他东西）

只是它在很大程度上依赖于jQueryUI内部的工作方式，所以它可能会在任何更新时中断

---

看这把小提琴：

哦，伙计。遗憾的是，我没有这个好主意。非常感谢您的快速帮助。我想到了类似的东西，但更喜欢直接操纵初始化。不管怎样，有时候我最好选择快速和“脏”的。谢谢。此选项的问题是它会将“选择”的宽度调整为当前选择的宽度。。因此，它会不断改变宽度，并通过使选项窗口的边缘与选择不匹配来稍微破坏UI。@Robert:我使用了Kinolis答案，但对with:使用了常量值，因此您可以只使用

$（“选择”）.selectmenu（{width:250}）例如.$（'select'）.selectmenu（{width:$（this.css（'width'））}）；未捕获类型错误：无法使用“in”运算符在未定义中搜索“display”。答案不正确，jQuery.attr（）函数用于元素属性，而不是css属性。不幸的是，没有简单的方法可以从css中获得百分比大小。寻找这个问题：想法：您可以创建函数来获取元素的相对宽度，并像这样定义宽度：宽度：函数（）{get_element_relative_width（this）}很好的解决方案！比其他人都好！我很高兴我找到了这个。