Question

设置：

我有两个选择元素和一个按钮。

第一个选择元素（id =＆＃34; mySelect＆＃34;）填充了通过HTML添加的3个选项。另一个（id =＆＃34; lvlDropMenu＆＃34;）有20个选项，并使用for循环填充，这样如果我想更改长度，我就不必手动添加或删除新选项LvlDropMenu，我打算。

我想做什么：

单击＆＃34;开始按钮＆＃34;

使用纯javascript 我想根据所选＆＃34; mySelect＆＃34;的数据层修改LvlDropmenu中显示的选项。

例如：

当我选择对象1（它的数据层= T1）并点击开始按钮时，我想要＆＃34; lvlDropDown＆＃34;仅显示选项5-15。

问题：

理想情况下，我想使用类似于slice（）的方法来提取和显示选项，但据我所知，只能使用字符串。

考虑到这一点，它会更有效：

创建一个包含N个值的数组
创建一个for循环遍历数组并添加新选项，每个值/ innerHTML等于N ++（选项1，选项2等等）
根据所选对象的数据层创建一个if语句来slice（）/修改数组，以便依次修改for循环？

任何提示或可行的解决方案都会受到高度赞赏，因为我已经被踩了好几天。

＆＃13;

for (var i = 1; i <= 20;i++)
selectLvl.add(new Option(i));

var startBtn = document.getElementById("startBtn");
startBtn.addEventListener("click", start);

function start(){
var mySelect = document.getElementById("mySelect");

var selectedObjectTier = mySelect.options[mySelect.selectedIndex].getAttribute("data-tier");

if(selectedObjectTier == "T1")
{mySelect.length = 1}
//to make sure button/conditions work
//what I actually want is for the LvlDropMenu to display options 5-15
else{alert("Other")};;



};

＆＃13;

<select id="mySelect" size="4">
  <option value="Object 1" data-tier="T1">Object 1</option>
  <option value="Object 2" data-tier="T2">Object 2</option>
  <option value="Object 3" data-tier="T3">Object 3</option>
</select>


<form id="lvlDropMenu">
  <select name="selectLvl" id="selectLvl">
        <option>Choose your Level:</option>
    </select>
</form>

<button type="button" id="startBtn" class="menu" >Start</button>

＆＃13;

Answer 1

使用Array.slice(begin, end)选择您要使用的部分选项。

将这些选项传递到一个填充#LvlDropMenu的函数，例如populateMenu(optionArray)。

以下是一个例子：

使用Array.slice(begin, end) 选择您要使用的部分选项。

将这些选项传递给填充#LvlDropMenu的函数，例如 populateMenu(optionArray)。

以下是一个例子：

var allOptions = [];

for (var i = 1; i <= 20; i++) {
    selectLvl.add(new Option(i));
    allOptions.push(new Option(i));
}

var startBtn = document.getElementById("startBtn");
var menu = document.getElementById("lvlDropMenu ");

startBtn.addEventListener("click", start);

function start() {
    var mySelect = document.getElementById("mySelect");

    var selectedObjectTier = mySelect.options[mySelect.selectedIndex].getAttribute("data-tier");
    mySelect.length = 1;

    // check which tier is selected
    switch (selectedObjectTier) {
        // each case call `populateMenu()` with a subset of options
        case "T1":
            populateMenu(allOptions.slice(0, 5));
            break;

        case "T2":
            populateMenu(allOptions.slice(5, 10));
            break;

        case "T3":
            populateMenu(allOptions.slice(10, 19));
            break;

        default:
            alert("Other");
            break;
    }

};

function populateMenu(options) {
    // clear menu
    menu.innerHTML = "";

    // add the options, by looping through the array
    options.forEach(function(option) {
        var el = document.createElement("OPTION");
        el.value = option;
        el.innerHTML = option;
        menu.appendChild(el);
    });
}

Answer 2

使用特定选项插入<form>新的<select> 每次点击按钮。

为data-tier

设置预定义的开始和结束

var dataTiers = {
  T1: [5, 15],
  T2: [3, 13],
  T3: [1, 10]
}

总计

var button = document.getElementById("startBtn");
var dataTiers = {
  T1: [5, 15],
  T2: [3, 13],
  T3: [1, 10]
}

function insertSelectIntoForm(formId, selectId, arr) { // id === name, arr -> [start, end]
  var form = document.getElementById(formId),
    select = document.createElement("select"),
    choose = new Option(),
    text = document.createTextNode("Choose your Level: ");

  form.innerHTML = ""; // Clear form

  select.setAttribute("name", selectId);
  select.setAttribute("id", selectId);
  choose.appendChild(text);
  select.appendChild(choose);

  for (var i = arr[0]; i < (arr[1] + 1); i += 1) { // arr[0] === start, arr[1] === end
    var option = new Option(i);
    option.setAttribute("value", i); // Set value
    select.appendChild(option);
  }
  form.appendChild(select);
}

function start() {
  var select = document.getElementById("mySelect"),
    dataTier = select.options[select.selectedIndex].getAttribute("data-tier");
  insertSelectIntoForm("lvlDropMenu", "selectLvl", dataTiers[dataTier]);
}

insertSelectIntoForm("lvlDropMenu", "selectLvl", [1, 20]);
button.addEventListener("click", start);

<select id="mySelect" size="4">
  <option value="Object 1" data-tier="T1">Object 1</option>
  <option value="Object 2" data-tier="T2">Object 2</option>
  <option value="Object 3" data-tier="T3">Object 3</option>
</select>

<!-- Empty form, select will be created with JavaScript -->
<form id="lvlDropMenu"></form>

<button type="button" id="startBtn" class="menu">Start</button>

有没有什么方法可以编辑for循环？

2 个答案: