从DropDownList选择选项时激活功能 [英] Activating a function on selecting an option from a DropDownList

问题描述

我设计了一种自动完成功能，当一个人在文本框中输入至少3个字母时，它将遍历火车站的几个数据库之一，以查找所有具有这三个(或更多)可能的火车站字母.

该功能运行完美，打开网页时，自动完成列表会列出正确的电台.

但是，用于生成自动完成建议的数据库的选择取决于用户在页面上的下拉列表中的输入.

当前使用的数据库基于页面加载时选择的选项(因此是顶部选项)，随着用户输入的更改，我似乎无法改变它.

这是代码的问题部分:

$(function () {

    for(i=0;i<30;i++){
        $("#_Q6_Q" + i + "_Q3_C").change(function(){
            transportChange($("#_Q6_Q" + i +"_Q3_C").val(), i)
        });
    };
}

这是transportChange函数如何使用参数的粗略示例:

function transportChange(lst, i) {
    /* lst = input into Mode of Transport question.
       i correlates to the row number - these are auto generated when
       the respondent changes their answer.
    */

    //Blank auto complete box
    //Use for loops to generate numbers correlating to input boxes
    for(var q=5; q<7; q++){
        for(var u=0; u<3; u++){
            $("#_Q6_Q".concat(String(i),"_Q", String(q), "_Q0_Q", String(u))).val('');
        };
    };

    // disable drop down and auto complete boxes whilst loading data;
    $("#_Q6_Q".concat(String(i),"_Q4_Q0_Q0")).prop('disabled', true);
}

我可以告诉您'lst'参数被连接到一个链接中，该链接然后定义了将使用哪个数据库.

自动完成功能来自JQuery.

解决方案

忽略第一个for循环(技术上将i置于全局范围内)中缺少的var ，并且您正在对 30 的更改事件应用回调函数这一事实，请选择框(是否正确?！) ...

问题似乎(至少在第一部分中)是回调共享相同的执行范围.这意味着在所有函数中，i始终等于分配的最后一个值(30).

比我在这里可以做的更好地解释了此行为: 如何Javascript闭包有效吗?

所以...您能否按如下所示更新您的第一个代码块:

$(function(){

    for(var i=0; i<30; i++){
        $("#_Q6_Q"+ i +"_Q3_C").change(callbackFactory(i));
    }

    function callbackFactory(i){
        return function(){
            transportChange($("#_Q6_Q"+ i +"_Q3_C").val(), i);
        };
    }
    // ...
});

这将确保生成的每个函数都封装在其自己的作用域中(并且i将是您认为的那样)-这是我到目前为止发现的唯一逻辑缺陷，如果它不起作用，那么我们需要更多信息.

I have designed an auto-complete function which, when a person inputs at least 3 letters into a textbox, will run through one of several databases of train stations to find all of the possible stations which have those three (or more) letters.

The function works perfectly and on opening the webpage the auto-complete list does come up with the correct stations.

However the choice of database used to generate the auto-complete suggestions is based on the users input into a droplist on the page.

At the moment the database used is based on the option selected when the page loads (so the top option) and I can't seem to get this to change as the users input changes.

Here is the problem section of the code:

$(function () {

    for(i=0;i<30;i++){
        $("#_Q6_Q" + i + "_Q3_C").change(function(){
            transportChange($("#_Q6_Q" + i +"_Q3_C").val(), i)
        });
    };
}

and here is a rough example of how the transportChange function uses the arguments:

function transportChange(lst, i) {
    /* lst = input into Mode of Transport question.
       i correlates to the row number - these are auto generated when
       the respondent changes their answer.
    */

    //Blank auto complete box
    //Use for loops to generate numbers correlating to input boxes
    for(var q=5; q<7; q++){
        for(var u=0; u<3; u++){
            $("#_Q6_Q".concat(String(i),"_Q", String(q), "_Q0_Q", String(u))).val('');
        };
    };

    // disable drop down and auto complete boxes whilst loading data;
    $("#_Q6_Q".concat(String(i),"_Q4_Q0_Q0")).prop('disabled', true);
}

I can tell you the 'lst' argument is concatenated into a link which then defines which database will be used.

The auto-complete function is from JQuery.

解决方案

Ignoring the missing var in the first for-loop (which technically puts i in the global scope), and the fact that you are applying a callback function to the change event on 30 select boxes (is that correct?!)...

It looks as though the issue - with the first part at least - is that the callbacks are sharing the same execution scope. This means that in all the function i will always equal the last value assigned (30).

This behaviour is far better explained than I can do here: How do Javascript closures work?

So... can you please update your first code-block as follows:

$(function(){

    for(var i=0; i<30; i++){
        $("#_Q6_Q"+ i +"_Q3_C").change(callbackFactory(i));
    }

    function callbackFactory(i){
        return function(){
            transportChange($("#_Q6_Q"+ i +"_Q3_C").val(), i);
        };
    }
    // ...
});

This will ensure every function generated is encapsulated in it's own scope (and i will be what you think it is) - This is the only logical flaw I've spotted so far, if it doesn't work then we need more info.

这篇关于从DropDownList选择选项时激活功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！