We Keep Coding

Dropdown selected options not displaying on Safari iPad

Using jQuery, I'm trying to change the selected option in a SELECT element dynamically. It's working fine on Chrome/IE on windows but not working on iPad/Safari.
Here is my code:
$("#ddlRegion").find('option').attr("selected",false).prop('selected', false);
$("#cicddlRegion option[value='" + currCode + "']").attr('selected', 'selected').prop('selected',true);
HTML After rendered:
<select id="ddlRegion" aria-invalid="false">
<option value="0"> </option>
<option value="ABR">Abruzzo</option>
<option value="AG">Agrigento</option>
<option value="AL">Alessandria</option>
<option value="AN">Ancona</option>
<option value="AO">Aosta</option>
<option value="AR">Arezzo</option>
<option value="AP">Ascoli Piceno</option>
<option value="AT">Asti</option>
<option value="AV">Avellino</option>
<option value="BA">Bari</option>
<option value="BT">Barletta-Andria-Trani</option>
<option value="BAS">Basilicata</option>
<option value="BL">Belluno</option>
<option value="BN">Benevento</option>
<option value="BG">Bergamo</option>
<option value="BI">Biella</option>
<option value="BO">Bologna</option>
<option value="BZ">Bolzano</option>
<option value="BS">Brescia</option>
<option value="BR">Brindisi</option>
<option value="CA">Cagliari</option>
<option value="CAL">Calabria</option>
<option value="CL">Caltanissetta</option>
<option value="CAM">Campania</option>
<option value="CB">Campobasso</option>
<option value="CI">Carbonia-Iglesias</option>
<option value="CE">Caserta</option>
<option value="CT">Catania</option>
<option value="CZ">Catanzaro</option>
<option value="CH">Chieti</option>
<option value="CO">Como</option>
<option value="CS">Cosenza</option>
<option value="CR">Cremona</option>
<option value="KR">Crotone</option>
<option value="CN">Cuneo</option>
<option value="EMI">Emilia-Romagna</option>
<option value="EN">Enna</option>
<option value="FM">Fermo</option>
<option value="FE">Ferrara</option>
<option value="FI">Firenze</option>
<option value="FG">Foggia</option>
<option value="FO">Forli</option>
<option value="FC">Forlì-Cesena</option>
<option value="FRI">Friuli-Venezia Giulia</option>
<option value="FR">Frosinone</option>
<option value="GE">Genova</option>
<option value="GO">Gorizia</option>
<option value="GR">Grosseto</option>
<option value="IM">Imperia</option>
<option value="IS">Isernia</option>
<option value="SP">La Spezia</option>
<option value="AQ">L'Aquila</option>
<option value="LT">Latina</option>
<option value="LAZ">Lazio</option>
<option value="LE">Lecce</option>
<option value="LC">Lecco</option>
<option value="LIG">Liguria</option>
<option value="LI">Livorno</option>
<option value="LO">Lodi</option>
<option value="LOM">Lombardia</option>
<option value="LU">Lucca</option>
<option value="MC">Macerata</option>
<option value="MN">Mantova</option>
<option value="MAR">Marche</option>
<option value="MS">Massa</option>
<option value="MT">Matera</option>
<option value="VS">Medio Campidano</option>
<option value="ME">Messina</option>
<option value="MI">Milano</option>
<option value="MO">Modena</option>
<option value="MOL">Molise</option>
<option value="MB">Monza e della Brianza</option>
<option value="NA">Napoli</option>
<option value="NO">Novara</option>
<option value="NU">Nuoro</option>
<option value="OG">Ogliastra</option>
<option value="OT">Olbia-Tempio</option>
<option value="OR">Oristano</option>
<option value="PD">Padova</option>
<option value="PA">Palermo</option>
<option value="PR">Parma</option>
<option value="PV">Pavia</option>
<option value="PG">Perugia</option>
<option value="PS">Pesaro</option>
<option value="PU">Pesaro and Urbino</option>
<option value="PE">Pescara</option>
<option value="PC">Piacenza</option>
<option value="PIE">Piemonte</option>
<option value="PI">Pisa</option>
<option value="PT">Pistoia</option>
<option value="PN">Pordenone</option>
<option value="PZ">Potenza</option>
<option value="PO">Prato</option>
<option value="PUG">Puglia</option>
<option value="RG">Ragusa</option>
<option value="RA">Ravenna</option>
<option value="RC">Reggio Calabria</option>
<option value="RE">Reggio Emilia</option>
<option value="RI">Rieti</option>
<option value="RN">Rimini</option>
<option value="RM" selected="selected">Roma</option>
<option value="RO">Rovigo</option>
<option value="Sm">S.m. Del Soccorso</option>
<option value="SA">Salerno</option>
<option value="SAR">Sardegna</option>
<option value="SS">Sassari</option>
<option value="SV">Savona</option>
<option value="SIC">Sicilia</option>
<option value="SI">Siena</option>
<option value="SR">Siracusa</option>
<option value="SO">Sondrio</option>
<option value="TA">Taranto</option>
<option value="TE">Teramo</option>
<option value="TR">Terni</option>
<option value="TO">Torino</option>
<option value="TOS">Toscana</option>
<option value="TP">Trapani</option>
<option value="TRE">Trentino-Alto Adige</option>
<option value="TN">Trento</option>
<option value="TV">Treviso</option>
<option value="TS">Trieste</option>
<option value="UD">Udine</option>
<option value="UMB">Umbria</option>
<option value="VAL">Valle D'Aosta</option>
<option value="VA">Varese</option>
<option value="VEN">Veneto</option>
<option value="VE">Venezia</option>
<option value="VB">Verbania</option>
<option value="VC">Vercelli</option>
<option value="VR">Verona</option>
<option value="VV">Vibo Valentia</option>
<option value="VI">Vicenza</option>
<option value="VT">Viterbo</option>
</select>
On iPad/Safari, I noticed that the target value was selected (checked) <option value="RM" selected="selected">Roma</option> but not displaying. any help will be highly appreciated. Thanks.

javascript. how to move selection on the top of a list

sry for my english. but i hope you can understand what my problem is.
i have a dropdown-menu where i have all letters from A to Z. in a list, i have a lot of names. when i select a letter in the dropdown menu, it should select the same letter in the list. that works so far, but how can i move the selected letter to the top of the list?
<div align="center"><html>
<head>
<script language="JavaScript">
function Eingabe(Wert)
{
for(i = 0; i < document.getElementById('Names').options.length; i++)
{
if(Wert.substr(0, Wert.length).toLowerCase() == document.getElementById('Names').options[i].value.substr(0, Wert.length).toLowerCase() && Wert.length != 0)
{
document.getElementById('Names').options[i].selected = true;
break;
}
}
}
</script>
</head>
<body>
<label>Select letter:
<select name="Letters"onClick="Eingabe(this.value);" type="text"><br>
<option>---Select letter---</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
...
</select>
</label>
<br>
<br>
<select id="Names" size="18">
<option value="A:">A:</option>
<option value="Adena"> -Adena</option>
<option value="Adeodata"> -Adeodata</option>
<option value="Adeodato"> -Adeodato</option>
<option value="Adeodatus"> -Adeodatus</option>
<option value="Aderito"> -Aderito</option>
<option value="Adhelm"> -Adhelm</option>
<option value="Adil"> -Adil</option>
<option value="Adina"> -Adina</option>
<option value="Adine"> -Adine</option>
<option value="Adis"> -Adis</option>
<option value="Adlai"> -Adlai</option>
<option value="Admir"> -Admir</option>
<option value="Adnan"> -Adnan</option>
<option value="Adolar"> -Adolar</option>
<option value="Adolf"> -Adolf</option>
<option value="Adolfa"> -Adolfa</option>
<option value="Adolfine"> -Adolfine</option>
<option value="Adolfo"> -Adolfo</option>
<option value="Adolph"> -Adolph</option>
<option value="Adolpha"> -Adolpha</option>
<option value="Adolphe"> -Adolphe</option>
<option value="Adolphus"> -Adolphus</option>
<option value="Adone"> -Adone</option>
<option value="Adonia"> -Adonia</option>
<option value="Adonis"> -Adonis</option>
<option value="Adora"> -Adora</option>
<option value="Adoración"> -Adoración</option>
<option value="Adria"> -Adria</option>
<option value="Adriaan"> -Adriaan</option>
<option value="Adriaen"> -Adriaen</option>
<option value="Adrián"> -Adrián</option>
<option value="Adriana"> -Adriana</option>
<option value="Adriane"> -Adriane</option>
<option value="Adrianna"> -Adrianna</option>
<option value="Adrianne"> -Adrianne</option>
<option value="Adriano"> -Adriano</option>
<option value="B:">B:</option>
<option value="Bartel"> -Bartel</option>
<option value="Barthold"> -Barthold</option>
<option value="Bartholomäa"> -Bartholomäa</option>
<option value="Bartholomaios"> -Bartholomaios</option>
<option value="Bartholomäus"> -Bartholomäus</option>
<option value="Bartholomew"> -Bartholomew</option>
<option value="Bartolmai"> -Bartolmai</option>
<option value="Bartolo"> -Bartolo</option>
<option value="Bartolomé"> -Bartolomé</option>
<option value="Bartolomea"> -Bartolomea</option>
<option value="Bartolomeo"> -Bartolomeo</option>
<option value="Bartosz"> -Bartosz</option>
<option value="Bas"> -Bas</option>
<option value="Bashkim"> -Bashkim</option>
<option value="Basia"> -Basia</option>
<option value="Basil"> -Basil</option>
<option value="Basile"> -Basile</option>
<option value="Basileios"> -Basileios</option>
<option value="Basilia"> -Basilia</option>
<option value="Basilisa"> -Basilisa</option>
<option value="Basilius"> -Basilius</option>
<option value="Basti"> -Basti</option>
<option value="Bastiaan"> -Bastiaan</option>
<option value="Bastian"> -Bastian</option>
<option value="Bastiano"> -Bastiano</option>
<option value="Bastien"> -Bastien</option>
<option value="Bathia"> -Bathia</option>
</select>
</body>
</html>
</div>

