Question

我有一个触发DIV标签可见性的选择列表，效果很好，但是一旦添加了新的选择列表，它便开始与第一个列表发生冲突。我需要能够使用第一个列表来独立于代码中的任何其他列表来触发切换事件。

我要使用带有特定ID的选择列表来正确切换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。

Answer 1

您可以使用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>

Answer 2

使用选择ID及其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>

如何使用“选择”列表中的ID触发事件

2 个答案: