<option> 元素没有附加在他的 <select> parents 中而是在下面

Question

我的JavaScript有点问题。
我正在尝试将 <option> 附加到 <select> parent。但不是将其插入：

<select>
 <option></option>
</select>

实际上我得到了这个结果：

<select></select>
<option></option>

在访问了很多链接（很多关于 jQuery 我没有使用的，我可能应该了解一下）之后，我仍然不明白我的错误。

这是我的代码：
HTML代码

<form class="formulaireAjout"  action="/www/libs/ajoutStageExistant-php.php" method="post">
    <h1>Si on peut se faciliter la tache ...</h1>
    <p id="ref_entreprise">
        <label for="ref_entrepriseSelect">L'entreprise est déja referencée ? </label>
        <select id="ref_entrepriseSelect" onchange="request(this);">
            <option value="none"></option>
            <option value="oui">Oui</option>
            <option value="non">Non</option>
        </select>
        <span id="loader" style="display: none;">
            <img style="width:20px" src="/www/images/loader.gif" alt="loading">
        </span>
    </p>

    <p id="entreprises">
        <select id="entrepriseSelect" name="entrepriseSelect" onchange="requestMission(this);"></select>
    </p>

    <p id="mission" style="display: none;">
        <select id="missionSelect" name="missionSelect" onchange="requestAjoutMission(this);"></select>
        <span id="loaderMission" style="display: none;">
            <img style="width:20px" src="/www/images/loader.gif" alt="loading">
        </span>
    </p>

     <p id="filiere" style="display:none">Filière
        <label for="filiere"></label>
        <select name="filiere" id="filiere">
            <option>Choisissez une Filière</option>
        </select>
    </p>

    <p id="specialite" style="display:none">Spécialité
        <label for="specialite"></label>
        <select name="specialite" id="specialite">
            <option class="" value="-">-</option>
        </select> 
    </p>
</form>

javascript

//List to add in select "filiere"
var filieres = [ 
{
    code:"ETI",
    nom: "Sciences du numérique"
},
{
    code: "CGP",
    nom: "Chimie Génie des Procédés"
},
{
    code: "IRC",
    nom: "Informatique et réseaux de communication"
}
];



function requestAjoutMission(oSelect)
{
var value = oSelect.options[oSelect.selectedIndex].value; //Le     num_mission qui est la value dans le seclet
var filiereSelect = document.getElementById("filiere");
var majeureElt = document.getElementById("specialite");


if(value === "0")
{
    filiereSelect.style.display = "block";
    majeureElt.style.display = "block";
    document.getElementById("stage").style.display = "block";
    document.getElementById("duree").style.display = "block";
    document.getElementById("description").style.display = "block";
    document.getElementById("loaderMission").style.display = "none";

    //Fill the select with options 
    filieres.forEach(function (filiere) {
            filiereSelect.appendChild(creerEltOption(filiere.nom,filiere.code));
    });

    filiereSelect.addEventListener("change", function(e) {
        var majeures = getMajeures(e.target.value);
        majeureElt.innerHTML=""; //Vidage de la liste
        //Ajout de chaque majeure à la liste
        majeures.forEach(function (majeure){
            majeureElt.appendChild(creerEltOption(majeure,majeure));
        });
    });
}
}
//Return list for the select majeure function to the option selected      in the previous select
function getMajeures(filiere){

switch(filiere){
    case "ETI" : 
        return ["Image", "Electronique", "Robotique", "Réseau", "Informatique"];
    case "CGP":
        return ["Maj1", "Maj2"];
    case "IRC": 
        return ["pas de majeurs"];
    default: 
        return [];
}
} 


//Create Option element in HTML 
function creerEltOption(texte, valeur){
    var element = document.createElement("option");
    element.value = valeur;
    var oInner = document.createTextNode(texte);
    element.appendChild(oInner);

    return element;
}

对于所有这些代码，我们深表歉意，但由于我不知道错误来自何处，所以我认为最好向您展示更多内容。

我还在网页和firefox的firebug中加入了当前结果的图片：

Visual resutl on the web page : option are not in the select input

HTML Result in the web page

Answer 1

你的问题，你有两个具有相同 id 的元素。

<p id="specialite" style="display:none">Spécialité
<select name="specialite" id="specialite">

id 是单数的，您有多个具有相同 id 的元素。

因此您使用的浏览器正在 selecting p 并将元素附加到那里。您有其他 select 的命名模式，您应该为最后两个命名模式。

您还用

清空了 select 的 html

majeureElt.innerHTML=""

更好的方法是将长度设置为零或在 while 循环中调用 removeChild()。

majeureElt.options.length=0;

我个人会添加这样的选项，但附加它们也可以。

majeures.forEach(function (majeure, index){
    majeureElt.options[index] = new Option(majeure,majeure);
});

<option> 元素没有附加在他的 <select> parents 中而是在下面

<option> element is not append in his <select> parents but just below

html

javascript

append

appendchild

web-development-server