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

Question

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

函数还需要保留变量的内存，特别是 all_Opt 变量，因为我需要能够重新填充其中的内容。我已经在下面发布了我尝试过的内容。 removeOpt 变量/函数在 .ready() 中直接使用时可以正常工作，但在放入函数中时似乎无法正常工作，并且根本无法正常工作.change().

---

简而言之，这就是我想要做的并且需要帮助:

• 判断removeOpt函数是否有效，或者寻找有效的方法
• 让.ready() 和dropdown1 运行removeOpt(使用.change()？)
• 将 myFunc 中的 all_Opt 设为静态(尝试使用闭包 方法)

感谢任何帮助!

---

Java 脚本

(注意:带有 //CODE IN QUESTION 的行是在测试和验证 removeOpt( ) 适用于 .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>

下拉菜单

<!-- 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>

Answer 1

通过它。不要调用它。

$(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 对象，就好像它是一个函数一样。