treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Javascript Dropdown Change

  • Hi all,

    Needed some help with writing a script that basically changes the country drop down from US to Canada when a Canadian Provence is chosen. Here is my HTML below. Is this possible?


    <div class="content_cart">

    <h2>Ship to Address</h2>

    <p style="margin: 0px;">Please note we can not ship to a PO Box.</p>
    <table id="cart2" width="398" border="0" cellpadding="3" onsubmit="return validateForm();">

    <tr>
    <td width="139" height="2" valign="top" align="left">Company Name <font color="red"> *</font></td>
    <td width=235 height="2" valign="top"><h3><input type=text name="scoShipName" value="##scoShipName##" size="30" maxlength="30"></td></h3>
    </tr>

    <tr>
    <td width="139" height="2" valign="top" align="left">Attention Of <font color="red"> *</font></td>
    <td><input type=text name="scoShipAttn" value="##scoShipAttn##" size="30" maxlength="30"></td>
    </tr>

    <tr>
    <td width="139" height="2" valign="top" align="left">Address 1 <font color="red"> *</font></td>
    <td><input type=text name="scoShipAddr1" value="##scoShipAddr1##" size="30" maxlength="30"></td>
    </tr>

    <tr>
    <td width="139" height="2" valign="top" align="left">Address 2</td>
    <td><input type=text name="scoShipAddr2" value="##scoShipAddr2##" size="30" maxlength="30"></td>
    </tr>

    <tr>
    <td width="139" height="2" valign="top" align="left">City <font color="red"> *</font></td>
    <td><input type=text name="scoShipAddr6" value="##scoShipAddr6##" size="30" maxlength="30"></td>
    </tr>

    <tr>
    <td width="139" height="2" valign="top" align="left">
    <div id="state_label1">State <font color="red"> *</font></div>
    </td>

    <td width="139" height="2" valign="top">

    <div id="state_field1">
    <h2><select name="scoShipState" value="##scoShipState##" onload="setShipDefaults()" style="width:215px;">
    <option value="0">Select State</option>
    <optgroup label="States">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="DC">District Of Columbia</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="HI">Hawaii</option>
    <option value="ID">Idaho</option>
    <option value="IL">Illinois</option>
    <option value="IN">Indiana</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <optgroup label="Provinces">
    <option value="AB" id="0">Alberta</option>
    <option value="BC" id="0">British Columbia</option>
    <option value="MB" id="0">Manitoba</option>
    <option value="NB" id="0">New Brunswick</option>
    <option value="NL" id="0">Newfoundland & Labrador</option>
    <option value="NS" id="0">Nova Scotia</option>
    <option value="NT" id="0">Northwest Territories</option>
    <option value="NU" id="0">Nunavut</option>
    <option value="ON" id="0">Ontario</option>
    <option value="PE" id="0">Prince Edward Island</option>
    <option value="QC" id="0">Quebec</option>
    <option value="SK" id="0">Saskatchewan</option>
    <option value="YT" id="0">Yukon</option></select>
    </div>
    </td>
    </tr>

    <tr>
    <td width="139" height="2" valign="top" align="left">Zip / Postal Code <font color="red"> *</font></td>
    <td><input type=text name="scoShipPost" value="##scoShipPost##" size="30"></td>
    </tr>

    <tr>
    <td width="139" height="2" valign="top" align="left">Country <font color="red"> *</font></td>

    <td>
    <select name="scoShipCountry" style="width:215px;">
    <option value="US">United States</option>
    <option value="CA">Canada</option>
    </select>
    </td>
    </tr>

    <tr>
    <td width="139" height="2" valign="top" align="left">Phone Number <font color="red"> *</font></td>
    <td><input type=text name="scoShipPhone" value="##scoShipPhone##" maxlength="12" size="30"><br/> (No spaces)</td>
    </tr>

    </table>
    </div>