В чем ошибка в коде js?

Question

[BoriHagen]

Есть код:

<select name="orderStatus" id="orderStatus" class="main__order-meta-data__order-status">
					<script>
						function checkStatus(){
							var status = document.getElementsByClassName("option").innerText;
							console.log(status);
							for (var i = 0; i < status.length; i++) {
								if ("<?echo $orders_data['order_status']?>" == status[i]){
									status[i].setAttribute('selected');
								} else {
									return false;
								}
							}
							
						}
					</script>
					<option class="option" onload="checkStatus()">Новый</option>
					<option class="option" onload="checkStatus()">Нужен доп звонок</option>
					<option class="option" onload="checkStatus()">Готов к отправке</option>
					<option class="option" onload="checkStatus()">Отправлен</option>
					<option class="option" onload="checkStatus()">Доставлен</option>
					<option class="option" onload="checkStatus()">Выкуплен</option>
				</select>

Логика работы следующая: в БД есть таблица с данными заказа. Есть поле статуса заказа. На странице заказа есть тег select который позволяет выбрать статус заказа. Мне нужно чтобы при открытии страницы заказа был выбран статус, который указан в БД. Для этого я написал скрипт, который собирает значения всех тегов option и сравнивает их со значением из БД. Если совпадение находится - он добавляет к нужному option атрибут selected. Но код не работает.

Дебажил консоль логами, видимо я как то неправильно получаю сами значения элементов. Перерыл уже кучу сайтов.

Answer 1

[galaxy]

Если есть пхп, на кой еще что-то перебирать джаваскриптом? Почему нельзя поставить атрибут selected у нужного option через php?

<option class="option" <?if ($orders_data['order_status'] == "Новый"):?>selected<?endif?>>Новый</option>

Answer 2

[Денис Инешин]

Сходу ошибка:

document.getElementsByClassName("option") // вернет коллекцию элементов а не один элемент

Comments

[BoriHagen]

Мне как раз таки и нужна коллекция, а не один элемент

[Дмитрий Беляев]

BoriHagen, у коллекции нет свойства innerText, только у отдельных элементов, поэтому нужно итерировать

Answer 3

[anakondoz]

Попробуйте так, status innerText уже при сравнении

let status = document.getElementsByClassName('option');
console.log(status);
for (var i = 0; i < status.length; i++) {
  if ("Новый" == status[i].innerText){
    status[i].setAttribute('selected', '');
    console.log(status[i].innerText);
  }
}

Песочница