JQuery的Ajax/getJSON问题选择相应地更改高度

我试图用JQuery的拉房间信息。 getJSON或。 ajax方法。JQuery的Ajax/getJSON问题选择相应地更改高度

它工作正常Opera和Firefox。在铬

问题出现和IE和选择其高度不改变元件的新的金额，显示我仅第一元件在选择框。

为了让我看到其余的部分，我可以在一个元素的高度内滚动，或者通过单击页面上的其他位置关闭选择，再次选择选项将显示正确的高度（让我们假设20个元素/选项）。

我认为它与时间或.html（）方法有关，因为问题在我填充我的“room_id”选择时出现。在ajax调用之后，DOM结构可能不会正确更新？

<select name="room_id" id="room_id" class="textbox"> 
<option value="..." capacity="...">Select a room from the list...</option> 
</select>

JQuery的（我试过的getJSON（）之前，同样的事情）。对不起，凌乱的压痕，这样做第一时间：秒

$(document).ready(function() 
{ 
... 
$('#room_id').click(function() { 
    fetchRooms(); 
}).change(); 
... 
function fetchRooms() { 
    $('#room_id').html('<option value="">Loading...</option>'); 
    $.ajax({ 
    url:'here is my link...', 
    dataType: "json", 
    async: false,        // tried with true before 
    success: function(data) 
     { 
    var $items=''; 
    var $is_selected = false; 

      // populating items if ajax returns data 
    for (var $i=0; $i < data.length; $i++) 
    { 
     var $selected = (data[$i]['room_id'] == '<?=$event->room_id;?>' ? 'selected="selected"':''); 
     if ($selected != '') { $is_selected = true; } 
     $items += '<option value="'+data[$i]['room_id']+'" '+$selected+' capacity="'+data[$i]['capacity']+'">'+data[$i]['room_name']+'</option>'; 
    } 


      if (data.length == 0) 
     $items = '<option value="">(No rooms are available)</option>'; 

      // populating select with items 
    $('#room_id').html($items); 

} 
}); ... } ...

编辑：由于ShankarSangoli建议我试着火的setTimeout，但它并没有帮助。

备注：在IE中它看起来如下：我点击选择，项目被选中，项目关闭的列表关闭。（就好像我选择了第一个选项，就是这样）。在Firefox和Opera中，它的外观看起来如何：我点击select，下拉菜单中的项目/选项会显示第一个由ajax预先突出显示的项目/选项。在Chrome中，这是我在上面描述的，下拉的高度是一个项目，第一个项目是预先选定的。

$('#room_id').click(function() { 
// 
setTimeout(function() { 
    fetchRooms(); 
}, 500); 

}).change();

我必须这样做的点击，而不是改变其他原因，就忽略这个问题，请：对

来源

2011-12-13 GogromaT

事实证明，浏览器不同地处理点击事件。我可以使用其他事件来处理这个问题，比如悬停，而不是点击。 – GogromaT

按我你的问题的理解，这里是我的解决方案。

选择更改后，经过一定的延迟后执行ajax调用，这会给关闭选择框的时间。当您选择更改后立即进行ajax呼叫时，它不会立即在IE浏览器中关闭。试试这个，它会正常工作。

$('select').change(function(){ 

    setTimeout(function(){ 
     //Do ajax call here 
    }, 200);//200 ms should be fine 
});

来源

2011-12-13 15:07:40 ShankarSangoli

JQuery的Ajax/getJSON问题选择相应地更改高度

回答

相关问题