Use Element#scrollIntoView. Add the below line just before the break statement in your function Eingabe.
document.getElementById('Names').options[i].scrollIntoView();
EDIT: Also change onClick to onchange. Refer working snippet added below.
function Eingabe(Wert)
{
for(i = 0; i < document.getElementById('Names').options.length; i++)
{
if(Wert.substr(0, Wert.length).toLowerCase() == document.getElementById('Names').options[i].value.substr(0, Wert.length).toLowerCase() && Wert.length != 0)
{
document.getElementById('Names').options[i].selected = true;
document.getElementById('Names').options[i].scrollIntoView();
break;
}
}
}
<label>Select letter:
<select name="Letters" onchange="Eingabe(this.value);" type="text"><br>
<option>---Select letter---</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</label>
<br>
<br>
<select id="Names" size="18">
<option value="A:">A:</option>
<option value="Adena"> -Adena</option>
<option value="Adeodata"> -Adeodata</option>
<option value="Adeodato"> -Adeodato</option>
<option value="Adeodatus"> -Adeodatus</option>
<option value="Aderito"> -Aderito</option>
<option value="Adhelm"> -Adhelm</option>
<option value="Adil"> -Adil</option>
<option value="Adina"> -Adina</option>
<option value="Adine"> -Adine</option>
<option value="Adis"> -Adis</option>
<option value="Adlai"> -Adlai</option>
<option value="Admir"> -Admir</option>
<option value="Adnan"> -Adnan</option>
<option value="Adolar"> -Adolar</option>
<option value="Adolf"> -Adolf</option>
<option value="Adolfa"> -Adolfa</option>
<option value="Adolfine"> -Adolfine</option>
<option value="Adolfo"> -Adolfo</option>
<option value="Adolph"> -Adolph</option>
<option value="Adolpha"> -Adolpha</option>
<option value="Adolphe"> -Adolphe</option>
<option value="Adolphus"> -Adolphus</option>
<option value="Adone"> -Adone</option>
<option value="Adonia"> -Adonia</option>
<option value="Adonis"> -Adonis</option>
<option value="Adora"> -Adora</option>
<option value="Adoración"> -Adoración</option>
<option value="Adria"> -Adria</option>
<option value="Adriaan"> -Adriaan</option>
<option value="Adriaen"> -Adriaen</option>
<option value="Adrián"> -Adrián</option>
<option value="Adriana"> -Adriana</option>
<option value="Adriane"> -Adriane</option>
<option value="Adrianna"> -Adrianna</option>
<option value="Adrianne"> -Adrianne</option>
<option value="Adriano"> -Adriano</option>
<option value="B:">B:</option>
<option value="Bartel"> -Bartel</option>
<option value="Barthold"> -Barthold</option>
<option value="Bartholomäa"> -Bartholomäa</option>
<option value="Bartholomaios"> -Bartholomaios</option>
<option value="Bartholomäus"> -Bartholomäus</option>
<option value="Bartholomew"> -Bartholomew</option>
<option value="Bartolmai"> -Bartolmai</option>
<option value="Bartolo"> -Bartolo</option>
<option value="Bartolomé"> -Bartolomé</option>
<option value="Bartolomea"> -Bartolomea</option>
<option value="Bartolomeo"> -Bartolomeo</option>
<option value="Bartosz"> -Bartosz</option>
<option value="Bas"> -Bas</option>
<option value="Bashkim"> -Bashkim</option>
<option value="Basia"> -Basia</option>
<option value="Basil"> -Basil</option>
<option value="Basile"> -Basile</option>
<option value="Basileios"> -Basileios</option>
<option value="Basilia"> -Basilia</option>
<option value="Basilisa"> -Basilisa</option>
<option value="Basilius"> -Basilius</option>
<option value="Basti"> -Basti</option>
<option value="Bastiaan"> -Bastiaan</option>
<option value="Bastian"> -Bastian</option>
<option value="Bastiano"> -Bastiano</option>
<option value="Bastien"> -Bastien</option>
<option value="Bathia"> -Bathia</option>
</select>

