1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Upon Render Remove Countries From DropDown List

Discussion in 'jQuery' started by theblade24, Dec 19, 2013.

0
  1. #1
    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&amp;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 &amp; 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?
     
    theblade24, Dec 19, 2013 IP
  2. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #2
    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&amp;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 &amp; 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&amp;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 &amp; Barbuda 
    </option> 
    <option value="CA"> 
    Canada 
    </option> 
    <option selected="" value="US"> 
    United States 
    </option> 
    </selected>
</body>
</html>
    Code (markup):
     
    HuggyStudios, Dec 19, 2013 IP
  3. theblade24

    theblade24 Active Member

    Messages:
    84
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    73
    #3
    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!
     
    theblade24, Dec 19, 2013 IP
  4. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #4
    Can you post a link to your site? It will be a lot easier for me to help you.
     
    HuggyStudios, Dec 19, 2013 IP