Question

众所周知IE8将有固定宽度下拉框，即使文本内容大于下拉框的实际宽度。为此我们也修复了。它正在为我工作一个下拉框。在这种情况下，它适用于wicket：id =“Area”选择框。但是对于其余的框（项目和代码框），它不起作用。实际上，这里的项目和代码框中的内容只有在选择区域（有ajax调用）中的项目后才会加载。我在这里给出了代码示例。

<div class="fieldsColumn" wicket:id="Container">
    <div class="Container">
        <select class="ie8DropdownFix" wicket:id="Area" style="width:12em"></select>--->look here</div>
    <div class="fieldContainer">
        <select class="ie8DropdownFix" wicket:id="Item" style="width:12em"></select>---->look here</div>
    <div class="fieldContainer">
        <select class="ie8DropdownFix" wicket:id="Code" style="width:12em"></select>---->look here</div>
</div>

我一直在使用我在搜索后获得的以下修复

$(".ie8DropdownFix").each(function () {
    el = $(this);

    el.data("origWidth", el.outerWidth()); // IE 8 can haz padding
}).click(function () {

    $(this).css("width", "auto");
})
    .bind("blur change", function () {
    el = $(this);
    alert($(this).val() + "in blur");
    el.css("width", el.data("origWidth"));
});

请帮助找出问题

Answer 1

在将事件链相互添加之后，它起作用了：以下是帮助某些人的代码。

$(document).ready(function(){   

var el;

$(".ie8DropdownFix").each(function() {
el = $(this);
el.data("origWidth", el.outerWidth()) ;// IE 8 can haz padding
}).click(function(){

$(this).css("width", "auto");
})
.bind("blur change ", function(){
el = $(this);
el.css("width", el.data("origWidth"));
var el2;
$(".ie8DropdownFix").each(function(){
el2 = $(this);      
el2.data("origWidth", el2.outerWidth());  
}).click(function(){
 $(this).css("width", "auto");
}).bind("blur change ", function(){
el2= $(this);               
el2.css("width", el2.data("origWidth"));
var el3;
$(".ie8DropdownFix").each(function(){
el3 = $(this);      
el3.data("origWidth", el3.outerWidth());  
}).click(function(){
$(this).css("width", "auto");
}).bind("blur change", function(){
el3= $(this);    
el3.css("width", el3.data("origWidth"));       
});      });    });    });

IE8修复了多个下拉框的下拉列表问题

1 个答案: