Как вызвать событие, используя идентификатор в списке выбора - PullRequest
Новая
       15

Как вызвать событие, используя идентификатор в списке выбора

0 голосов
/ 02 июля 2019

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

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

       $(document).ready(function () {
            $("select").change(function () {
                $(this).find("option:selected").each(function () {
                    var optionValue = $(this).attr("value");
                    if (optionValue) {
                        $(".divToggle").not("." + optionValue).hide();
                        $("." + optionValue).show();
                    } else {
                        $(".divToggle").hide();
                    }
                });
            }).change();
        });

Это опции выбора: 

<select id="transferOptions" class="form-control" name="transferoptions" aria-label="Transfer Options" tabindex="">
    <option value="fundTransferOption" selected>Select an Option</option>
    <option value="achTransfer">ACH Transfer</option>
    <option value="flashFundsTransfer">Flash Transfer</option>
</select>
<select id="ConflictingSelectOptionsAlsoCausingDIVToggling">
    <option>Choose</option>
    <option>Blah</option>
    <option>Blah 2</option>
</select>

<div class="achTransfer divToggle">On select show Thing 1</div>
<div class="flashFundsTransfer divToggle">On select show Thing 2</div>

Я хочу использовать приведенный выше Javascript для специальной работы со списком выбора, который использует "id =" TransferOptions ", поэтому, поскольку я добавляю другие списки выбора в код, он не будет конфликтовать со списком выбора transferOption, таким образом запуск DIV на странице.

Ответы [ 2 ]

1 голос
/ 02 июля 2019

Используйте идентификатор выбора с его селектором CSS #transferOptions.Также изменена логика для проверки: 

$(document).ready(function() {
  $("#transferOptions").change(function() {
    var optionValue = $(this).val(); // or use javascript: this.value
    $(".divToggle").hide(); // hide all .divToggle elements

    if (optionValue) { // in your example this is always true
      $("." + optionValue).show(); // show the matching element
    }
  }).change(); // trigger change after document is ready
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="transferOptions" class="form-control" name="transferoptions" aria-label="Transfer Options" tabindex="">
  <option value="fundTransferOption" selected>Select an Option</option>
  <option value="achTransfer">ACH Transfer</option>
  <option value="flashFundsTransfer">Flash Transfer</option>
</select>
<select id="ConflictingSelectOptionsAlsoCausingDIVToggling">
  <option>Choose</option>
  <option>Blah</option>
  <option>Blah 2</option>
</select>

<div class="achTransfer divToggle">On select show Thing 1</div>
<div class="flashFundsTransfer divToggle">On select show Thing 2</div>
1 голос
/ 02 июля 2019

Вы можете получить элемент, на который ссылается событие, используя event.target вместо this, который в вашем случае ссылается на функцию обратного вызова, см. Пример ниже: 

$('select').change(event => {
  console.log(event.target.id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select1">
  <option>foo</option>
  <option>bar</option>
  <option>baz</option>
</select>

<select id="select2">
  <option>quux</option>
  <option>xyzzy</option>
</select>
...