jQuery change function

Question

In jsfiddle (http://jsfiddle.net/dbcottam/d8VLJ/) I have finally succeeded in getting my code to work properly... when a LOB is selected, it brings up the subLobs. However, when I impliment it into my working code, it doesn't work.

The code below is how it is implemented in my jsp, the fiddle provides this and the html that goes with it.

I have tested on Chrome, Firefox and IE - none work, any ideas why it doesn't? Do I need this in an OnLoad?

<script>
$('#txtLob').change(function () {
if ($('#txtLob').val() == "United Traditional") {
    $('#txtSubLob').remove();
    $('#lineOfBusiness').append("<select name='txtSubLob' id='txtSubLob'><option value='None'>None</option><option value='United CAPSIL'>United CAPSIL</option><option value='United LMF'>United LMF</option><option value='United Vantage'>United Vantage</option><option value='United DI Rider'>United DI Rider</option></select>");
} else if ($('#txtLob').val() == "Universal Life") {
    $('#txtSubLob').remove();
    $('#lineOfBusiness').append("<select name='txtSubLob' id='txtSubLob'><option value='None'>None</option><option value='CAPSIL'>CAPSIL</option><option value='Vantage'>Vantage</option><option value='TAG'>TAG</option><option value='VUL'>VUL</option></select>");
} else if ($('#txtLob').val() == "Companion Traditional") {
    $('#txtSubLob').remove();
    $('#lineOfBusiness').append("<select name='txtSubLob' id='txtSubLob'><option value='None'>None</option><option value='Companion CAPSIL'>Companion CAPSIL</option><option value='Companion LMF'>Companion LMF</option></select>");
} else if ($('#txtLob').val() == "Health Reinsurance Ceded") {
    $('#txtSubLob').remove();
    $('#lineOfBusiness').append("<select name='txtSubLob' id='txtSubLob'><option value='None'>None</option><option value='NHALR_DLR'>NHALR_DLR</option><option value='CI Ceded'>CI Ceded</option><option value='Western and Southern'>Western and Southern</option></select>");
} else if ($('#txtLob').val() == "Med Supp Assumed") {
    $('#txtSubLob').remove();
    $('#lineOfBusiness').append("<select name='txtSubLob' id='txtSubLob'><option value='None'>None</option><option value='Internal ADM MS Assmd'>Internal ADM MS Assmd</option><option value='External ADM MS Assmd'>External ADM MS Assmd</option></select>");
} else {
    $('#txtSubLob').remove();
}
}).trigger('change');   
</script>

Answer 1

You need to place your code in a $(document).ready(function(){});

<script>
$(document).ready(function(){

  $('#txtLob').change(function () {
  if ($('#txtLob').val() == "United Traditional") {
    $('#txtSubLob').remove();
    $('#lineOfBusiness').append("<select name='txtSubLob' id='txtSubLob'><option value='None'>None</option><option value='United CAPSIL'>United CAPSIL</option><option value='United LMF'>United LMF</option><option value='United Vantage'>United Vantage</option><option value='United DI Rider'>United DI Rider</option></select>");
  } else if ($('#txtLob').val() == "Universal Life") {
    $('#txtSubLob').remove();
    $('#lineOfBusiness').append("<select name='txtSubLob' id='txtSubLob'><option value='None'>None</option><option value='CAPSIL'>CAPSIL</option><option value='Vantage'>Vantage</option><option value='TAG'>TAG</option><option value='VUL'>VUL</option></select>");
  } else if ($('#txtLob').val() == "Companion Traditional") {
    $('#txtSubLob').remove();
    $('#lineOfBusiness').append("<select name='txtSubLob' id='txtSubLob'><option value='None'>None</option><option value='Companion CAPSIL'>Companion CAPSIL</option><option value='Companion LMF'>Companion LMF</option></select>");
  } else if ($('#txtLob').val() == "Health Reinsurance Ceded") {
    $('#txtSubLob').remove();
    $('#lineOfBusiness').append("<select name='txtSubLob' id='txtSubLob'><option value='None'>None</option><option value='NHALR_DLR'>NHALR_DLR</option><option value='CI Ceded'>CI Ceded</option><option value='Western and Southern'>Western and Southern</option></select>");
  } else if ($('#txtLob').val() == "Med Supp Assumed") {
    $('#txtSubLob').remove();
    $('#lineOfBusiness').append("<select name='txtSubLob' id='txtSubLob'><option value='None'>None</option><option value='Internal ADM MS Assmd'>Internal ADM MS Assmd</option><option value='External ADM MS Assmd'>External ADM MS Assmd</option></select>");
  } else {
    $('#txtSubLob').remove();
  }
  }).trigger('change');   
});
</script>

Fiddler does this for you, so that's why it works there but not on your page.