Question

我的页面使用Ajax使用数据库中的选项填充组合框。每次选项更改时，组合框的宽度也会更改以匹配最长选项的宽度。从演示的角度来看这很烦人，所以我想做以下几点：

首先，我在页面加载时使用jQuery查找有问题的组合框的宽度：

$(window).load(function(){
    var box_width = $('select#imgClass').width();           
});

但后来我被困住了。我尝试使用$('select#imgClass').css('width', box_width);来设置宽度，但这只设置组合框的当前迭代的宽度，而不是任何将来的版本。我考虑过使用.live()，但由于这需要一个事件处理程序，它也无法正常工作。

我的最后一招是使用.append()在页面的头部创建一个CSS规则，但是我想问你们所有人是否有更好的方法来做这个我不知道的事情？

谢谢。

Answer 1

当DOM准备就绪时，您可以获得组件的宽度。然后你可以使用它来更新组合框，无论动态发生什么：

    $.ready(function() {

        // set up closure scope
        var fixedWidth = $('select#imgClass').width();

        // set up 'change' event handler to update the width using fixed width
        $('select#imgClass').live('change', function () {
            $(this).width(fixedWidth);
        ));

    });

更新

您提到您正在进行AJAX调用以响应组合框的change事件，这将导致我的原始解决方案出现问题。但是，您可以将对象放在全局空间中，成为一个优秀的Web公民，可以拥有“固定”几何值。然后你的ajax调用可以访问这个值，如下所示：

    $.ready(function() {

        // set up global object to hold your fixed geometries
        MyGeometryValues = {};
        MyGeometryValues.imgClassSelect = $('select#imgClass').width();

    });

    $.get('/path/to/my/url', function(data) {  // success handler of AJAX call

        // do all of your other processing first

        // then, do this last
        $('select#imgClass').width(MyGeometryValues.imgClassSelect);

    )};

Answer 2

我认为唯一的方法是在每次更改html run函数之后迭代所有元素并设置css。像somtething：

function SetWidth(value) {
   $('.elements input').each({
   $(this).width(value);
});
}

Answer 3

虽然Taras Neporozhniy的回答可能确实有效，但我觉得以下内容最简单，并且每个Ajax请求都允许使用更少的代码。

以下代码适用于三个组合框，而原始问题仅为简单起见，仅提及一个组合框。我使用连接来使代码更具可读性。哦，虽然我不确定为什么，但以下只包含在$(window).load()中。 $(document).ready()无效，我怀疑这是因为组合框是通过ajax加载的。

$(window).load(function(){
    var family_width = $('select#imgFamily').width(),
        class_width = $('select#imgClass').width(),
        gender_width = $('select#imgGender').width();   
    $('head').append('<style type="text/css">'+
                        ' select#imgFamily {width: '+ family_width +'px}'+
                        ' select#imgClass {width: '+ class_width +'px}'+
                        ' select#imgGender {width: '+ gender_width +'px}'+
                        '</style>');
});

感谢那些试图提供帮助的人。

Answer 4

请阅读Launching Code on Document Ready 。

$(window).load(....);

你认为它有什么完全不同。

http://api.jquery.com/load/

使用jQuery来设置动态加载的元素的样式

4 个答案: