javascript - 根据另一个选定的下拉列表更改下拉列表中的选项值

标签 javascript html

我在更改下面代码中的选项值时遇到问题,选择哪些更改取决于其他选择,但我想更改选择 id =“numbList”的值,谢谢....

<!DOCTYPE html>
<html>
<body>   

<select id="diffList" onchange="changeList()"> 
  <option value="">-- Difficulty --</option> 
  <option value="1">Easy</option> 
  <option value="2">Medium</option> 
  <option value="3">Difficult</option> 
</select> 

<select id="numbList"></select> 

<script>
window.difficulty = {};
window.difficulty['1'] = [1,2,3];
window.difficulty['2'] = [4,5,6];
window.difficulty['3'] = [7,8,9];

function changeList() {
    var diffList = document.getElementById("diffList");
    var numbRange = document.getElementById("numbList");
    var selectDiff = diffList.options[diffList.selectedIndex].value;
    while(numbRange.options.length)
    {
        numbRange.remove(0);
    }
    var diff = window.difficulty[selectDiff];
    if(diff)
    {
        var i;
        for(i = 0; i < diff.length; i++)
        {
            var difficulty = new Option(diff[i], i);
            numbRange.options.add(difficulty);
        }
    }
}
</script>

</body>
</html>

最佳答案

只需使用 diff[i] 作为选项的文本和值:

...
for(i = 0; i < diff.length; i++)
{
    var value = diff[i];
    var difficulty = new Option(value, value);
    numbRange.options.add(difficulty);
}
...

当先前的值从选择选项中删除时,它会选择第一个新选项。所以你不需要设置 numbList 的值。

要以编程方式设置 numbList 的值,您只需执行 numbList.value = 1; 即可。

关于javascript - 根据另一个选定的下拉列表更改下拉列表中的选项值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37956410/

相关文章:

javascript - 单击时照片滑动关闭

javascript - 具有 CSS 类的 img 的 DataURL

javascript - JQuery 在 HTML 列表上动态使用鼠标悬停

html - 如何定位 Foundation Dropdown?

javascript - 如何在Javascript中设置排序后的默认值?

javascript - IE10 在页面上找到第一个按钮并在输入提交时触发点击事件

javascript - 渲染需要窗口对象的同构 React 组件

javascript - AngularJS数据推送

javascript - 鼠标悬停改变div

css - 如何配置 div 以调整大小以包含内部 div?