< sélectionnez > largeur dans IE ne se comporte pas comme dans d'autres navigateurs

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 flottés les uns à côté des autres. Lorsque vous sélectionnez un élément dans le premier élément, une requête ajax met à jour les valeurs du deuxième.

Ce qui se passe dans Firefox et dans la plupart des autres navigateurs, c’est que la taille de celui-ci change et que celui-ci change de taille. Mais dans IE (6.0 et 7), le deuxième change de taille mais il ne repousse pas le troisième.

Ce que j’ai fait, c’est de fixer la taille des boîtes mais je veux corriger cela correctement, afin que tout le monde sache comment faire?

Voici le code JQuery que j'utilise pour ajouter les données à la sélection de départements.

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

data contient le < option > Stuff < / option > nécessaire

EDIT to add: Les cases de sélection ont toujours une valeur en elles.

Voici une photo de ce qui se passe (je devais supprimer les éléments contenus dans les boîtes via Photoshop mais vous comprenez mon point)

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

Answer 1

IE et les options de sélection ont certaines "particularités" (certaines, en ce qui concerne les zones de sélection et innerHTML, sont détaillées ici. ) à propos d'eux que je n'ai jamais vraiment compris, mais je peux au moins vous fournir une solution de contournement. L'astuce consiste à ajouter les options explicitement à la zone de sélection, pas seulement à modifier l'intégralité du code HTML de l'élément sélectionné. Donc, 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 se produise pas:

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

}

Vous pouvez trouver cette page utile corrigé en retouchant simplement le innerHTML, ce qui pourrait être une option plus simple. À vous.

La solution du deuxième lien ressemblerait à:

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ébut. Je suppose que vous commencez seulement à remplir les deuxième et troisième sélections lorsque vous avez sélectionné quelque chose parmi les premières.

J'ai eu des problèmes avec les sélections vides dans IE, il suffit donc de mettre un

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

dans la deuxième et troisième sélection pour commencer avec.