Блог

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

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

Вот так:

 <select onchange="alert(this.value);">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
  

Теперь, допустим, я сначала выбираю элемент 1.
Затем мне нужно снова иметь возможность выбрать элемент 1.

Эта функция чрезвычайно важна для успеха проекта, над которым я работаю.

Любая помощь приветствуется.

Редактировать: (Дополнительная информация)

Эта функциональность необходима, поскольку я работаю над проектом с картами Google, где пользователям предоставляется выпадающий список для быстрого перехода к стране (например, вы выбираете «Испания» в выпадающем списке, карты Google устанавливают Испанию в качестве вашего вида.

проблема возникает, когда вы хотите отправиться в Испанию, затем перетаскиваете карту и оказываетесь в Италии. Теперь вы хотите вернуться в Испанию, но вы не можете выбрать его из выпадающего списка, пока сначала не выберете что-то другое. Моему боссу это не нравится 🙂

Правка2: Решение

Итак, на данный момент есть несколько решений. Один из них заключается в том, чтобы выполнить действие onblur (при расфокусировке элемента управления), это могло сработать, поскольку я мог бы размыть список при изменении, но все же для людей, выбирающих тот же элемент снова, триггер для размытия элемента управления не сработает, и если они не переключат фокус самостоятельно, они не увидят изменений на карте.

Тем не менее, я не могу понять, почему должно быть так сложно найти какое-либо событие, которое вызывает выбор опции / щелчок / размытие или что-то еще.. я продолжу поиск сам и вернусь сюда чуть позже.

Правка 3: Окончательное решение

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

Решение, которое я придумал, состояло в том, чтобы добавить опцию «Пожалуйста, выберите страну» в верхней части выбора. Затем при изменении я бы изменил текст и значение «Пожалуйста, выберите страну» на значение выбранного элемента и сбросил selectedindex на 0. Таким образом, при выборе, скажем, Испании, он будет находиться в верхней части списка в отключенном состоянии и далее вниз в рабочем состоянии. итак, теперь вы можете щелкнуть по испании в середине списка, чтобы вернуться к испании, даже если она все еще выбрана (верхний элемент)

Довольно аккуратно, идея была предоставлена коллегой.

сценарий выглядит следующим образом:

    var dummyOption;
function setdummyCountry(obj)
{
    var selectedOption = obj.options[obj.selectedIndex];
    if (dummyOption != null) {
        dummyOption.text = selectedOption.text;
        dummyOption.value = selectedOption.value;
    }
    else {
        dummyOption = document.createElement("option");
        dummyOption.text = selectedOption.text;
        dummyOption.value = selectedOption.value;
        dummyOption.setAttribute("disabled", "true");
        obj.options[0] = dummyOption;
    }
    obj.selectedIndex = 0;
}

<select onchange="setdummyCountry(this);">
    <option value="">Please select country</option>
    <option value="ES">spain</option>
    <option value="SE">sweden</option>
    <option value="NO">norway</option>
</select>
  

я надеюсь, что это кому-нибудь поможет!

И тем, кто пытался мне помочь, спасибо за ваши идеи и время.

Я думаю, что событие изменения не сработает, если выбран тот же элемент. Мы столкнулись с той же проблемой, поэтому то, что мы сделали, было простым взломом удобства использования: когда элемент выбран, мы показываем пользователю элемент, выбранный в промежутке, и сбрасываем значение выпадающего списка на его значение по умолчанию (—Select—).

HTH

возможно, это не совсем то, что вы хотите, но это еще одна альтернатива, которую вы можете решить. после выбора параметра верните ему значение по умолчанию (пустой / первый)

 <select onchange="alert(this.value);this.value='';">
 <option value='' selected='selected'></option>
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
  

или вы можете сделать

 <select onblur="alert(this.value);">
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
  

но таким образом будет вызываться ваша функция (alert), когда пользователь покидает / размывает / расфокусирует список: p

Я искал решение для того же сценария и в итоге написал директиву angularjs для того же —

ссылка на guthub — angular select

Используется element[0].blur(); для удаления фокуса с тега select. Логика заключается в том, чтобы вызвать это размытие при втором нажатии на выпадающий список.

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

ДЕМОНСТРАЦИОННАЯ ссылка

вы можете использовать функцию onclick и вести подсчет для этого, как только вы дважды получите одно и то же target.value, тогда вы сможете выполнить свою функцию onchange там. Я реализовал это в Vue.js

Выберите блокировать:

                           <select
                            id="status"
                            name="status"
                            @change="
                              onChangeStatus(un.id, $event)
                            "
                            @click="
                              onChangeStatus(
                                un.id,
                                $event,
                                'same'
                              )
                            "
                            class="form-control"
                            :value="un.status"
                          >
                            <option value="Uncleaned">Uncleaned</option>
                            <option value="Partially Taken for cleaning">
                              Partially Taken for cleaning
                            </option>
                            <option value="Fully Taken for cleaning">
                              Fully Taken for cleaning
                            </option>
                          </select>
  

Изначально сохранялось значение count = 0.

Я использовал одну и ту же функцию для обоих событий, проверил условия и соответственно вернул данные

 onChangeStatus(id, e, type) {
  if (type === "same") {
    if (e.target.value === "Partially Taken for cleaning") {
      this.count  = 1;
      if (this.count === 2)
        this.$router.push({
          name: "NewPage",
          params: {
            id: id,
            status: e.target.value,
          },
        });
    }
  } else {
    this.$router.push({
      name: "NewPage",
      params: {
        id: id,
        status: e.target.value,
      },
    });
  }
},