Hi, I have a dropdown list of countries used to select which countries I'll ship to. I really only need it to be United States and Canada.... but the list of options includes about every country there is. I cannot alter this list, there is a template tag that simply spits out the following code when the page renders (list shorted for ease of display) <select name="billing_country" onchange="document.billing.action='checkout3.asp?step=3&action=updatecountry';document.billing.submit();" class="txtBoxStyle"> <option value="AF"> Afghanistan </option> <option value="AX"> Aland Islands </option> <option value="AL"> Albania </option> <option value="DZ"> Algeria </option> <option value="AS"> American Samoa </option> <option value="AD"> Andorra </option> <option value="AO"> Angola </option> <option value="AI"> Anguilla </option> <option value="AQ"> Antarctica </option> <option value="AG"> Antigua & Barbuda </option> <option value="CA"> Canada </option> <option selected="" value="US"> United States </option> </selected> I need a method of removing all the choices from the list except United States and Canada so only those two can be seen when the list drops down. Can this be done with jquery or javascript? Code?
Pretty straight forward. You need to first remove all of the options and then add the 2 that you want in there. Please see the code below, tested in Chrome. <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('.txtBoxStyle2') .find('option') .remove() .end() .append('<option value="CA">Canada</option>') .append('<option value="US">United States</option>'); }); </script> </head> <body> <p>Before:</p> <select name="billing_country" onchange="document.billing.action='checkout3.asp?step=3&action=updatecountry';document.billing.submit();" class="txtBoxStyle"> <option value="AF"> Afghanistan </option> <option value="AX"> Aland Islands </option> <option value="AL"> Albania </option> <option value="DZ"> Algeria </option> <option value="AS"> American Samoa </option> <option value="AD"> Andorra </option> <option value="AO"> Angola </option> <option value="AI"> Anguilla </option> <option value="AQ"> Antarctica </option> <option value="AG"> Antigua & Barbuda </option> <option value="CA"> Canada </option> <option selected="" value="US"> United States </option> </select> <p>After: </p> <select name="billing_country" onchange="document.billing.action='checkout3.asp?step=3&action=updatecountry';document.billing.submit();" class="txtBoxStyle2"> <option value="AF"> Afghanistan </option> <option value="AX"> Aland Islands </option> <option value="AL"> Albania </option> <option value="DZ"> Algeria </option> <option value="AS"> American Samoa </option> <option value="AD"> Andorra </option> <option value="AO"> Angola </option> <option value="AI"> Anguilla </option> <option value="AQ"> Antarctica </option> <option value="AG"> Antigua & Barbuda </option> <option value="CA"> Canada </option> <option selected="" value="US"> United States </option> </selected> </body> </html> Code (markup):
I took the full code, made a web page and it indeed does work. I added the javascript to my real page and changed the class to .txtBoxStyle2 It's a complicated page and for some reason it isn't working. I still see the long list. If the class is below an id would this need to be changed? $('.txtBoxStyle2') or does the id not matter? $('#myid' '.txtBoxStyle2') If it's not something like that I don't have a clue how to troubleshoot it. The page has alot of other javascript on it as well. Could it be a timing issue? Should the javascript be at the end, not in the head? I'm really not educated on this at all. P.S. I REALLY appreciate your help!