Selecting value return wrong value - javascript

I have Select in my View
Here is code
<li class="airline">
<select name="search[airline]" id="search_airline" class="custom" style="display: none;">
<option value="">Alla</option>
<option value="SK">SAS</option>
<option value="DY">Norwegian</option>
<option value="EI">Aer Lingus</option>
<option value="SU">Aeroflot</option>
<option value="AR">Aerolineas Argentinas</option>
<option value="AM">Aeromexico</option>
<option value="BT">Air Baltic</option>
<option value="AC">Air Canada</option>
<option value="CA">Air China</option>
<option value="UX">Air Europa</option>
<option value="AF">Air France</option>
<option value="AI">Air India</option>
<option value="NZ">Air New Zealand</option>
<option value="AZ">Alitalia</option>
<option value="NH">All Nippon Airways</option>
<option value="AA">American Airlines</option>
<option value="OS">Austrian Airlines</option>
<option value="VO">Austrian Arrows</option>
<option value="BA">British Airways</option>
<option value="BD">British Midland</option>
<option value="SN">Brussels Airlines</option>
<option value="CX">Cathay Pacific</option>
<option value="CO">Continental Airlines</option>
<option value="OK">Czech Airlines</option>
<option value="DL">Delta Airlines</option>
<option value="EK">Emirates</option>
<option value="EY">Etihad Airways</option>
<option value="AY">Finnair</option>
<option value="GA">Garuda Indonesia</option>
<option value="IB">Iberia</option>
<option value="FI">Icelandair</option>
<option value="KL">KLM</option>
<option value="KE">Korean Air Lines</option>
<option value="LA">LAN Airlines</option>
<option value="LO">LOT - Polish Airlines</option>
<option value="NG">Lauda Air</option>
<option value="LH">Lufthansa</option>
<option value="DM">Maersk Air</option>
<option value="MH">Malaysian Airlines</option>
<option value="TF">Malmö Aviation</option>
<option value="MX">Mexicana Airlines</option>
<option value="NW">Northwest Airlines</option>
<option value="DY">Norwegian</option>
<option value="OA">Olympic Airways</option>
<option value="QF">Qantas Airways</option>
<option value="QR">Qatar Airways</option>
<option value="SK">SAS</option>
<option value="SQ">Singapore Airlines</option>
<option value="SA">South African Airways</option>
<option value="LX">Swiss Intl Air Lines</option>
<option value="TP">TAP Portugal</option>
<option value="TG">Thai Airways</option>
<option value="TK">Turkish Airlines</option>
<option value="UA">United Airlines</option>
<option value="VS">Virgin Atlantic Airw.</option>
<option value="VY">Vueling</option>
<option value="WF">Wideroe</option>
</select>
<span tabindex="0" id="search_airline-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="search_airline-menu" aria-haspopup="true" class="ui-selectmenu-button ui-selectmenu-button-closed ui-corner-all ui-button ui-widget"><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span>
<span class="ui-selectmenu-text">Flygbolag: Alla</span>
</span>
</li>
Also I have function in TS that make variable in it with word - "Flygbolag"
Here is it
function update_search_airline() {
$(".ui-selectmenu-text", $("#search_airline-button")).html(
__("Flygbolag") + ": " + $(".ui-selectmenu-text", $("#search_airline-button")).html());
}
So when I load page all okay and I get for example
But when I select value from this select I need to make it with this word too
So in function I make this code
function load_field_actions(): void {
$(".tooltip").tooltipster()
$("#search_airline").change(update_search_airline)
}
And this row must update it correctly
$("#search_airline").change(update_search_airline)
But it just change default value to next value without Flygbolag

Related

Change dropdown options using javascript on Apple.com SOLVE THIS LUNCH ON ME

