There is a need to be able to change a SELECT statement using javascript and some other source of input (ex: drop down box). I have spent sometime on the code in removeOpt() below. However, I have had trouble getting it to work as a function and getting it to be called by .ready() and to run when dropdown1 is changed.

There would also be a need for the function to retain the memory of the variables, specifically the all_Opt variable, since I need to be able to repopulate what is in it. I've posted what I have tried below. The removeOpt variable/function works when used directly in .ready(), but it doesn't seem to work quite right when put into a function, and not at all with the .change().

In short, this is what I'm trying to do and need help with:

• Figure out of if the function removeOpt is valid, or find a valid method
• Have removeOpt run by both .ready() and dropdown1 (using .change()?)
• Make all_Opt in myFunc static (trying the closure method)

Any help is appreciated!

Java Script

(Note: lines with //CODE IN QUESTION were added after testing and validating that the code in the removeOpt() works in .ready().)

<script src="//ajax.googleapis/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>

There is a need to be able to change a SELECT statement using javascript and some other source of input (ex: drop down box). I have spent sometime on the code in removeOpt() below. However, I have had trouble getting it to work as a function and getting it to be called by .ready() and to run when dropdown1 is changed.

There would also be a need for the function to retain the memory of the variables, specifically the all_Opt variable, since I need to be able to repopulate what is in it. I've posted what I have tried below. The removeOpt variable/function works when used directly in .ready(), but it doesn't seem to work quite right when put into a function, and not at all with the .change().

In short, this is what I'm trying to do and need help with:

• Figure out of if the function removeOpt is valid, or find a valid method
• Have removeOpt run by both .ready() and dropdown1 (using .change()?)
• Make all_Opt in myFunc static (trying the closure method)

Any help is appreciated!

Java Script

(Note: lines with //CODE IN QUESTION were added after testing and validating that the code in the removeOpt() works in .ready().)

<script src="//ajax.googleapis./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>

• javascript
• jquery
• html

• Since there's a downvote, any suggestions on improving this post would be appreciated. – Phillip Commented Mar 13, 2013 at 17:05

2 Answers 2

Pass it. Don't invoke it.

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

And get rid of the $(...)() syntax.

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

What you were doing was passing the function to the $ function, which will pass it to .ready(). But then you were trying to invoke the returned jQuery object as though it was a function.

The following is incorrect.

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

You do not need to invoke the function here with (). Just do this.

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