Fill Form Values With Javascript Using "Select Name"

I am trying to use javascript to automatically fill a form and I am having some difficult setting the value for the country.
<form action="/payment" method="post" novalidate="">
<div class="input_group">
<p class="input text changed">
<label for="shipping_address_1">Address</label>
<input type="text" name="shipping_address_1" id="shipping_address_1" value="xxx">
</p>
</div>
<div class="input_group" data-ignore-validation="true">
<p class="input text">
<label for="shipping_address_2">Apt num, Suite (optional)</label>
<input type="text" name="shipping_address_2" value="">
</p>
</div>
<div class="input_group">
<p class="input text span_half changed">
<label for="shipping_city">City</label>
<input type="text" name="shipping_city" value="xxx">
</p>
<p class="text input select span_half changed">
<label for="shipping_state" data-loading="Loading" data-default="State / Province">State / Province</label>
<span class="select_wrapper"><select name="shipping_state">
<option value="">State / Province</option>
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Ontario" selected="">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Yukon Territory">Yukon Territory</option>
</select><span class="value">Ontario</span></span>
</p>
</div>
<div class="input_group">
<p class="input text span_half changed">
<label for="shipping_zip">Zip / Postal code</label>
<input type="text" name="shipping_zip" value="xxxxx" maxlength="10">
</p>
<p class="text input select span_half changed">
<label>Country</label>
<span class="select_wrapper"><select name="shipping_country_id">
<option value="46">Afghanistan</option>
<option value="47">Albania</option>
<option value="48">Algeria</option>
<option value="49">American Samoa</option>
<option value="50">Andorra</option>
<option value="51">Angola</option>
<option value="1">Anguilla</option>
<option value="52">Antarctica</option>
<option value="53">Antigua And Barbuda</option>
<option value="2">Argentina</option>
<option value="54">Armenia</option>
<option value="55">Aruba</option>
<option value="3">Australia</option>
<option value="4">Austria</option>
<option value="56">Azerbaijan</option>
<option value="253">Åland Islands</option>
<option value="57">Bahamas</option>
<option value="58">Bahrain</option>
<option value="59">Bangladesh</option>
<option value="60">Barbados</option>
<option value="61">Belarus</option>
<option value="5">Belgium</option>
<option value="62">Belize</option>
<option value="63">Benin</option>
<option value="64">Bermuda</option>
<option value="65">Bhutan</option>
<option value="66">Bolivia</option>
<option value="67">Bosnia and Herzegovina</option>
<option value="68">Botswana</option>
<option value="69">Bouvet Island</option>
<option value="6">Brazil</option>
<option value="70">British Indian Ocean Territory</option>
<option value="71">British Virgin Islands</option>
<option value="72">Brunei Darussalam</option>
<option value="73">Bulgaria</option>
<option value="74">Burkina Faso</option>
<option value="75">Burundi</option>
<option value="76">Cambodia</option>
<option value="77">Cameroon</option>
<option value="7" selected="">Canada</option>
<option value="78">Cape Verde</option>
<option value="79">Cayman Islands</option>
<option value="80">Central African Republic</option>
<option value="81">Chad</option>
<option value="8">Chile</option>
<option value="9">China</option>
<option value="82">Christmas Island</option>
<option value="83">Cocos (Keeling) Islands</option>
<option value="84">Colombia</option>
<option value="85">Comoros</option>
<option value="86">Congo</option>
<option value="87">Cook Islands</option>
<option value="10">Costa Rica</option>
<option value="88">Cote D'Ivoire (Ivory Coast)</option>
<option value="89">Croatia (Hrvatska)</option>
<option value="90">Cuba</option>
<option value="91">Cyprus</option>
<option value="92">Czech Republic</option>
<option value="249">Democratic Republic of the Congo</option>
<option value="11">Denmark</option>
<option value="93">Djibouti</option>
<option value="94">Dominica</option>
<option value="12">Dominican Republic</option>
<option value="95">East Timor</option>
<option value="13">Ecuador</option>
<option value="96">Egypt</option>
<option value="97">El Salvador</option>
<option value="98">Equatorial Guinea</option>
<option value="99">Eritrea</option>
<option value="100">Estonia</option>
<option value="101">Ethiopia</option>
<option value="102">Falkland Islands</option>
<option value="103">Faroe Islands</option>
<option value="104">Fiji</option>
<option value="14">Finland</option>
<option value="15">France</option>
<option value="105">France, Metropolitan</option>
<option value="106">French Guiana</option>
<option value="107">French Polynesia</option>
<option value="108">French Southern Territories</option>
<option value="109">Gabon</option>
<option value="110">Gambia</option>
<option value="111">Georgia</option>
<option value="16">Germany</option>
<option value="112">Ghana</option>
<option value="113">Gibraltar</option>
<option value="17">Greece</option>
<option value="114">Greenland</option>
<option value="115">Grenada</option>
<option value="116">Guadeloupe</option>
<option value="117">Guam</option>
<option value="118">Guatemala</option>
<option value="244">Guernsey</option>
<option value="119">Guinea</option>
<option value="120">Guinea-Bissau</option>
<option value="121">Guyana</option>
<option value="122">Haiti</option>
<option value="123">Heard and McDonald Islands</option>
<option value="124">Honduras</option>
<option value="18">Hong Kong</option>
<option value="125">Hungary</option>
<option value="19">Iceland</option>
<option value="20">India</option>
<option value="126">Indonesia</option>
<option value="127">Iran</option>
<option value="128">Iraq</option>
<option value="21">Ireland</option>
<option value="245">Isle of Man</option>
<option value="22">Israel</option>
<option value="23">Italy</option>
<option value="24">Jamaica</option>
<option value="25">Japan</option>
<option value="247">Jersey</option>
<option value="129">Jordan</option>
<option value="130">Kazakhstan</option>
<option value="131">Kenya</option>
<option value="132">Kiribati</option>
<option value="133">Korea (North) (People's Republic)</option>
<option value="134">Kuwait</option>
<option value="135">Kyrgyzstan (Kyrgyz Republic)</option>
<option value="136">Laos</option>
<option value="137">Latvia</option>
<option value="138">Lebanon</option>
<option value="139">Lesotho</option>
<option value="140">Liberia</option>
<option value="141">Libya</option>
<option value="142">Liechtenstein</option>
<option value="143">Lithuania</option>
<option value="26">Luxembourg</option>
<option value="144">Macau</option>
<option value="145">Macedonia</option>
<option value="146">Madagascar</option>
<option value="147">Malawi</option>
<option value="27">Malaysia</option>
<option value="148">Maldives</option>
<option value="149">Mali</option>
<option value="150">Malta</option>
<option value="151">Marshall Islands</option>
<option value="152">Martinique</option>
<option value="153">Mauritania</option>
<option value="154">Mauritius</option>
<option value="155">Mayotte</option>
<option value="28">Mexico</option>
<option value="156">Micronesia</option>
<option value="157">Moldova</option>
<option value="29">Monaco</option>
<option value="158">Mongolia</option>
<option value="243">Montenegro</option>
<option value="159">Montserrat</option>
<option value="160">Morocco</option>
<option value="161">Mozambique</option>
<option value="162">Myanmar</option>
<option value="163">Namibia</option>
<option value="164">Nauru</option>
<option value="165">Nepal</option>
<option value="30">Netherlands</option>
<option value="166">Netherlands Antilles</option>
<option value="167">Neutral Zone (Saudia Arabia/Iraq)</option>
<option value="168">New Caledonia</option>
<option value="31">New Zealand</option>
<option value="169">Nicaragua</option>
<option value="170">Niger</option>
<option value="171">Nigeria</option>
<option value="172">Niue</option>
<option value="173">Norfolk Island</option>
<option value="174">Northern Mariana Islands</option>
<option value="32">Norway</option>
<option value="175">Oman</option>
<option value="176">Pakistan</option>
<option value="177">Palau</option>
<option value="186">Palestine</option>
<option value="178">Panama</option>
<option value="179">Papua New Guinea</option>
<option value="180">Paraguay</option>
<option value="181">Peru</option>
<option value="182">Philippines</option>
<option value="183">Pitcairn</option>
<option value="184">Poland</option>
<option value="33">Portugal</option>
<option value="185">Puerto Rico</option>
<option value="187">Qatar</option>
<option value="188">Reunion</option>
<option value="189">Romania</option>
<option value="190">Russian Federation</option>
<option value="191">Rwanda</option>
<option value="192">S. Georgia and S. Sandwich Isls.</option>
<option value="193">Saint Kitts and Nevis</option>
<option value="194">Saint Lucia</option>
<option value="195">Saint Vincent and The Grenadines</option>
<option value="196">Samoa</option>
<option value="197">San Marino</option>
<option value="198">Sao Tome and Principe</option>
<option value="199">Saudi Arabia</option>
<option value="200">Senegal</option>
<option value="242">Serbia</option>
<option value="201">Seychelles</option>
<option value="202">Sierra Leone</option>
<option value="34">Singapore</option>
<option value="203">Slovakia (Slovak Republic)</option>
<option value="204">Slovenia</option>
<option value="205">Solomon Islands</option>
<option value="206">Somalia</option>
<option value="207">South Africa</option>
<option value="35">South Korea</option>
<option value="208">Soviet Union (former)</option>
<option value="36">Spain</option>
<option value="209">Sri Lanka</option>
<option value="210">St. Helena</option>
<option value="211">St. Pierre and Miquelon</option>
<option value="212">Sudan</option>
<option value="213">Suriname</option>
<option value="214">Svalbard and Jan Mayen Islands</option>
<option value="215">Swaziland</option>
<option value="37">Sweden</option>
<option value="38">Switzerland</option>
<option value="216">Syria</option>
<option value="39">Taiwan</option>
<option value="217">Tajikistan</option>
<option value="218">Tanzania</option>
<option value="40">Thailand</option>
<option value="251">Timore-Leste</option>
<option value="219">Togo</option>
<option value="220">Tokelau</option>
<option value="221">Tonga</option>
<option value="222">Trinidad and Tobago</option>
<option value="223">Tunisia</option>
<option value="41">Turkey</option>
<option value="224">Turkmenistan</option>
<option value="225">Turks and Caicos Islands</option>
<option value="226">Tuvalu</option>
<option value="227">Uganda</option>
<option value="228">Ukraine</option>
<option value="229">United Arab Emirates</option>
<option value="42">United Kingdom</option>
<option value="43">United States</option>
<option value="257">United States Minor Outlying Islands</option>
<option value="44">Uruguay</option>
<option value="230">Uzbekistan</option>
<option value="231">Vanuatu</option>
<option value="232">Vatican City State (Holy See)</option>
<option value="45">Venezuela</option>
<option value="233">Viet Nam</option>
<option value="234">Virgin Islands (US)</option>
<option value="235">Wallis and Futuna Islands</option>
<option value="236">Western Sahara</option>
<option value="237">Yemen</option>
<option value="255">Yugoslavia</option>
<option value="239">Zaire</option>
<option value="240">Zambia</option>
<option value="241">Zimbabwe</option>
</select><span class="value">Canada</span></span>
</p>
</div>
<div class="submit">
<span class="button" data-update="Update" data-default="Next" style="padding: 0px; width: 138px;">
<span class="text" unselectable="on">Update</span>
<button type="submit">Update</button>
<span class="loader icon">d</span>
<span class="success icon">e</span>
</span>
</div>
</form>
Any suggestions on how to set the value for shipping_country_id?
This should be very simple and I'm surprised at how much difficulty I am experiencing.

Not sure if I understand your question correctly, but this should populate it:
document.getElementsByName('shipping_country_id')[0].value = '47'
This sets the default value of the select element to 'Albania'
To set the address:
document.getElementById('shipping_address_1').value = 'New Address';

jQuery Json Filter and Append to HTML Selector

I am trying to filter out this JSON object based on the country code present in the object as.
http://jsfiddle.net/870ctvnm
There is a primary selector which a user uses to select the Currency. After which I want to filter out all the available payment options based on the country code and then append the filtered object to the payment selector.
I tried using $.grep and $.filter both failed. Would be great if someone could help out here.

so, data.js contains that variable, var payments.
<label>Currency</label>
<select class="form-control" onchange="currency_update(this);">
<option>---</option> <option value="ADP">ADP</option> <option value="AED">AED</option> <option value="AFA">AFA</option> <option value="ALL">ALL</option> <option value="ANG">ANG</option> <option value="AOK">AOK</option> <option value="ARS">ARS</option> <option value="AUD">AUD</option> <option value="AWG">AWG</option> <option value="BBD">BBD</option> <option value="BDT">BDT</option> <option value="BGN">BGN</option> <option value="BHD">BHD</option> <option value="BIF">BIF</option> <option value="BMD">BMD</option> <option value="BND">BND</option> <option value="BOB">BOB</option> <option value="BRL">BRL</option> <option value="BSD">BSD</option> <option value="BTN">BTN</option> <option value="BUK">BUK</option> <option value="BWP">BWP</option> <option value="BZD">BZD</option> <option value="CAD">CAD</option> <option value="CHF">CHF</option> <option value="CLF">CLF</option> <option value="CLP">CLP</option> <option value="CNY">CNY</option> <option value="COP">COP</option> <option value="CRC">CRC</option> <option value="CZK">CZK</option> <option value="CUP">CUP</option> <option value="CVE">CVE</option> <option value="CYP">CYP</option> <option value="DKK">DKK</option> <option value="DOP">DOP</option> <option value="DZD">DZD</option> <option value="ECS">ECS</option> <option value="EGP">EGP</option> <option value="EEK">EEK</option> <option value="ETB">ETB</option> <option value="EUR">EUR</option> <option value="FJD">FJD</option> <option value="FKP">FKP</option> <option value="GBP">GBP</option> <option value="GHC">GHC</option> <option value="GIP">GIP</option> <option value="GMD">GMD</option> <option value="GNF">GNF</option> <option value="GTQ">GTQ</option> <option value="GWP">GWP</option> <option value="GYD">GYD</option> <option value="HKD">HKD</option> <option value="HNL">HNL</option> <option value="HTG">HTG</option> <option value="HUF">HUF</option> <option value="IDR">IDR</option> <option value="IEP">IEP</option> <option value="ILS">ILS</option> <option value="INR">INR</option> <option value="IQD">IQD</option> <option value="IRR">IRR</option> <option value="JMD">JMD</option> <option value="JOD">JOD</option> <option value="JPY">JPY</option> <option value="KES">KES</option> <option value="KHR">KHR</option> <option value="KMF">KMF</option> <option value="KPW">KPW</option> <option value="KRW">KRW</option> <option value="KWD">KWD</option> <option value="KYD">KYD</option> <option value="LAK">LAK</option> <option value="LBP">LBP</option> <option value="LKR">LKR</option> <option value="LRD">LRD</option> <option value="LSL">LSL</option> <option value="LYD">LYD</option> <option value="MAD">MAD</option> <option value="MGF">MGF</option> <option value="MNT">MNT</option> <option value="MOP">MOP</option> <option value="MRO">MRO</option> <option value="MTL">MTL</option> <option value="MUR">MUR</option> <option value="MVR">MVR</option> <option value="MWK">MWK</option> <option value="MXP">MXP</option> <option value="MYR">MYR</option> <option value="MZM">MZM</option> <option value="NAD">NAD</option> <option value="NGN">NGN</option> <option value="NIO">NIO</option> <option value="NOK">NOK</option> <option value="NPR">NPR</option> <option value="NZD">NZD</option> <option value="OMR">OMR</option> <option value="PAB">PAB</option> <option value="PEN">PEN</option> <option value="PGK">PGK</option> <option value="PHP">PHP</option> <option value="PKR">PKR</option> <option value="PLN">PLN</option> <option value="PYG">PYG</option> <option value="QAR">QAR</option> <option value="RON">RON</option> <option value="RWF">RWF</option> <option value="SAR">SAR</option> <option value="SBD">SBD</option> <option value="SCR">SCR</option> <option value="SDP">SDP</option> <option value="SEK">SEK</option> <option value="SGD">SGD</option> <option value="SHP">SHP</option> <option value="SLL">SLL</option> <option value="SOS">SOS</option> <option value="SRG">SRG</option> <option value="STD">STD</option> <option value="RUB">RUB</option> <option value="SVC">SVC</option> <option value="SYP">SYP</option> <option value="SZL">SZL</option> <option value="THB">THB</option> <option value="TND">TND</option> <option value="TOP">TOP</option> <option value="TPE">TPE</option> <option value="TRY">TRY</option> <option value="TTD">TTD</option> <option value="TWD">TWD</option> <option value="TZS">TZS</option> <option value="UGX">UGX</option> <option value="USD">USD</option> <option value="UYU">UYU</option> <option value="VEF">VEF</option> <option value="VND">VND</option> <option value="VUV">VUV</option> <option value="WST">WST</option> <option value="XAF">XAF</option> <option value="XAG">XAG</option> <option value="XAU">XAU</option> <option value="XCD">XCD</option> <option value="XDR">XDR</option> <option value="XOF">XOF</option> <option value="XPD">XPD</option> <option value="XPF">XPF</option> <option value="XPT">XPT</option> <option value="YDD">YDD</option> <option value="YER">YER</option> <option value="YUD">YUD</option> <option value="ZAR">ZAR</option> <option value="ZMK">ZMK</option> <option value="ZRZ">ZRZ</option> <option value="ZWD">ZWD</option> <option value="SKK">SKK</option> <option value="AMD">AMD</option>
</select>
<label>Payment Method</label>
<select id="methods"></select>
<script src="data.js"></script>
<script>
// notice: data.js contains var payments = [{ ... }];
function currency_update(elm) {
var currency = elm.value;
var i = 0;
document.getElementById('methods').innerHTML = '';
for(key in payments[0]) {
var allowed_currencies = payments[0][key].currencies || [];
if(allowed_currencies.indexOf(currency)) {
addPayment(i, key);
}
i++
}
}
function addPayment(i, key) {
document.getElementById('methods').innerHTML += '<option value="' + payments[0][key].name + '">' + payments[0][key].name + '</option>';
}
</script>
I don't use that i, but it might be useful.

Get or Set Value(s) on A Multi-select Form Field

When you have a multi-select form field such as the following, how do you get, and set the selected option values?
<select class="items" multiple="multiple" size="5">
<option value="apple">apple</option>
<option value="ant">ant</option>
<option value="ape">ape</option>
<option value="age">age</option>
<option value="boy">boy</option>
<option value="banana">banana</option>
<option value="carrot">carrot</option>
</select>
Getting the value(s)
var items = [];
$('select.items option:selected').each(function() {
items.push( this.value );
});
Is this the only way to get the array of values or is there a sleeker way?
Setting the value(s)
var items = ['apple', 'ape', 'carrot'];
$.each(items, function() {
$('select.items option[value="' + this + '"]').prop('selected', true);
});
Is there a sleeker way to do this?

It's quite straight-forward to get the selected values array; use the jQuery .val() method.
var items = $('select.items').val();
//sample result: ["apple","ape","boy","daisy","eagle"]
Please note that JavaScripts value property, which works well for other form fields, returns just the first selected value
function out( v ) {
$('pre.out').text( JSON.stringify( v ) );
}
$('select.items').on('change', function() {
out( $(this).val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="items" multiple="multiple" size="5">
<option value="apple">apple</option>
<option value="ant">ant</option>
<option value="ape">ape</option>
<option value="age">age</option>
<option value="boy">boy</option>
<option value="banana">banana</option>
<option value="carrot">carrot</option>
<option value="cat">cat</option>
<option value="daisy">daisy</option>
<option value="desk">desk</option>
<option value="elephant">elephant</option>
<option value="eagle">eagle</option>
<option value="fox">fox</option>
<option value="fat">fat</option>
<option value="goat">goat</option>
<option value="good">good</option>
<option value="gum">gum</option>
<option value="hut">hut</option>
<option value="hop">hop</option>
<option value="insect">insect</option>
<option value="ice">ice</option>
<option value="jump">jump</option>
<option value="kite">kite</option>
<option value="lamp">lamp</option>
<option value="lap">lap</option>
<option value="monkey">monkey</option>
<option value="mat">mat</option>
<option value="nature">nature</option>
<option value="nose">nose</option>
<option value="owl">owl</option>
<option value="pocket">pocket</option>
<option value="pick">pick</option>
<option value="quote">quote</option>
<option value="rabbit">rabbit</option>
<option value="run">run</option>
<option value="soft">soft</option>
<option value="sit">sit</option>
<option value="table">table</option>
<option value="toy">toy</option>
<option value="understand">understand</option>
<option value="vote">vote</option>
<option value="winter">winter</option>
<option value="xmas">xmas</option>
<option value="yes">yes</option>
<option value="zoo">zoo</option>
</select>
<pre class="out"></pre>
To set the selected values also requires no looping. Use the same jQuery .val() method.
$('select.items').val( ['apple','ape','boy','age','eagle'] );
$('button.set').on('click', function() {
$('select.items').val( ['apple','ape','boy','age','eagle'] );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="items" multiple="multiple" size="5">
<option value="apple">apple</option>
<option value="ant">ant</option>
<option value="ape">ape</option>
<option value="age">age</option>
<option value="boy">boy</option>
<option value="banana">banana</option>
<option value="carrot">carrot</option>
<option value="cat">cat</option>
<option value="daisy">daisy</option>
<option value="desk">desk</option>
<option value="elephant">elephant</option>
<option value="eagle">eagle</option>
<option value="fox">fox</option>
<option value="fat">fat</option>
<option value="goat">goat</option>
<option value="good">good</option>
<option value="gum">gum</option>
<option value="hut">hut</option>
<option value="hop">hop</option>
<option value="insect">insect</option>
<option value="ice">ice</option>
<option value="jump">jump</option>
<option value="kite">kite</option>
<option value="lamp">lamp</option>
<option value="lap">lap</option>
<option value="monkey">monkey</option>
<option value="mat">mat</option>
<option value="nature">nature</option>
<option value="nose">nose</option>
<option value="owl">owl</option>
<option value="pocket">pocket</option>
<option value="pick">pick</option>
<option value="quote">quote</option>
<option value="rabbit">rabbit</option>
<option value="run">run</option>
<option value="soft">soft</option>
<option value="sit">sit</option>
<option value="table">table</option>
<option value="toy">toy</option>
<option value="understand">understand</option>
<option value="vote">vote</option>
<option value="winter">winter</option>
<option value="xmas">xmas</option>
<option value="yes">yes</option>
<option value="zoo">zoo</option>
</select>
<button class="set">SET</button>