Как проверить, выбрал ли я один и тот же параметр раскрывающегося списка два раза подряд? - PullRequest
Новая
       36

Как проверить, выбрал ли я один и тот же параметр раскрывающегося списка два раза подряд?

0 голосов
/ 06 марта 2020

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

Я могу, с помощью JavaScript, сохранить значение выбранной опции в переменной следующим образом: 

var checkValue = function(){
  const mySelect = document.getElementById("cars");
  let currentValue =  mySelect.options[ mySelect.selectedIndex ].value;
  console.log(currentValue);
}
<select id="cars" onchange="checkValue()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Вопросы:

  1. Как я могу проверить, выбрал ли я тот же дроп- опцию вниз списка два раза подряд, другими словами, если значение currentValue имеет изменилось ?

  2. Будет ли использование AngularJS сделать это задача проще? Как?

Ответы [ 3 ]

1 голос
/ 06 марта 2020 

var arr = [];
var checkValue = function() {
  const mySelect = document.getElementById("cars");
  let currentValue = mySelect.options[mySelect.selectedIndex].value;

  if ($.inArray(currentValue, arr) != "-1") {
    console.log("already selected");
  } else {
    arr.push(currentValue);
    console.log(currentValue);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<select id="cars" onchange="checkValue()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
1 голос
/ 06 марта 2020

Возможно, вы ищете событие onclick, а затем проверьте, совпадает ли значение: 

var checkValue = function(){
  let mySelect = document.getElementById("cars").options;
  let currentValue =  mySelect[ mySelect.selectedIndex ].value;
  if (currentValue === previousValue) {
    console.log("The same option was selected");
  } else {
    console.log("Different option");
  }
  previousValue = currentValue;
}

let select = document.getElementById("cars").options;
let previousValue = select[select.selectedIndex].value;
<select id="cars">
  <option value="volvo" onclick="checkValue(this)">Volvo</option>
  <option value="saab" onclick="checkValue(this)">Saab</option>
  <option value="opel" onclick="checkValue(this)">Opel</option>
  <option value="audi" onclick="checkValue(this)">Audi</option>
</select>
0 голосов
/ 06 марта 2020

Примером запуска события на элементе select дважды подряд может быть добавление события click вместо события change, я думал о MutationObserver , но, похоже, это не срабатывает при прослушивании опций изменить, если его уже выбранная проверка здесь 

var activities = document.getElementById("activitySelector");

activities.addEventListener("click", function() {
    console.log('selected item');
});
<select id="activitySelector">
  <option value="addNew">Item</option>
  <option value="1">option 1</option>
</select>

с событием щелчка вы можете сделать это: 

let selectedoptions = [];
var clickListener = function(){
  const mySelect = document.getElementById("cars");
  let currentValue =  mySelect.options[ mySelect.selectedIndex ].value;
  if(selectedoptions.indexOf(currentValue) < 0) {
    selectedoptions.push(currentValue);
  }
  else {
    console.log('selected before');
  }
  //console.log(currentValue);
}
<select id="cars" onclick="clickListener()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
...