从另一个脚本调用脚本

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;
}

这是我的问题出现的地方，我的下拉菜单会得到我想要的值，但是我选择该选项时想要显示的部分不会出现。

Answer 1

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

When the user commits the change explicitly (e.g. by selecting a value from a 's dropdown with a mouse click, by selecting a date from a date picker for , by selecting a file in the file picker for , etc.);

如果您使用 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 原始代码并更新了 fiddle。澄清和注释代码。

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;
}

从另一个脚本调用脚本

Call script from another script

javascript

function

call

html-select