Как обеспечить общий первый столбец для множественного выбора Jquery и отображения выбранных параметров рядом с ним?

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

Я использовал плагин Select2 для множественного выбора, который работает отлично. Однако я борюсь с правильным кодом Jquery для извлечения данных, пока я выбираю каждый из вариантов. Код CCS, где я хотел, чтобы элементы отображались в полях рядом друг с другом с общим первым столбцом, также не применяется по желанию.

Включили код для вашей справки. Еще раз, пожалуйста, обратите внимание, что код будет казаться чрезвычайно сырым, поскольку я очень новичок в этом и пытаюсь понять это.

$(document).ready(function() {
    $('.js-example-basic-multiple').select2();

    $("#hStations").on("change", function() {
        var selStation = $(this).children("option").filter(":selected").text();
        $(".hideable").hide();
        if (selStation == "Option 1") {
            $("#FirstColumn" + "#hOptions1").show();
        } else if (selStation == "Option 2") {
            $("#FirstColumn" + "#hOptions2").show();
        } else if (selStation == "Option 3") {
            $("#FirstColumn" + "#hOptions3").show();
        }
    }).change();
});
.hideable {
    display: none;
}
select {
  width: 500px;
}
#FColumn {
  float: left;
  position: fixed;
  display: block;
  border: 1;
}
#hOptions {
  float: right;
  position: relative;
  display: block;
  border: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<body>

    <select id="hStations" class="js-example-basic-multiple" multiple="multiple">
      <option id="Option 1">Option 1</option>
      <option id="Option 2">Option 2</option>
      <option id="Option 3">Option 3</option>
    </select>
    <br/>
    <div id="select">
        <button type="button" onclick="showSelected()">Compare</button>
    </div>

    <div id="output">
        <div id="FirstColumn" class="FColumn">
            <ul>
                <li>Dis</li>
                <li>Wea</li>
                <li>Tra</li>
            </ul>
        </div>
        <div id="hOptions">
            <div id="hOptions1" class="#hOptions">
                <ul>
                    <li>Option 1 Dis</li>
                    <li>Option 1 Wea</li>
                    <li>Option 1 Tra</li>
                </ul>
            </div>
            <div id="hOptions2" class="#hOptions">
                <ul>
                    <li>Option 2 Dis</li>
                    <li>Option 2 Wea</li>
                    <li>Option 2 Tra</li>
                </ul>
            </div>
            <div id="hOptions3" class="#hOptions">
                <ul>
                    <li>Option 3 Dis</li>
                    <li>Option 3 Wea</li>
                    <li>Option 3 Tra</li>
                </ul>
            </div>
        </div>
    </div>

</body>

Источник

0 ответов

Другие вопросы по тегам