如何使用jQuery函数作为.ready()和.change()

时间:2013-03-13 16:17:26

标签: javascript jquery html

需要能够使用javascript和其他一些输入源更改SELECT语句(例如:下拉框)。我花了一些时间在removeOpt()下面的代码中。但是,我无法将其作为一个函数运行并让.ready()调用它并在dropdown1更改时运行。

还需要函数保留变量的内存,特别是all_Opt变量,因为我需要能够重新填充其中的内容。我发布了我在下面尝试过的内容。 removeOpt变量/函数直接在.ready()中使用时可以正常工作,但在放入函数时似乎不能正常工作,而.change()则完全没有。


简而言之,这就是我正在尝试做的事情并需要帮助:

  • 弄清楚函数removeOpt是否有效,或找到有效的方法
  • removeOpt.ready()同时dropdown1运行{使用.change()?)
  • all_Opt静态中设置myFunc(尝试闭包方法)

感谢任何帮助!


Java脚本

注意:在测试并验证 //CODE IN QUESTION 中的代码可以在中添加 removeOpt() 的行 em> .ready() 。)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
  //Create 'removeOpt' function
  var removeOpt = $(function() //CODE IN QUESTION
  {
    var regex_str = "^" + $("#prefix_select").val() + "-";
    var dd1 = $("#dropdown1 option");

    //Clone the 'None', Current, and All options into respective variables.
    //All options are stored in order to allow different selection criteria
    if(typeof all_Opt === 'undefined'){  //Used if all_Opt is a static variable
        alert("defining 'all_Opt'");
        var all_Opt  = dd1.clone(true);
    }
    else{alert("not defining 'all_Opt'");}
    var none_Opt = dd1.filter(":contains(None)").clone(true);
    var cur_Opt  = dd1.filter(function(){
        return $(this).text().match(regex_str);
    }).clone(true);

    //Remove all options and replace the 'None' and Current options
    dd1.remove();
    noneOpt.appendTo($("#dropdown1"));
    curOpt.appendTo($("#dropdown1"));
  })(); //CODE IN QUESTION

  //Setup .ready() and .change()
  $(document).ready(removeOpt());  //CODE IN QUESTION
  $("#dropdown1").change(removeOpt());  //CODE IN QUESTION
</script>

Dropdowns的

<!-- Used to limit options in "dropdown1" -->
<p>
<SELECT id="prefix_select">
  <OPTION VALUE="AB" >AB</OPTION>
  <OPTION VALUE="BB" >BB</OPTION>
  <OPTION VALUE="ABB">ABB</OPTION>
</SELECT>
</p>

<!-- Is produced SERVER side and cannot be changed -->
<p>
<SELECT ID="dropdown1">
  <OPTION VALUE=""    >None</OPTION>
  <OPTION VALUE="1000">AB-Item 1 Description</OPTION>
  <OPTION VALUE="2001">AB-Item 2 Description</OPTION>
  <OPTION VALUE="50"  >AB-Item 8 Description</OPTION>
  <OPTION VALUE="70"  >BB-Item 3 Description</OPTION>
  <OPTION VALUE="100" >BB-Item 5 Description</OPTION>
  <OPTION VALUE="2"   >ABB-Item 4 Description</OPTION>
</SELECT>
</p>

2 个答案:

答案 0 :(得分:5)

传递它。不要调用它。

$(document).ready(removeOpt);
$("#dropdown1").change(removeOpt);

摆脱$(...)()语法。

// remove-----------vv
  var removeOpt = /*$(*/function()
  {
    var regex_str = "^" + $("#prefix_select").val() + "-";
    var dd1 = $("#dropdown1 option");

    if(typeof all_Opt === 'undefined') {
        alert("defining 'all_Opt'");
        var all_Opt  = dd1.clone(true);
    }
    else{alert("not defining 'all_Opt'");}
    var none_Opt = dd1.filter(":contains(None)").clone(true);
    var cur_Opt  = dd1.filter(function(){
        return $(this).text().match(regex_str);
    }).clone(true);

    dd1.remove();
    noneOpt.appendTo($("#dropdown1"));
    curOpt.appendTo($("#dropdown1"));
  }//)();
 //  ^^^--------remove

您正在做的是将该函数传递给$函数,该函数会将其传递给.ready()。但后来你试图调用返回的jQuery对象,好像它是一个函数。

答案 1 :(得分:1)

以下内容不正确。

 $(document).ready(removeOpt());  //CODE IN QUESTION
 $("#dropdown1").change(removeOpt());  //CODE IN QUESTION

您无需使用()调用此处的函数。就这样做。

$(document).ready(removeOpt);
$("#dropdown1").change(removeOpt);