单击选择输入时DOM元素移动答案

【问题标题】：DOM element move when clicking on a select input单击选择输入时DOM元素移动
【发布时间】：2014-04-04 20:11:58
【问题描述】：

当我点击我的选择#ajouterEmplacement 时，它会导致奇怪的行为，他正在向左移动，或者他正上方的元素正在向左移动。

这是我的函数中显示从添加按钮中选择的代码。

function displayGestionEmplacement(){
$("#deletePicture").css('visibility','hidden');
$("#popupDetailMoteur").attr('currentElementDisplayedType','gestionEmplacements');

// si on est en mode edition on rajoute l'option d'ajout d'un stock
if(modeEdition == true){
    var spanAddEmplacment='<span style="display:inline-block;border:1px solid white;margin:15px;padding:10px;">Nouvel emplacement <img id="imgAddEmplacement" style="cursor:pointer;vertical-align:middle;width:25px;width:25px;"src="images/ajouter.png"></span>';
}
else{
    var spanAddEmplacment = '';
}

$("#popupDetailMoteur").html('<img id="fermerPopupGestionMoteurs" src="./images/fermer.png" style="cursor:pointer;position:absolute;top:-12px;right:-12px;">'
    +'<div id="bodyPopup" style="text-align:center;padding:15px;border:1px solid white;background-color:#B9B0A1;">'
        +'<div><p><big><b>Emplacements moteurs</b></big></p></div>'
        +'<div id="mainStock"><span style="display:inline-block;background-color:rgb(180,175,145);cursor:pointer;border:1px solid white;margin:10px;padding:10px;">Usine de Sierre ASI</span></div>'
        +'<div niveau="0"> </div>'
        +'<div niveau="1"> </div>'
        +'<div niveau="2"> </div>'
        +'<div niveau="3"> </div>'
        +'<div niveau="4"> </div>'
        +'<div niveau="5"> </div>'
        +'<div id="ajouterEmplacement">'+spanAddEmplacment+'</div>'
    +'</div>');

//on affiche la gestion les emplacements de base
$("#mainStock").click(function(){
    displayEmplacement(0,0);
});

$("#popupDetailMoteur").css('visibility','visible');
$("#fondPopup").css('background-color','black');
centerElement($("#popupDetailMoteur"));

//demande de fermeture de la gestion des emplacements
$("#fermerPopupGestionMoteurs").click(function(){
    $("#popupDetailMoteur").css('visibility','hidden');
    $("#fondPopup").css('background-color','');
});


//gestion demande d'ajout d'un emplacement
$("#imgAddEmplacement").click(function(){

    //on récupère la liste de tous les stocks de niveau 4 maximum
    var selectOptions ='<option value="x" disabled selected>Emplacement supérieur</option><option value="0">Usine Sierre ASI</option>';

    function createSelectAddStock(stockMaster,stockLevel){
        var spaces = '';
        for (var x=0; x<stockLevel*5;x++){
            spaces+='&nbsp;';
        }
        for(var y in emplacementsFull){
            if(emplacementsFull[y]['e_nom'] != ''){
                if(emplacementsFull[y]['e_master'] == stockMaster && stockLevel<5){
                    //on l'affiche
                    selectOptions +='<option value="'+emplacementsFull[y]['e_id']+'">'+spaces+emplacementsFull[y]['e_nom']+'</option>';

                    //et on affiche ses enfants
                    createSelectAddStock(emplacementsFull[y]['e_id'],stockLevel+1);
                }
            }
        }
    }
    createSelectAddStock(0,0);


    $('#ajouterEmplacement').html('<span style="display:inline-block;border:1px solid white;margin:15px;padding:10px;">'
    +'<span style="display:inline-block;"><select id="newEmplacementMaster">'+selectOptions+'</select></span><br/>'
    +'<span style="display:inline-block;"><input type="text" id="newEmplacementName"></span>'
    +'</span>');    
});

第一个视图

在打开选择之前

打开选择后

【问题讨论】：

如果您将一些 HTML 放入演示中可能会有所帮助：jsfiddle.net/DE49v
所有的 html 都是在我的 jquery 函数中生成的：S 你缺少的是 emplacementFull[] 数组。

标签： jquery select input

【解决方案1】：

在另一种情况下自己解决了。只需要设置一个 style="width:XXXpx;"

【讨论】：