Trying to change selected options using javascript, but for some reason doesn't work. Voyaged all over the internet to find a solution but couldn't find one. Help Needed !
To get the to Source code go to
https://www.apple.com/shop/trade-in, at
"Select your device to get a trade-in estimate"
Select Smartphone, Apple, iPhone XS MAX, Select Yes for good condition,
Select Box "Trade in for gift Card".
Then you should see a form field, and that darn default state option wont change for me dynamically, using javascript in the console.
Now try to change the state in console to MA (Massachusetts).
It is currently default 'state'.
First person to solve this lunch is on me, dropdown your PayPal email.
Or send your email address to arizona777#gmail.com. Thank you !
:)
Source Code :
<select aria-required="true" aria-describedby="tradeUp.shipping.moduleData.address-state-error"
aria-invalid="false" data-autom="address-field-state" value=""
data-recon-click="binding,actionClick,tradeUp.shipping.moduleData.address.state,binding"
data-recon-mouseover="binding,actionMouseOver,tradeUp.shipping.moduleData.address.state,binding"
data-recon-mouseout="binding,actionMouseOut,tradeUp.shipping.moduleData.address.state,binding"
data-recon-input="binding,setValue,tradeUp.shipping.moduleData.address.state,binding"
data-recon-change="binding,setValue,tradeUp.shipping.moduleData.address.state,binding"
data-recon-focusin="binding,setFocus,tradeUp.shipping.moduleData.address.state,binding"
data-recon-focusout="binding,clearFocus,tradeUp.shipping.moduleData.address.state,binding"
id="tradeUp.shipping.moduleData.address-state" required=""
class="form-dropdown form-dropdown-selectnone">
<option value="" selected="true">State</option>
<option value="AA">AA</option>
<option value="AE">AE</option>
<option value="AP">AP</option>
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="AS">AS</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="DC">DC</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="GU">GU</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="MP">MP</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="PI">PI</option>
<option value="PR">PR</option>
<option value="PW">PW</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="US">US</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="VI">VI</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option>
</select>

Edit:
I now managed to get to the dialog mentioned. If you execute the following in the console you should be able to change the state to 'MA'
ch=new MouseEvent('change', {view:window,bubbles:true});
s=document.getElementById('tradeUp.shipping.moduleData.address-state');
s.value='MA';
s.dispatchEvent(ch);
It looks like the bootstrap surroundings of the select box expect a change event, which we can generate with the above commands.
After some further testing I found that {bubbles:true} is sufficient as the "option" argument in the above code (you could leave out the view:window part).
In case you had problems in addressing the select element with its unusual id: you need to mask the . characters in it, since otherwise they would be interpreted as special characters indicating class identifiers. So, the selector for document.querySelector() needs to be something like '#tradeUp\\.shipping\\.moduleData\\.address-state'.
In some further lines below you will find a way of changing the current selection of the select element. In this case I changed it to 'MA'.
document.querySelector('#change').addEventListener('click',function(){
document.querySelector('#tradeUp\\.shipping\\.moduleData\\.address-state').innerHTML=
['abc','def','ghi','jki','lmn'].map(function(s){return '<option>'+s+'</option>';}).join('');
})
// in case you wanted to change the value of the
// select programmatically, do the following:
document.querySelector('#tradeUp\\.shipping\\.moduleData\\.address-state').value='MA';
<select aria-required="true" aria-describedby="tradeUp.shipping.moduleData.address-state-error"
aria-invalid="false" data-autom="address-field-state" value=""
data-recon-click="binding,actionClick,tradeUp.shipping.moduleData.address.state,binding"
data-recon-mouseover="binding,actionMouseOver,tradeUp.shipping.moduleData.address.state,binding"
data-recon-mouseout="binding,actionMouseOut,tradeUp.shipping.moduleData.address.state,binding"
data-recon-input="binding,setValue,tradeUp.shipping.moduleData.address.state,binding"
data-recon-change="binding,setValue,tradeUp.shipping.moduleData.address.state,binding"
data-recon-focusin="binding,setFocus,tradeUp.shipping.moduleData.address.state,binding"
data-recon-focusout="binding,clearFocus,tradeUp.shipping.moduleData.address.state,binding"
id="tradeUp.shipping.moduleData.address-state" required=""
class="form-dropdown form-dropdown-selectnone">
<option value="" selected="true">State</option><option value="AA">AA</option>
<option value="AE">AE</option>
<option value="AP">AP</option>
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="AS">AS</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="DC">DC</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="GU">GU</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="MP">MP</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="PI">PI</option>
<option value="PR">PR</option>
<option value="PW">PW</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="US">US</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="VI">VI</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option>
</select>
<button id="change">change options</button>

IE11 crashes when use onmousedown, onchange, onblur together

Unfortunately the limited height <select> dropdown crashing when clicked in dropdown in Internet Explorer 11 (IE11) which use onmousedown, onchange and onblur
<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}" onchange="this.size=0;" onblur="this.size=0;">
Demo: https://codepen.io/anon/pen/LBveJp
<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}" onchange="this.size=0;" onblur="this.size=0;">
<option value="">0001</option>
<option value="">0002</option>
<option value="">0003</option>
<option value="">0004</option>
<option value="">0005</option>
<option value="">0006</option>
<option value="">0007</option>
<option value="">0008</option>
<option value="">0009</option>
<option value="">0010</option>
<option value="">0011</option>
<option value="">0012</option>
<option value="">0013</option>
<option value="">0014</option>
<option value="">0015</option>
<option value="">0016</option>
<option value="">0017</option>
<option value="">0018</option>
<option value="">0019</option>
<option value="">0020</option>
<option value="">0021</option>
<option value="">0022</option>
<option value="">0023</option>
<option value="">0024</option>
<option value="">0025</option>
<option value="">0026</option>
<option value="">0027</option>
<option value="">0028</option>
<option value="">0029</option>
<option value="">0030</option>
<option value="">0031</option>
<option value="">0032</option>
<option value="">0033</option>
<option value="">0034</option>
<option value="">0035</option>
<option value="">0036</option>
<option value="">0037</option>
<option value="">0038</option>
<option value="">0039</option>
<option value="">0040</option>
<option value="">0041</option>
<option value="">0042</option>
<option value="">0043</option>
<option value="">0044</option>
<option value="">0045</option>
<option value="">0046</option>
<option value="">0047</option>
<option value="">0048</option>
<option value="">0049</option>
<option value="">0050</option>
<option value="">0051</option>
<option value="">0052</option>
<option value="">0053</option>
<option value="">0054</option>
<option value="">0055</option>
<option value="">0056</option>
<option value="">0057</option>
<option value="">0058</option>
<option value="">0059</option>
<option value="">0060</option>
<option value="">0061</option>
<option value="">0062</option>
<option value="">0063</option>
<option value="">0064</option>
<option value="">0065</option>
<option value="">0066</option>
<option value="">0067</option>
<option value="">0068</option>
<option value="">0069</option>
<option value="">0070</option>
<option value="">0071</option>
<option value="">0072</option>
<option value="">0073</option>
<option value="">0074</option>
<option value="">0075</option>
<option value="">0076</option>
<option value="">0077</option>
<option value="">0078</option>
<option value="">0079</option>
<option value="">0080</option>
<option value="">0081</option>
<option value="">0082</option>
<option value="">0083</option>
<option value="">0084</option>
<option value="">0085</option>
<option value="">0086</option>
<option value="">0087</option>
<option value="">0088</option>
<option value="">0089</option>
<option value="">0090</option>
<option value="">0091</option>
<option value="">0092</option>
<option value="">0093</option>
<option value="">0094</option>
<option value="">0095</option>
<option value="">0096</option>
<option value="">0097</option>
<option value="">0098</option>
<option value="">0099</option>
<option value="">0100</option>
<option value="">0101</option>
<option value="">0102</option>
<option value="">0103</option>
<option value="">0104</option>
<option value="">0105</option>
<option value="">0106</option>
<option value="">0107</option>
<option value="">0108</option>
<option value="">0109</option>
<option value="">0110</option>
<option value="">0111</option>
<option value="">0112</option>
<option value="">0113</option>
<option value="">0114</option>
<option value="">0115</option>
<option value="">0116</option>
<option value="">0117</option>
<option value="">0118</option>
<option value="">0119</option>
<option value="">0120</option>
<option value="">0121</option>
<option value="">0122</option>
<option value="">0123</option>
<option value="">0124</option>
<option value="">0125</option>
<option value="">0126</option>
<option value="">0127</option>
<option value="">0128</option>
<option value="">0129</option>
<option value="">0130</option>
<option value="">0131</option>
<option value="">0132</option>
<option value="">0133</option>
<option value="">0134</option>
<option value="">0135</option>
<option value="">0136</option>
<option value="">0137</option>
<option value="">0138</option>
<option value="">0139</option>
<option value="">0140</option>
<option value="">0141</option>
<option value="">0142</option>
<option value="">0143</option>
<option value="">0144</option>
<option value="">0145</option>
<option value="">0146</option>
<option value="">0147</option>
<option value="">0148</option>
<option value="">0149</option>
<option value="">0150</option>
</select>

Make your listeners passive.
I'm not so sure but try to attach those listeners using Javascript, instead of doing it directly in HTML and then make those listeners passive. That might fix your issue. Read more about passive event listening here.

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.

multiple drop down <select> menus with only one selectable at a time

I have 4 <select> drop down menus with corresponding values that interact with the iframe on my website. The issue is that I want to only allow one drop down to be selectable at a time and for the other drop down menus to return to the original value when the website first opened. After researching for solutions I was not able to find any online. Below I will include the code for the drop down menus.
<script>
var gST = ""
function set_st(t) {
var sel_el = t.options[t.selectedIndex]
gST = sel_el.value
document.getElementById('my-iframe').src = 'http://watermonitor.gov/naww/index.php?st=' + gST
}
function down_ch() {
var link = "http://waterwatch.usgs.gov/download/?gt=map&st="+gST+"&ofmt=kmr&x=0";
window.open(link)
}
function setURL(url){
document.getElementById('my-iframe').src = url;
}
</script>
<header>
<div id='map_container' style="margin-top: 100px; border: 0px solid red; text-align: center;">
<div id="xbuilder">
<table>
<tbody>
<tr>
<td>
<div>
United States:
<span data-tooltip='Choose a US state'>
<select name='usst' id='usst' size='1' onchange='javascript:set_st(this);' >
<option value=''>States</option>
<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>
<option value='ky'>Kentucky</option>
<option value='la'>Louisiana</option>
<option value='me'>Maine</option>
<option value='md'>Maryland</option>
<option value='ma'>Massachusetts</option>
<option value='mi'>Michigan</option>
<option value='mn'>Minnesota</option>
<option value='ms'>Mississippi</option>
<option value='mo'>Missouri</option>
<option value='mt'>Montana</option>
<option value='ne'>Nebraska</option>
<option value='nv'>Nevada</option>
<option value='nh'>New Hampshire</option>
<option value='nj'>New Jersey</option>
<option value='nm'>New Mexico</option>
<option value='ny'>New York</option>
<option value='nc'>North Carolina</option>
<option value='nd'>North Dakota</option>
<option value='oh'>Ohio</option>
<option value='ok'>Oklahoma</option>
<option value='or'>Oregon</option>
<option value='pa'>Pennsylvania</option>
<option value='ri'>Rhode Island</option>
<option value='sc'>South Carolina</option>
<option value='sd'>South Dakota</option>
<option value='tn'>Tennessee</option>
<option value='tx'>Texas</option>
<option value='ut'>Utah</option>
<option value='vt'>Vermont</option>
<option value='va'>Virginia</option>
<option value='wa'>Washington</option>
<option value='wv'>West Virginia</option>
<option value='wi'>Wisconsin</option>
<option value='wy'>Wyoming</option>
<option value='pr'>Puerto Rico</option>
</select>
</span>
<span data-tooltip='Choose a US water resource region'>
<select name='ushuc' id='ushuc' size='1' onchange='javascript:set_st(this);' >
<option value=''>Water Res. Region</option>
<option value='01'>01 New England</option>
<option value='02'>02 Mid Atlantic</option>
<option value='03'>03 South Atlantic-Gulf</option>
<option value='04'>04 Great Lakes</option>
<option value='05'>05 Ohio</option>
<option value='06'>06 Tennessee</option>
<option value='07'>07 Upper Mississippi</option>
<option value='08'>08 Lower Mississippi</option>
<option value='09'>09 Souris-Red-Rainy</option>
<option value='10'>10 Missouri</option>
<option value='11'>11 Arkansas-White-Red</option>
<option value='12'>12 Texas-Gulf</option>
<option value='13'>13 Rio Grande</option>
<option value='14'>14 Upper Colorado</option>
<option value='15'>15 Lower Colorado</option>
<option value='16'>16 Great Basin</option>
<option value='17'>17 Pacific Northwest</option>
<option value='18'>18 California</option>
<option value='19'>19 Alaska</option>
<option value='20'>20 Hawaii</option>
<option value='21'>21 Puerto Rico</option>
</select>
</span>
</div>
<button class="button" onClick="javascript:down_ch();"><span class="icon">Download Data</span></button>
</td>
</tr>
<tr>
<td>
<div>
Canada:
<span data-tooltip='Choose a Canadian province'>
<select name='nus' id='nus' size='1' onchange='javascript:set_st(this);' >
<option value=''>Provinces</option>
<option value='zab'>Alberta</option>
<option value='zbc'>British Columbia</option>
<option value='zmb'>Manitoba</option>
<option value='znb'>New Brunswick</option>
<option value='znl'>Newfoundland and Labrador</option>
<option value='zns'>Nova Scotia</option>
<option value='znt'>Northwest Territories</option>
<option value='znu'>Nunavut</option>
<option value='zon'>Ontario</option>
<option value='zpe'>Prince Edward Island</option>
<option value='zqc'>Quebec</option>
<option value='zsk'>Saskatchewan</option>
<option value='zyt'>Yukon</option>
</select>
</span>
<span data-tooltip='Choose a Canadian river basin'>
<select name='nhuc' id='nhuc' size='1' onchange='set_st(this);' >
<option value=''>Canadian River Basins</option>
<option value='z01'>01 Maritime Provinces Drainage</option>
<option value='z02'>02 St.Lawrence River Drainage</option>
<option value='z03'>03 Northern Quebec Drainage</option>
<option value='z04'>04 Southwest Hudson Bay Drainage</option>
<option value='z05'>05 Nelson River Drainage</option>
<option value='z06'>06 Western Hudson Bay Drainage</option>
<option value='z07'>07 Great Slave Lake Drainage</option>
<option value='z08'>08 Pacific Drainage</option>
<option value='z09'>09 Yukon River Drainage</option>
<option value='z10'>10 Arctic Drainage</option>
<option value='z11'>11 Mississippi River Drainage</option>
</select>
</span>
</div>
<div style='margin-left: 10px; float: right;' data-tooltip="Click to view a map of specified region."><input value="Reset Map" type="button" onclick="setURL('http://watermonitor.gov/naww/index.php')"/></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</header>

You can probably achieve this with events. E.g. when the first drop down list is opened, then set all of the others to disabled:
http://html.com/attributes/select-disabled/
You could do that with jquery like this:
$(ele).attr(disabled, disabled);
For the events, check out this:
http://api.jquery.com/category/events/
look up the change event, once the event fires you'll need to set the other drop down lists to the original value e.g.:
$(ele).val('0');
You may want to update your question with what should happen when the page loads, and then what should happen when you open drop down lists on the page.

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';

Categories