Блог

Главная - Вопросы по программированию - Листовка easyButton; Трудности с установкой выпадающего списка на предопределенную опцию

Листовка easyButton; Трудности с установкой выпадающего списка на предопределенную опцию

#javascript #leaflet #jquery-selectors #dom-manipulation

#javascript #листовка #jquery-селекторы #dom-манипуляция

Вопрос:

Я пытаюсь создать экземпляр easyButton, который изменяет значение выпадающего списка на определенный параметр. Метод, который я использую для изменения значения параметра, работает вне экземпляра easyButton в другом месте кода. easyButton также выводит ожидаемые значения на консоль и в остальном работает нормально. Если используется для вызова другой функции, эта функция выполняется, но по-прежнему не изменяет значение выпадающего списка. Я действительно не уверен, почему это происходит и как это исправить. Упрощенные фрагменты кода выглядят следующим образом:

HTML; Выпадающий список

 <select id="select">
    <option id="1">Option 1</option>
    <option id="2">Option 2</option>
    <option id="3">Option 3</option>
</select>

JS скрипт; Листовка easyButton.

     L.easyButton('<img src="./images/HomeIcon.png">', function(btn, map){
        $("#select option[id=3]").attr('selected', 'selected');
    }).addTo(mymap);

Главное, что нужно подчеркнуть, это то, что селектор, $("#select option[id=5]").attr('selected', 'selected'); , работает до тех пор, пока я не вставлю его в листовку easyButton.

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

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

1. Вы не закрываете выделение jquery с помощью a " это опечатка в вопросе или в вашем коде? Это должно быть: $("#select option[id=3]").attr('selected', 'selected');

2. Прошу прощения, это была опечатка во время моего упрощения проблемы. К сожалению, это не причина. Я только что обновил его.

3. Для меня это работает: jsfiddle.net/falkedesign/nzrbpw6v

4. ОК. Это действительно интересно. Это работает до тех пор, пока вы не измените значение вручную, скажем, на 2, но затем оно перестает работать. Я не замечал этого раньше, поскольку он уже начинается с id = 3 в моей родной задаче (например, это кнопка «Домой», а страница начинается с «Домой»). Есть идеи, почему он перестает работать?

Ответ №1:

Измените идентификатор на значение:

 <select id="select">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

А затем вызовите:

   L.easyButton('<img src="./images/HomeIcon.png">', function(btn, map){
        $("#select").val(3)
  }).addTo(map);

https://jsfiddle.net/falkedesign/nzrbpw6v/

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

1. Я просто что-то пробую, так как это явно исправление, но я не могу вставить его напрямую из-за нескольких сложностей. Я отчитаюсь, я просто хотел сообщить вам, что я не ушел в самоволку.

2. Спасибо. Я не уверен, почему исходное решение перестало работать после ручного изменения выпадающего списка, но это решение работает отлично.

Метки: