Question

我有一个表单元素在更改前一个select时加载了ajax调用。 Ajax调用工作正常，我终于得到它不打破样式。我只能让它变得比只有1个选项更大。

我的JS：

    jQuery(document).ready(function(){
     jQuery("#ajaxLoader").hide();
     jQuery("#field1").change(function(){            
        var optionValue = jQuery("#field1").val();      
        jQuery.ajax({
            type: "POST",
            url: "<?=$myURL?>",
            data: ({key: optionValue, status: 1}),
            beforeSend: function(){ jQuery("#ajaxLoader").show(); },
            complete: function(){ jQuery("#ajaxLoader").hide(); },
            success: function(response){
                jQuery("#field2").html(response);
                jQuery("#field2").show();
            }
        });
    });
});

我还上传了截屏http://coolyar.net/?di=513133334819

编辑：我的Global.js选择功能

   $('select').each(function(){
        var select = this;

        //I think this is the issue here. I don't know how to override the size
          attribute.

        $(this).attr('size',$(this).find('option').length+1).wrap('<span class="ui-select" />')
            .before('<span class="ui-select-value" />')
            .bind('change, click', function(){
                $(this).hide().prev().html($(this).find('option:selected').text());
            })
            .after('<a class="ui-select-button button button-gray"><span></span></a>')
            .next().click(function(){
                if ($(select).toggle().is(':visible')) {
                    $(select).focus();
                }
                return false;
            })
            .prev().prev().html($(this).find('option:selected').text())
            .click(function(){
                if ($(select).toggle().is(':visible')) {
                    $(select).focus();
                }
                return false;
            });
        $(this).blur(function(){ $(this).hide(); }).parent().disableSelection();
    });

Answer 1

   $('select').each(function(){
        var select = this;
        var selectSize = $(this).attr('size');
        if ($(this).attr('size') == 0){
            var selectSize = $(this).find('option').length+1;
            console.log(selectSize); 
        }

        $(this).attr('size', selectSize).wrap('<span class="ui-select" />')
            .before('<span class="ui-select-value" />')
            .bind('change, click', function(){
                $(this).hide().prev().html($(this).find('option:selected').text());
            })
            .after('<a class="ui-select-button button button-gray"><span></span></a>')
            .next().click(function(){
                if ($(select).toggle().is(':visible')) {
                    $(select).focus();
                }
                return false;
            })
            .prev().prev().html($(this).find('option:selected').text())
            .click(function(){
                if ($(select).toggle().is(':visible')) {
                    $(select).focus();
                }
                return false;
            });
        $(this).blur(function(){ $(this).hide(); }).parent().disableSelection();
    });

如果html标记包含size属性，则Jquery UI选择表单字段覆盖大小属性。

1 个答案: