Dynami c select работает только в первый раз и больше не работает в тривиальном примере jQuery - PullRequest
Новая
       0

Dynami c select работает только в первый раз и больше не работает в тривиальном примере jQuery

0 голосов
/ 04 апреля 2020 

$(document).ready(function () {
  $("#block_1").change((e) => {
    console.log("block_1 select ", e.target.value);

    $("#children_1")
      // .find("[value!='" + e.target.value + "']")
      .find("option")
      .removeAttr("selected");
    $("#children_1")
      .find("[value='" + e.target.value + "']")
      .attr("selected", true);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/script.js"></script>
  </head>
  <body style="padding: 50px;">

    <select id="block_1">
      <option value="">Please select</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>
      <option value="5">Five</option>
      <option value="6">Six</option>
      <option value="7">Seven</option>
      <option value="8">Eight</option>
      <option value="9">Nine</option>
    </select>

    <div id="children_1" for="1" style="padding: 10px 50px;">
      <select>
        <option value=""></option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <select>
        <option value=""></option>
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
      </select>
      <select>
        <option value=""></option>
        <option value="7">Seven</option>
        <option value="8">Eight</option>
        <option value="9">Nine</option>
      </select>
    </div>

    <hr />
  </body>
</html>

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

1 Ответ

2 голосов
/ 04 апреля 2020

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

Вместо этого используйте .prop('selected', true) или .prop('selected', false)

$(document).ready(function () {
  $("#block_1").change((e) => {
    console.log("block_1 select ", e.target.value);

    $("#children_1")
      // .find("[value!='" + e.target.value + "']")
      .find("option")
      .prop("selected", false);
    $("#children_1")
      .find("[value='" + e.target.value + "']")
      .prop("selected", true);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/script.js"></script>
  </head>
  <body style="padding: 50px;">

    <select id="block_1">
      <option value="">Please select</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>
      <option value="5">Five</option>
      <option value="6">Six</option>
      <option value="7">Seven</option>
      <option value="8">Eight</option>
      <option value="9">Nine</option>
    </select>

    <div id="children_1" for="1" style="padding: 10px 50px;">
      <select>
        <option value=""></option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <select>
        <option value=""></option>
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
      </select>
      <select>
        <option value=""></option>
        <option value="7">Seven</option>
        <option value="8">Eight</option>
        <option value="9">Nine</option>
      </select>
    </div>

    <hr />
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...