[jQuery] $('#model').change( function() not working
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=us-ascii">
<META content="MSHTML 6.00.6000.16414" name=GENERATOR></HEAD>
<BODY>
<DIV><SPAN class=691543615-02052007><FONT face=Arial size=2>I had this code that
I wrote which changed the href of the page based on a dropdown. It worked as a
stand-alone page, but now that I'm integrating it into my site, it's not
working. Code is at the bottom of the page. Here's what's
happening:</FONT></SPAN></DIV>
<DIV><SPAN class=691543615-02052007><FONT face=Arial
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=691543615-02052007><FONT face=Arial size=2>1) On load, the make
dropdown fills in with live data. This part works perfect in both IE and
FF.</FONT></SPAN></DIV>
<DIV><SPAN class=691543615-02052007><FONT face=Arial
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=691543615-02052007><FONT face=Arial size=2>2) By default the
first make option is selected, which tnen triggers all models for that
make. In this example, Honda is first, so it loads</FONT></SPAN></DIV>
<DIV><SPAN class=691543615-02052007><FONT face=Arial size=2>
2007 Accord and 2007 Civic.</FONT></SPAN></DIV>
<DIV><SPAN class=691543615-02052007> <FONT face=Arial size=2>-
In FF, the Civic is the selected option, in IE the selected option is "--please
select a model--" with the Accord and the Civic loaded
after.</FONT></SPAN></DIV>
<DIV><SPAN class=691543615-02052007> <FONT face=Arial size=2>-
In IE, the selected option is correct</FONT></SPAN></DIV>
<DIV><SPAN class=691543615-02052007><FONT face=Arial
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=691543615-02052007><FONT face=Arial size=2>3) When the
user changes the Make, it should reload the model dropdown with live
data.</FONT></SPAN></DIV>
<DIV><SPAN class=691543615-02052007> <FONT face=Arial size=2>-
This works in FF, but for some reason does not work in IE</FONT></SPAN></DIV>
<DIV><SPAN class=691543615-02052007><FONT face=Arial
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=691543615-02052007><FONT face=Arial size=2>Does anyone have any
ideas?</FONT></SPAN></DIV>
<DIV><SPAN class=691543615-02052007><FONT face=Arial
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=691543615-02052007><FONT face=Arial
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=691543615-02052007><FONT face=Arial
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=691543615-02052007><FONT face=Arial
size=2>-------------------</FONT></SPAN></DIV>
<DIV><SPAN class=691543615-02052007><FONT face=Arial
size=2> <form><BR> <input type="hidden"
id="invPageid" value="30536" /><BR> Make:<br
/><BR> <select id="make"
disabled="true"><BR> <option>loading...</option><BR> </select><br
/><BR> <BR> Model:<br
/><BR> <select id="model"
disabled="true"><BR> <option>loading...</option><BR> </select><BR> </form></FONT></SPAN></DIV>
<DIV><SPAN class=691543615-02052007><FONT face=Arial
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=691543615-02052007><FONT face=Arial size=2>Here's the jQuery
code:</FONT></SPAN></DIV>
<DIV><SPAN class=691543615-02052007><FONT face=Arial size=2>$(document).ready(
function()
{<BR> <BR> getMakeSelect();<BR> <BR> $('#make').bind("change",function(){<BR> var
modelSelect =
$('#model');<BR> getModelSelect($(this).val());<BR> });<BR> <BR> $('#model').change(
function(){<BR> var selModel = $('#model').val().replace(/
/g,"%20");<BR> alert($('#model'));<BR> // var
invid = $('#invPageid').val(); <BR> // var urlString
= '/pages/page.cfm?pageid=' + invid +
'&pagetype=35&featureid=-1&model=' + selModel;
<BR> // location.href =
urlString;<BR> });<BR> <BR> function
getMakeSelect() { <BR> // load in the make
dropdown<BR> $.get("/Includes/ds3relatedselects.cfm",
{method:'getMakesInInventory'}, function(data){<BR> var
tempData =
data.split('!!!')<BR> $('#make').removeAttr('disabled').html(tempData[1]);<BR> re
= /value="(\w+)"/i;<BR> found =
tempData[1].match(re);<BR> getModelSelect(found[1]);<BR> }); <BR> }<BR> <BR> function
getModelSelect(make) {<BR> var modelSelect =
$('#model');<BR> modelSelect.attr('disabled','true').html('<option>loading...</option>');<BR> $.get("/Includes/ds3relatedselects.cfm",
{method:'getModelsInInventoryByMake',make:make},
function(data){<BR> var tempData =
data.split('!!!')<BR> modelSelect.removeAttr('disabled').html(tempData[1]);<BR> }); <BR> }</FONT></SPAN></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><SPAN class=691543615-02052007><FONT face=Arial
size=2>});</FONT></SPAN></DIV>
<DIV><SPAN class=691543615-02052007><FONT face=Arial
size=2></FONT></SPAN> </DIV>
<DIV> </DIV>
<DIV align=left><SPAN style="FONT-SIZE: 14px"><B><FONT face="Century Gothic">
<DIV align=left><SPAN class=159130414-05012007><FONT face=Arial size=2><SPAN
class=159130414-05012007><FONT face=Arial
size=2>____________________________________</FONT></SPAN></FONT></SPAN></DIV>
<DIV><SPAN class=159130414-05012007><FONT face=Arial size=2><SPAN
class=159130414-05012007></SPAN></FONT></SPAN> </DIV>Andy
Matthews<BR></FONT></B></SPAN><SPAN style="FONT-SIZE: 11px"><FONT
face="Century Gothic"><SPAN
style="FONT-SIZE: 8.5pt; FONT-FAMILY: 'Century Gothic'; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA; mso-no-proof: yes">Senior
Coldfusion Developer</SPAN><BR></FONT></SPAN><SPAN style="FONT-SIZE: 11px"><FONT
face="Century Gothic"><FONT color=#808080><IMG alt="" hspace=0
src="cid:691543615@02052007-2637" border=0><BR></FONT>Office: 877.707.5467
x747<BR>Direct: 615.627.9747<BR>Fax:
615.467.6249</FONT></SPAN></DIV>
<DIV><SPAN style="FONT-SIZE: 11px"><FONT
face="Century Gothic">amatthews@dealerskins.com<BR><A
href="http://www.dealerskins.com/">www.dealerskins.com</A></FONT></SPAN></DIV>
<DIV> </DIV></BODY></HTML>