Question

$(function() {
    $("#confRoomID").combobox();
});

其中confRoomID是struts html select标记的样式ID。下拉在IE中显示得很好但是在Chrome中失败了。我不知道为什么？如果有人知道为什么会这样发生，请告诉我？

我可以在chrome中看到组合框，但是一旦我点击它，页面就会自动重新加载，下拉显示的时间只有几分之一秒，它就会消失，再次显示带有组合框的原始页面。

我认为以下代码可能有助于回答这个问题。

.ui-autocomplete-associatesearch { height: 300px; overflow-y: scroll; overflow-x: hidden;width: 250px;}

.ui-slider { position: absolute; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default;background-color: #F0F0F0; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }

.ui-state-default
{
border: 1px solid #d8dcdf;
font-weight: bold;
color: #004276;
background-image: url(../../images/menu_down.gif);
margin-bottom: -.3em;}.ui-slider-handle{background-image: url();}

.....

$(function() {
$("#confRoomID").combobox();

$("#slider").css("background","#8F8B8B");         
$("#slider" ).slider({
    value:800,
    min: 0,
    max: 4000,
    step: 200,
    slide: function( event, ui ) {
        $('#floor_image').mapster('resize', ui.value, 0, 1000);
    }
});

var areas = [];
$('area').each(function() {
    var data,area = $(this),
        fillColor = area.data('fillColor'),
        stroke= area.data('stroke');
    if (fillColor || stroke) {
        data = {
            key: area.attr('confroomid'),
            staticState: true
        };
        if (fillColor) {
            data.fillColor = fillColor;
        }
        if (stroke) {
            data.stroke = stroke;   
        }
        areas.push(data);
    }
});
$('#floor_image').mapster({
    singleSelect: true,
    fillOpacity: 0.5,
    fadeInterval: 50,
    mapKey: 'confroomid',
    areas: areas
});


$('#floor_image').mapster('resize', 200, 0, 1000);
});

function process()
{   
if(document.forms[0].confRoomID.value <= 0) {
    alert('Please select Conference Room');
    return false;
}
document.forms[0].param.value = 'locateConfRoom';
document.forms[0].submit();
}

html代码

<div id="container" style="padding:10px;">

<div id="map_demo">
                                              <img id="floor_image" 
                                        src="${pageContext.request.contextPath}/portLayoutAction.do?param=getFloorMap&floorMapURL=${confRoomBean.floorMapUrl}" 
                                        usemap="#floor" style="width: 4000px;">
</div>
</div>

我的代码在IE中运行良好但在chrome中失败

0 个答案: