-2
<div class="form-dropdown">

<select value="" aria-labelledby="timeWindows_label" aria-invalid="false" aria-required="true" aria-describedby="timeslot-error" class=" form-dropdown-select" id="timeWindows">

<option value="8-12:30-12:45">12:30 – 12:45</option>
<option value="8-12:45-13:00">12:45 – 13:00</option>
<option value="8-13:00-13:15">13:00 – 13:15</option>

I would like to select the option by js, but it failed.

I used document.getElementById('timeWindows').value = '8-12:30-12:45', it returns error (timeslot is not selected)

I also used document.getElementById('timeWindows')[1].selected = true, it's still the same.

The displayed option has been changed, but the code returns error and nothing changed.

The errored code is below

<div class=" is-error form-dropdown">
<select value="" aria-labelledby="timeWindows_label" aria-invalid="true" aria-required="true" aria-describedby="timeslot-error" class=" form-dropdown-select" id="timeWindows">

<option value="8-12:30-12:45">12:30 – 12:45</option>
<option value="8-12:45-13:00">12:45 – 13:00</option>
<option value="8-13:00-13:15">13:00 – 13:15</option>

This is the successful example when I use the mouse to click the option.

<div class="form-dropdown">
<select value="8-12:45-13:00" aria-labelledby="timeWindows_label" aria-invalid="false" aria-required="true" aria-describedby="timeslot-error" class=" form-dropdown-select" id="timeWindows">
<option value="8-12:30-12:45">12:30 – 12:45</option>
<option value="8-12:45-13:00" selected="true">12:45 – 13:00</option>
<option value="8-13:00-13:15">13:00 – 13:15</option>

I also found the timeslot error in the source, but I don't know what the code refers to.

"timeSlotNotSelectedError":{"microEvents":[{"key":"eVar25","value":"transaction.co.fulfillment.timeslot.error.timeslot_not_selected","slot":"Pickup"}]},
Vega
  • 25,886
  • 26
  • 85
  • 95
1063209890
  • 1
  • 1
  • 1
    Which error? `document` has neither a `getelementbyId` nor a `getelementbyid` method. Read the [documentation](//developer.mozilla.org/docs/Web/API/Document/getElementById). Is your ` – Sebastian Simon Oct 08 '21 at 03:34
  • Hi, thanks for your help. Sorry for my typing mistake. I have edited getElementbyId in my question. I have found the element by using document.getElementbyId('timeWindows').value = '8-12:30-12:45', but it returns 'is-error form-dropdown' when I submit. The value is not selected and aria-invalid="true" – 1063209890 Oct 08 '21 at 03:41
  • `getElementbyId` is still not correct. It’s `getElementById`. _What_ returns “is-error form-dropdown”? – Sebastian Simon Oct 08 '21 at 03:43
  • Thanks, when I submit the timeslot. The select element returns
    – 1063209890 Oct 08 '21 at 03:50
  • Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. – Community Oct 11 '21 at 21:39
  • 1
    Please don't vandalize your posts. By posting on the Stack Exchange network, you've granted a non-revocable right, under the [CC BY-SA 4.0 license](https://creativecommons.org/licenses/by-sa/4.0/), for Stack Exchange to distribute that content (i.e. regardless of your future choices). By Stack Exchange policy, the non-vandalized version of the post is the one which is distributed, and thus, any vandalism will be reverted. If you want to know more about deleting a post please see: [How does deleting work?](/help/what-to-do-instead-of-deleting-question). – cigien Oct 12 '21 at 04:18

1 Answers1

0

Check this jsfiddle: https://jsfiddle.net/zhuhang95/wjgra9fL/3/

Your code is working fine in jsFiddle. Make sure you use this method to change the option:

document.getElementById('timeWindows').selectedIndex = 0;

If your code looks exactly same, but you still get the error, then the problem is somewhere else in your code.

More info on how to select option using JS: https://stackoverflow.com/a/7373115/6122411

zhuhang.jasper
  • 3,602
  • 3
  • 16
  • 27