Блог

Главная - Вопросы по программированию - Не удается установить выбранный индекс в html с помощью javascript

Не удается установить выбранный индекс в html с помощью javascript

#javascript

#javascript

Вопрос:

Это мой Javascript:

     var productId=this.dataset.product
    var action=this.dataset.action
    var a = document.getElementById(productId);
    var size = a.options[a.selectedIndex].value;
    var l = toString(document.getElementById(productId).selectedIndex);
    a.selectedIndex=l;
    updateUserOrder(productId, action, size)

В этом случае я могу правильно получить ProductID, action, a, size, l, но я не могу установить выбранный впоследствии индекс. Когда пользователь на моем сайте нажимает на кнопку добавить, товар добавляется в корзину с правильным размером и всеми, а также страница обновляется. Но, как я пытался в моем коде, выбранный параметр не изменяется так, как я хочу, и остается значением по умолчанию (index = 0).

Это мой html для справки:

 <select class="selection-2 border" data-product={{product.id}}
               style="border: cadetblue;" name="size" id="{{product.id}}">
              
                <option value="S" id="S">S</option>
                <option value="M" id="M">M</option>
                <option value="L" id="L">L</option>
              
              </select>

Моя проблема заключается в том, что, например, пользователь выбирает опцию, которая находится во втором индексе, затем после обновления страницы (по мере выполнения моего кода) в поле выбора должен отображаться параметр по умолчанию как параметр со вторым индексом, который в данный момент не выполняется.

Комментарии:

1. Можете ли вы заменить код шаблона результирующим <select> и превратить это в исполняемый фрагмент кода для демонстрации?

2. @David Я настроил параметры на то, как это выглядит при выполнении кода

3. Изменения DOM не сохраняются после обновления страницы. Если вы хотите запомнить их выбор между обновлениями, укажите его в localStorage , а затем переназначьте при перезагрузке страницы.

4. @VATSALJAIN, если вы каким-то образом сохраняете корзину покупок, это означает, что информация уже доступна на разных страницах. Итак, в вашем коде, который используется для возврата корзины покупок, просто найдите этот размер в корзине и в цикле, который показывает параметры выбора, укажите оператор if, который говорит, совпадает ли сохраненный размер, добавьте selected к этому параметру.

5. @VATSALJAIN, я не знаю синтаксиса / возможностей шаблонов, которые вы используете, ни структуры переменных, но это псевдокод, который вы можете использовать в качестве руководства: {% for t in product.size.all %} if({{t}} == product.size){ selected = "selected" } else{ selected = "" } <option {{selected}} value="{{t}}" id="{{t}}">{{t}}</option> {% endfor %}