Question

以下是我目前的情况。我现在希望能够：当他们点击艺术家时，它会将他们带到另一个下拉菜单，其中有更多关于Artist One的选项。如果他们选择艺术家二等等，而不仅仅是提醒。

我该怎么做？谢谢:)）

<form>
    <select id="mySelect">
        <option value="void">Choose your answer</option>
        <option value="artistOne">One</option>
        <option value="artistTwo">Two</option>
        <option value="artistThree">Three</option>
    </select>
</form>

<button id="button" onclick="artist();" type="button">Confirm</button>

使用Javascript：

function artist() {

    var select = document.getElementById("mySelect");
    var artist = select.options[select.selectedIndex].value;

    if(artist == "artistOne"){
        alert("You have chosen Artist One!"); 
    }
    else if (artist == "artistTwo"){
        alert("You have chosen Artist Two!");
    }
}

Answer 1

function artist() {    
    var select = document.getElementById("mySelect");
    var artist = select.options[select.selectedIndex].value;
    var newSelectContainer = document.getElementById("artistDetails");

    if(artist == "artistOne"){
        createArtistSelect(newSelectContainer, ["Artist Detail 1", "Artist Detail 2", "Artist Detail 3"]);
    }
    else if (artist == "artistTwo"){
        createArtistSelect(newSelectContainer, ["Artist2 Detail 1", "Artist2 Detail 2"]);
    }
}  

function createArtistSelect(elem, options){
    //Create and append select list
    var dynamicSelect = document.getElementById("dynamicSelect");
    if(dynamicSelect)
      dynamicSelect.outerHTML = "";
    var selectList = document.createElement("select");
    selectList.id = "dynamicSelect";
    elem.appendChild(selectList);

    //Create and append the options
    for (var i = 0; i < options.length; i++) {
        var option = document.createElement("option");
        option.value = options[i];
        option.text = options[i];
        selectList.appendChild(option);
    }
}

如果您将javascript代码更改为此代码，则会生成一个包含已传递选项的下拉菜单。

你需要改变你的html：

<form>
    <div id="artistDetails">
    <select id="mySelect">
        <option value="void">Choose your answer</option>
        <option value="artistOne">One</option>
        <option value="artistTwo">Two</option>
        <option value="artistThree">Three</option>
    </select>
    </div>
</form>

<button id="button" onclick="artist();" type="button">Confirm</button>

Answer 2

我创建了一个在select的onChange上调用的函数（你可以将它改为onClick的输入）

var details1 = ["1-1", "1-2", "1-3"];
var details2 = ["2-1", "2-2", "2-3", "2-4"];
var details3 = ["3-1", "3-2"];


function CreateCmb(artist) {
    var cmbDetails = document.getElementById('cmbDetails');

    if (cmbDetails !== null) {
        while (cmbDetails.options.length > 0)
        cmbDetails.remove(0);
    } else {
        cmbDetails = document.createElement("select");
        cmbDetails.id = "cmbDetails";
        body.appendChild(cmbDetails);
    }

    var currentDetails = [];
    if (artist === "artistOne") currentDetails = details1;
    else if (artist === "artistTwo") currentDetails = details2;
    else if (artist === "artistThree") currentDetails = details3;

    for (var i = 0; i < currentDetails.length; i++) {
        var option = document.createElement("option");
        option.text = currentDetails[i];
        option.value = currentDetails[i];
        cmbDetails.appendChild(option);
    }

}

工作原理：

首先获取动态选择，然后检查他是否为null（已创建）。如果是这种情况，则删除所有选项。如果select为null（尚未创建），则创建它并将其放在正文中。

然后检查他需要显示的细节（if else if block）。

要完成，我将详细信息循环并创建新选项。

关于这一点的好处是你将始终只有一个动态选择，因为如果他已经存在，他会重复使用它！这允许您手动创建并将其放置在某个地方，如果他有正确的ID，他将使用它（在这种情况下＆＃39; cmbDetails＆＃39;）

See this FIDDLE for an example !

下拉菜单，指导（取决于答案）到下一个下拉菜单？

2 个答案: