动态显示保管箱 - Javascript/Jquery in html

Question

我正在尝试显示 3 个不同的下拉框，这些下拉框由 4 个不同的按钮触发。 #apple div 中应显示下拉框。 单击 Button B1 时 - 下拉包含 - 苹果、芒果、木瓜 单击按钮 B2 时 - 下拉包含 - B2A、B2B 单击按钮 B3 时 - 下拉包含 - B3A、B3B、B3C、B3D 单击按钮消失时，下拉菜单消失。这是我所做的->

var para = document.createElement("SELECT");

    var t1 = document.createElement("OPTION");
    var apple = document.createTextNode("apple");

    var t2 = document.createElement("OPTION");
    var orange = document.createTextNode("orange");

    var t3 = document.createElement("OPTION");
    var peach = document.createTextNode("peach");

     t1.appendChild(apple);
     t2.appendChild(orange);
     t3.appendChild(peach);

    para.appendChild(t1);
    para.appendChild(t2);
    para.appendChild(t3);
    document.body.appendChild(para);

我面临的问题-> 1）下拉框显示在区域外 #apple.
2) #apple div "[object HTMLSelectElement]"
中出现一些文字 3) 有更好的方法吗？
4) 我应该如何实现消失按钮？
这是完整的代码。 JsFiddle

谢谢！

Answer 1

最简单的解决方法

1 是使用 appendChild 将新元素追加到你的苹果 div.

function run(x){ if(x===1){ var answer = myFunction(); document.getElementById("apple").appendChild(answer); } }

2 [object HTMLSelectElement]

这出现是因为您试图将 Html 对象分配给 inner-html 属性 期望实际的 Html 文本代码。

谢谢， 查尔斯.

Answer 2

此代码将解决您关于 div 框中定位的问题，只需在您的 jsfiddle 中包含 jquery 库，否则它将无法工作

   $("#apple").prepend(para);

这是您的完整功能代码。那就打电话吧，

  function myFunction() {
    var para = document.createElement("SELECT");

    var t1 = document.createElement("OPTION");
    var apple = document.createTextNode("apple");

    var t2 = document.createElement("OPTION");
    var orange = document.createTextNode("orange");

    var t3 = document.createElement("OPTION");
    var peach = document.createTextNode("peach");

     t1.appendChild(apple);
     t2.appendChild(orange);
     t3.appendChild(peach);

    para.appendChild(t1);
    para.appendChild(t2);
    para.appendChild(t3);
    $('#apple').empty();
    $("#apple").prepend(para);

}

函数调用：

 function run(x){
        if(x===1){
         var answer = myFunction();

        }
    }