Question

J'ai trois boîtes de sélection.

<div style='float: left; padding-right: 10px;'> 
    <select size="10" name="company_id"> 
     // a lot of options here 
    </select> 
</div> 

<div style='float: left; padding-right: 10px;'> 
    <select size="10" name="department_id" id="department_id"> 
     // a lot of options here 
    </select> 
</div> 

<div style='float: left; padding-right: 10px;'> 
    <select size="10" name="user_id[]" id="user_id" multiple> 
     // a lot of options here 
    </select> 
</div> 

Ils sont flottants l'un à côté de l'autre. Lorsque vous sélectionnez un élément dans le 1er, une requête ajax met à jour les valeurs du 2ème. Ce qui se passe dans Firefox et dans la plupart des autres navigateurs, c'est qu'il change de taille et repousse le 3ème. Mais dans IE (6.0 et 7) le 2ème change de taille mais ne repousse pas le 3ème.

Qu'est-ce que j'avais fait est de fixer la taille des boîtes, mais je veux résoudre ce problème, donc quelqu'un sait comment?

Voici le code JQuery que j'utilise pour ajouter les données aux services sélectionnés.

$.get("ajax/fetchDepartment.php?sec=departments&company_id="+company_id, 
    function(data){ 
     $("#department_id").html(data); 
}); 

data contient les « s nécessaires <option>Stuff</option>

EDIT pour ajouter: Les boîtes de sélection ont toujours une certaine valeur en leur sein.

est ici une image de ce qui se passe (je devais supprimer les éléments dans les boîtes via photoshop mais vous obtenez mon point)

selcet bug http://cznp.com/select_bug.jpg

Answer 1

IE et les options de sélection ont certaines «bizarreries» (certains, concernant les boîtes de sélection et innerHTML sont détaillées here) à leur sujet que je n'ai jamais vraiment compris, mais je peux au moins vous fournir une solution de contournement. L'astuce consiste à ajouter les options directement dans la boîte de sélection, et pas seulement de changer en entier le code HTML de l'élément select. Ainsi, les travaux suivants:

function changeval() { 

    var option = document.createElement("option"); 
    option.text = 'my long text value to change stuff'; 
    option.value = 'test'; 
    $('#department_id')[0].options.add(option); 
} 

Bien que cela ne compte pas:

function changeval() { 
    var data = '<option value="test">my long test string with wide stuff</option>'; 
    $("#department_id").html(data); 

} 

Vous pourriez trouver ce page utile -apparently il fixe par la retouche juste innerHTML, de sorte que pourrait être une option plus simple. Dépend de vous.

La solution du second lien ressemblerait à ceci:

function changeval() { 
    var data = '<option value="test">my long test string with wide stuff</option>'; 
    $("#department_id").html(data); 
    $("#department_id").parent()[0].innerHTML += ''; 
} 

Answer 2

essayez de mettre une option dans les sélections au démarrage. Je suppose que vous ne commencez à remplir les deuxième et troisième choix lorsque vous avez sélectionné quelque chose de la première.

J'ai eu des problèmes avec vides dans IE afin de sélectionner simplement mettre un

<option value="-1">-</option> 

dans le 2ème et troisième sélection pour commencer.