Question

我第一次尝试使用JavaScript。我得到了一个下拉列表来做我想做的事感谢这个论坛的帮助：

$('select').change(function(){
    const options = $("option");
    let selectedOption = "";
    let directDisplayString = "";
    options.each(function(index){
        let option = options[index];
        if($(option).prop("selected")) {
            selectedOption = $(option).val();
        };
        if(selectedOption === "450 Litre") {
            directDisplayString = '450 Litre Direct Storage Vessel with:';
        };
        if(selectedOption === "550 Litre") {
            directDisplayString = '550 Litre Direct Storage Vessel with:';
        };
        if(selectedOption === "900 Litre") {
            directDisplayString = '900 Litre Direct Storage Vessel with:';
        };
    });
    $("#directChoiceDisplay").empty().append(directDisplayString);
});

现在，我在我网站上的多个网页上都有下拉列表。我想为每个页面做类似的事情。当我在我的JavaScript文件中添加了更多脚本时，第二位代码似乎无法执行：

$('select').change(function(){
    const options2 = $("option");
    let selectedOption2 = "";
    let stainlessDisplayString = "";
    options2.each(function(index){
        let option2 = options2[index];
        if($(option2).prop("selected")) {
            selectedOption2 = $(option2).val();
        };
        if(selectedOption2 === "3 kW 385 mm") {
            stainlessDisplayString = '3 kW 385mm immersed 2 1/4 BSP 1/3 Phase 240/415v';
        };
        if(selectedOption2 === "6 kW 385 mm") {
            stainlessDisplayString = '6 kW 385mm immersed 2 1/4 BSP 1/3 Phase 240/415v';
        };
        if(selectedOption2 === "9 kW 410 mm") {
            stainlessDisplayString = '9 kW 410mm immersed 2 1/4 BSP 1/3 Phase 240/415v';
        };
        if(selectedOption2 === "12 kW 585 mm") {
            stainlessDisplayString = '12 kW 585mm immersed 2 1/4 BSP 3 Phase 415v';
        };
    });
    $("#stainlessChoiceDisplay").empty().append(stainlessDisplayString);
});

我猜我的问题在不同的下拉列表的名称或类似的东西是模棱两可的。我试图用名字来解决它，但无济于事。

非常感谢任何帮助。

无效网页的测试版本为here。

（IS工作的页面版本为here）。

Answer 1

首先，正如评论中所建议的那样，您应该在注册这些事件处理程序之前等待文档加载。由于您使用的是jQuery，因此可以使用简单的方法完成：

$(document).ready(function(){
  //Put your code here
});

其次，这部分代码可能存在问题：

const options2 = $("option");

因为它不仅会选择您正在更改的选项中的选项，而且还会选择您在页面中可能遇到的任何选项元素（例如，如果您有多个选择元素，它将选择每个元素的选项），更好的想法可能是这样的：

$('select').change(function(){
    var options = $(this).children('option');
    //rest of the code
});

这将仅选择属于您正在更改的选项的选项。

此外，不要使用类似的东西：

options2.each(function(index){
    let option2 = options2[index];
    if($(option2).prop("selected")) {
    ...
});

使用.each()回调函数的第二个参数（该函数获取两个参数当前项目索引和当前项目）：

options2.each(function(index, elem){
    if (elem.prop('selected')) {
    ...
});

最后，由于您只是为了获得所选值而获得选项，因此您可以在select iself上使用.val()：

$('select').change(function(){
    $(this).val(); //this contains the current selected option value
});

@Edit：由于您添加了指向该网站的链接，因此代码的问题还在于多个$('select').change()定义，因为这意味着每页{strong>每个<{1}}元素更改每个这些处理程序将运行。你应该做的是，例如，为每个选择添加一个唯一的ID，然后你的代码应如下所示：

select

更改下拉选项时JavaScript未执行

1 个答案: