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

Issue

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>

Solution

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>

Answered By - Carsten Massmann