Блог

Главная - Вопросы по программированию - Автоматическое заполнение данных в селекторе на основе другого селектора?

Автоматическое заполнение данных в селекторе на основе другого селектора?

#javascript #html #css

#javascript #HTML #css

Вопрос:

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

Но как я могу сделать так, чтобы, если я выберу, скажем, «A1» из первого селектора во 2-м, были видны только «B1-B3» и «C1-C6», а затем, если я также выберу значение для B, я хочу сделать так, чтобы в селекторе n3 было видно только значение C, соответствующее Ax и Bx.

Какое-то автозаполнение на основе содержимого строк.

JS

 $(document).ready(function() {
    $('#selectContainer select').change(function() {
      const filter = [$('#selA').val(), $('#selB').val(), $('#selC').val()];
      $('#table tr').each(function() {
        $(this).show();
        $('td', this).each(function(i) {
          const text = $(this).text().toLowerCase();
          if (text.indexOf(filter[i]) === -1) {
            $(this).closest('tr').hide();
          }
        })
      })
    });
  });

HTML

 <!doctype html>
<html lang="en">
  <head>
    <!-- Req meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">

    <title>Tema 2</title>
  </head>
  <body>
      <script src="http://code.jquery.com/jquery-3.4.0.js"integrity="sha256-DYZMCC8HTC QDr5QNaIcfR7VSPtcISykd 6eSmBW5qo="crossorigin="anonymous"></script>
    <div class="row align-center">
        <div class="col-lg-4 col-centered shadow p-3 mb-5 bg-white rounded">
            <h1>Tema 2</h1>
          <div  id="selectContainer">
            <span>A:</span><select id="selA">
                <option value="">Toate</option>
                <option value="a1">A1</option>
                <option value="a2">A2</option>
                <option value="a3">A3</option>
              </select><br><br>
              <span>B:</span><select id="selB">
                  <option value="">Toate</option>
                  <option value="b1">B1</option>
                  <option value="b2">B2</option>
                  <option value="b3">B3</option>
                  <option value="b4">B4</option>
                  <option value="b5">B5</option>
                  <option value="b6">B6</option>
                </select><br><br>
                <span>C:</span> <select id="selC">
                    <option value="">Toate</option>
                    <option value="c1">C1</option>
                    <option value="c2">C2</option>
                    <option value="c3">C3</option>
                    <option value="c4">C4</option>
                    <option value="c5">C5</option>
                    <option value="c6">C6</option>
                    <option value="c7">C7</option>
                    <option value="c8">C8</option>
                    <option value="c9">C9</option>
                    <option value="c10">C10</option>
                  </select> 
            </div>
          <table class="table table-bordered" id="table">
            <thead>
              <tr>
                <th>A</th>
                <th>B</th>
                <th>C</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>A1</td>
                <td>B1</td>
                <td>C1</td>
              </tr>
              <tr>
                <td>A1</td>
                <td>B1</td>
                <td>C2</td>
              </tr>
              <tr>
                <td>A1</td>
                <td>B1</td>
                <td>C3</td>
                </tr>
              <tr>
                <td>A1</td>
                <td>B2</td>
                <td>C4</td>
              </tr>
              <tr>
                <td>A1</td>
                <td>B2</td>
                <td>C5</td>
            </tr>
             <tr>
              <td>A1</td>
              <td>B3</td>
              <td>C6</td>
            </tr>
            <tr>
              <td>A2</td>
              <td>B4</td>
              <td>C7</td>
            </tr>
            <tr>
              <td>A2</td>
              <td>B5</td>
              <td>C8</td>
            </tr>  
            <tr>
               <td>A2</td>
               <td>B5</td>
               <td>C9</td>
            </tr>
            <tr>
              <td>A3</td>
              <td>B6</td>
              <td>C10</td>
            </tr>

            </tbody>
          </table>
        </div>
    </div>

    <!--JavaScript-->
    <script src="script.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

CSS

 .col-centered{
    margin: 0 auto;
    float: none;
    text-align: center;
    margin-top: 5%;

}

#selectContainer{
    width: 30%;
    margin: 0 auto;
    margin-top: 5%;

}

#table{
    margin-top: 5%;
}

Комментарии:

1. Не могли бы вы объяснить логику определения того, какие параметры отображаются в соответствии с выбором?

2. @user615274 допустим, у нас есть эти строки A1 B2 C3 A1 B3 C4, если я выберу A1, у 2-го селектора будет только B2, B3, Если я выберу B3, у 3-го селектора будет только C4