Question

在HTML5中，我有一个下拉菜单。选择不同的选项时，我会隐藏或显示页面的不同部分。这是脚本：

document
    .getElementById('target')
    .addEventListener('change', function () {
        'use strict';
        var vis = document.querySelector('.vis'),   
            target = document.getElementById(this.value);
        if (vis !== null) {
            vis.className = 'inv';
        }
        if (target !== null ) {
            target.className = 'vis';
        }
});

但是我现在要做的是，在另一个脚本中是从下拉列表预加载一个选项。我可以使用这个脚本轻松完成：

setSelectedIndex(document.getElementById('target'),'content_1');
function setSelectedIndex(s, valsearch)
    {
    // Loop through all the items in drop down list
    for (i = 0; i< s.options.length; i++)
    { 
    if (s.options[i].value == valsearch)
        {
        // Item is found. Set its property and exit
        s.options[i].selected = true;
        break;
        }
    }
    return;
}

这就是我的问题出现的地方，我的dropdow将获得我想要的值，但是在选择该选项时我想要显示的部分将不会出现。

Answer 1

这是因为更改事件需要从浏览器发生。

当用户明确提交更改时（例如，通过选择值）通过选择日期，通过鼠标单击下拉菜单从日期选择器中选择一个文件文件选择器，等等）;

如果你使用Jquery，你可以：

$("#id").val("value").trigger('change');

或者如果您不担心构建事件对象，则可以使用javascript：

if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    element.dispatchEvent(evt);
}
else
    element.fireEvent("onchange");

Answer 2

我建议您将匿名onchange函数移动到命名函数中，您可以调用onload一次，再调用onchange。

这是我写的函数：

function setContent(id) {
  //get the current visible content
   var vis = document.querySelector('.vis');
  //get the target element by id
   var target = document.getElementById(id);
  //make current vis element inv
   if (vis) vis.className = "inv";
  //make target element vis
   if (target) target.className = 'vis';
}

和fiddle

已编辑：摆脱querySelectorAll更接近OP原始代码并更新了小提琴。澄清并评论了代码。

Answer 3

您遇到的问题是更改谷值或使用JavaScript输入的选定值不会触发任何更改事件。所以你需要手动触发事件。

function setSelectedIndex(s, valsearch)
    {
    // Loop through all the items in drop down list
    for (i = 0; i< s.options.length; i++)
    { 
    if (s.options[i].value == valsearch)
        {
        // Item is found. Set its property and exit
        s.options[i].selected = true;
        break;
        }
    }
    //Setting the selected value with JavaScript does not trigger the change event so you need to manually trigger the change event
    if ("createEvent" in document) {
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("change", false, true);
        s.dispatchEvent(evt);
    } else {
        s.fireEvent("onchange");
    }
    return;
}

从另一个脚本调用脚本

3 个答案: