Question

我编写了一些代码，将每个数字放在一个数组中（依赖于for循环）并为它们分配一个HTML选项标记，然后将它们插入到一个选择列表中。结果是一个下拉菜单，范围为＆＃34; 1＆＃34;到＆＃34; 100。

我的问题是我想从我创建的下拉菜单中选择一个号码，这样我就可以存储和/或显示它的价值，但不知道如何。

例如：假设我有一个等式X * 2.我希望能够从下拉列表中选择一个数字并使X等于该值（我从菜单中选择3，结果应为6）。

任何帮助将不胜感激。

HTML

<p>
    <select id="selectLvl">
        <option>Choose your Level:</option>   
    </select>
</p>

的JavaScript

var lvlStart = 1;
var lvlEnd = 101;
var arr = [];

while (lvlStart < lvlEnd) {
    arr.push(lvlStart++)
}

var selectLvl = document.getElementById("selectLvl");
for (var i = 0; i <arr.length; i++) {
    var opt = arr[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    selectLvl.appendChild(el);        
}

Answer 1

onchange事件应该可以解决问题。

var lvlStart = 1;
var lvlEnd = 101;
var arr = [];

while (lvlStart < lvlEnd) {
    arr.push(lvlStart++)
}

var selectLvl = document.getElementById("selectLvl");
for (var i = 0; i <arr.length; i++) {
    var opt = arr[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    selectLvl.appendChild(el);

}

selectLvl.addEventListener('change',function(){
  // Get the selected value
  var selectedLevel = this.value;
  
  // if (selectedLevel * 2) returns NaN (Not a Number), output will be 0
  var output = (selectedLevel * 2) || 0;
  
  // alert the output
  alert(output);
});

<select id="selectLvl">
  <option>Choose your level:</option>
</select>

Answer 2

.value属性可用于获取当前选定的值：

for (var i = 1; i <= 100;)
  selectLvl.add(new Option(i++))

selectLvl.onchange = function() { console.log(selectLvl.value * 2) }

<select id=selectLvl>
  <option>Choose your Level:</option>
</select>

Answer 3

通过 ID 访问<select>。
浏览for循环并在其中创建选项。
使用setAttribute()为每个选项设置值。
将其附加到<select>。

事件

将change个事件添加到<select>。
使用
获取选中值
el.options[el.selectedIndex].value
将此值作为参数放在自定义函数中，此处为double()。
将此值存储在包含push()。

示例（选择一些数字以查看其工作原理）

＆＃13;
＆＃13;
var level = document.getElementById("level"), storage = []; function double(n) { return n * 2; } for (i = 1; i < 101; i += 1) { var option = document.createElement("option"); option.setAttribute("value", i); option.innerHTML = i; // Or textContent level.appendChild(option); } level.addEventListener("change", function() { // Add change event var value = this.options[this.selectedIndex].value; alert(double(value)); storage.push(double(value)); alert(storage); });
＆＃13;
<select id="level"> <option>Choose your Level:</option> </select>
＆＃13;
＆＃13;
＆＃13;

Answer 4

您可以使用jQuery将其缩短如下;

var lvlStart = 1;
var lvlEnd = 101;
var selectLvl = document.getElementById("selectLvl");

for (var i=lvlStart ; i<= lvlEnd ; i++){
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    selectLvl.appendChild(el);
}

使用JQuery处理更改事件

$('#selectLvl').change(function(){
    var x=this.value;
    var answer=Number(x)*2;
    alert('Answer= '+ answer);
});

试图从aray的下拉列表中提取值

4 个答案: