Question

好的，这就是我在做什么。根据一些下拉值，我将另一个下拉值。是否可以根据我现有的代码在某个特定区域显示该下拉列表。

        if (SelectedIndex == 2 || SelectedIndex == 5 || SelectedIndex == 7) {
            $("#DomContainer").remove();
            var MainContainer = document.createElement("Div");
            MainContainer.id = "DomContainer";
            $("body").append(MainContainer);                
            var Options = new Array();
            for(var i=1;i<=28;i++){
               Options.push(i);
            }
            AddDropDown(Options);
        }

    function AddDropDown(Options) {
        var selectHTML = "<label>Day:</label>&nbsp;";
        selectHTML += "<select>";
        for (i = 0; i < Options.length; i = i + 1) {
            selectHTML += "<option value='" + Options[i] + "'>" + Options[i] + "</option>";
        }
        selectHTML += "</select>";
        document.getElementById("DomContainer").innerHTML = selectHTML;
    }

For example <div id="new_drop">//Display the drop down here </div>

Answer 1

只需向AddDropDown添加第二个参数，即可传递要插入下拉列表的容器的ID：

function AddDropDown(Options, containerId) {
    ...
    document.getElementById(containerId).innerHTML = selectHTML;

然后这样称呼：

AddDropDown(Options, "new_drop");

（如果我理解正确的话）

Answer 2

无需从DOM中删除和追加元素，只需替换现有的元素内容......这里是简化版本。

// if "SelectedIndex" is one of the values in the array provided
if ($.inArray(SelectedIndex, [2,5,7])) {
        $("#DomContainer").html("<label>Day:</label>&nbsp;"+inject_dropdown(28));
}    

// Creates and returns a new drop-down based on the "length" provided
function inject_dropdown(length){
    var selectHTML = "<select>";
    for( i=1; i<=length; i++ ){
        selectHTML += "<option value='" + i + "'>" + i + "</option>"
    }
    selectHTML += "</select>"
    return selectHTML;
}

将$('#DomContainer')选择器替换为选择标识您想要显示新下拉列表的位置。

在特定区域显示我的下拉框

2 个答案: