无法使用javascript在下拉菜单中设置值

Question

i am having trouble selecting an element from a drop down box. Here is the div

<div class="select ccMonth" id="payflow-form-ccMonth-select">
<select name="expMonth" class="month payflow-form-ccMonth-select   hidden" id="payflow-form-ccMonth-select-select">
<option value="Month">Month</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<span name="expirationMonthSpan">Month</span><ul>
<li data-index="0">Month</li>
<li data-index="1">1</li>
<li data-index="2">2</li>
</ul>
</div>

The div is returned correctly when i run this

document.getElementById('payflow-form-ccMonth-select-select');

However on Chrome when i try the below, it doesn't set value i want in the drop down box.

document.getElementById('payflow-form-ccMonth-select-select').selectedIndex=1;

I have also tried to get it in focus first with click() which expands the drop down box but it still won't work.

document.getElementById('payflow-form-ccMonth-select-select').click();
document.getElementById('payflow-form-ccMonth-select-select').selectedIndex=1;

I have also tried this which did not work either

document.getElementById('payflow-form-ccMonth-select-select').value = 1;

Any hints on what i may be missing? Thanks

Answer 1

Try:

  var dropdown = document.getElementById('payflow-form-ccMonth-select-select');
  dropdown.options[indexToSelect].selected = true;

Answer 2

I have checked your Code and its working Fine Check This .

The only Problem I can think is that your code is placed in head and it get executed before actual page is ready

you can try window.onload

window.onload = function(){
   document.getElementById('payflow-form-ccMonth-select-select').selectedIndex= 1;

}