修改第三方JS发送的数据

Question

I am working on a client's website which uses a 3rd party library to populate a dropdown the code in the SELECT is:

 <select border="0"  class="" id="country" style="" name="country"  size="1" onchange="ChangeCountryAndStateLabel(
                      {
                         'obj'       : this,
                         'targetObj' : '#state_cus1',
                         'sel'       : '',
                         'id'        : 'fields_state'
                      }
                      , 
                      {
                         'obj'       : this,
                         'targetObj' : '#fields_state_region',
                         'template'  : '<LABEL>:'
                      });" >
                <option value="" onclick="" >Select Country</option>
                <option value="38" onclick="" >Canada</option>
                <option value="223" onclick="" >United States</option></select>

That will populate:

<div id="state_cus1" style="width:165px;">
                <input type="text" id="fields_state" name="fields_state" value="" onchange="SetStateHid(this);"/>
            </div>

With all the states (if i would chose United States).

I would like to then REMOVE entries bassed on the value.

The output of selecting US would be like this:

<div id="state_cus1" style="width:165px;">
                <input type="text" id="fields_state" name="fields_state" value="" onchange="SetStateHid(this);"/>
            </div>
<option value="AL" onclick="">Alabama (AL)</option>
etc etc etc...

Once this has been populated, I would like to remove a few based on Value.

So To remove Florida I tried:

$("select > option[value*='FL']").remove();

However due to the fact that JS runs in order and does not wait, this will not work as it is run before the select is ever populated.

How would I go about only running that function AFTER the select has been populated?

EDIT

Also Tried:

$(document).ready(function() {

$("#fields_state").on("change", function(){
    $("#fields_state > option[value*='FL']").remove();
}

EDIT 2

OnChange has been removed, and the code has been moved to .ready()

   ll(document).ready(function() {
      ll("#country").change(function(){
        ChangeCountryAndStateLabel({
           'obj'       : this,
           'targetObj' : '#state_cus1',
           'sel'       : '',
           'id'        : 'fields_state'
        },{
           'obj'       : this,
           'targetObj' : '#fields_state_region',
           'template'  : '<LABEL>'
        });

        ll("#fields_state > option[value*='FL']").remove();
    });

This method still fills the select full of options, but does not remove the FL entry.

Answer 1

Place this:

$("select > option[value*='FL']").remove();

Inside this:

$("#country").on("change", function(){
    $("#fields_state > option[value*='FL']").remove();
}

That'll only remove when the select is changed. Put that in your JS and you'll be golden.

EDIT

The best solution would be to remove the onchange all together. Then place the code in your JS, like so:

$(document).ready(function() {
    $("#country").on("change", function(){
        ChangeCountryAndStateLabel({
           'obj'       : this,
           'targetObj' : '#state_cus1',
           'sel'       : '',
           'id'        : 'fields_state'
        },{
           'obj'       : this,
           'targetObj' : '#fields_state_region',
           'template'  : '<LABEL>'
        });

        $("#fields_state > option[value*='FL']").remove();
    });
});