如何在控制台日志中查看所选选项与其他选项的组合？

Question

我需要在控制台中同时查看两个值，例如 2 次 Kişi ekleme， 3 次 Proje Açma 等。

页面中有多行具有相同的类。 所以我需要组合两个在同一行中的值。

但需要获得它们中的每一个。 数量来自数字输入框，第二个来自下拉选择。

如何在 console.log() 中组合它们； ? 顺便说一句，我通过追加添加选择框。 并且选择选项没有价值属性。

此代码显示 .ex's 和 .span2's 但不在一起。

$('.ex').find(':selected').each(function () {
    console.log($(this).text())
})

$(".span2").each(function () {
    console.log($(this).val());
});

return;

我正在尝试将它们打印为一个数组，并尝试控制是否有一个在其他下拉列表中被多次选择的选定选项。

这里是html。通过单击将行添加到可重复部分。

   <div class="row" style="background-color: #ecf0f5; padding: 15px 35px;">

     <div class="col-xs-12">

        <div class="repeatable"></div>

        <form class="form-horizontal" style="margin-left: 0x!important;">


            <fieldset class="todos_labels">

                <div class="form-group" style="text-align:left;">
                    <br><input type="button" value="Add" class="btn btn-success add" align="center"><br>
                </div>

            </fieldset>
  <input type="button" id="btnSavePackagetab2" class="form-control btn btn-success" style="width: 14%;float: right;"value="Kaydet">
        </form>

    </div>


</div>
</div>

这是附加部分。

$(".repeatable").append('<div class="field-group row"><br><div class="col-lg-6"><label for="" style="text-align:left">Package</label><select class="form-control ex" id="selectiontab2"><option>Seçiniz</option><option>Cv Görüntüleme</option><option>Proje Açma</option><option>Kişi Ekleme</option><option>CV İletişim Bilgileri Görüntüleme</option></select></div><div class="col-lg-4"><label for="">Quantity</label><input type="number" class="span2 form-control" min="0" id=""></div><div class="col-lg-2"><label for=""></label><br><br></div></div>');

Answer 1

您可以选择包含这两种类型元素的父元素（即.row），然后在each 回调中使用您拥有的相同选择器（但在this 范围内）：

$('.row').each(function () {
    console.log( $('.ex > :selected', this).text(), $('.span2', this).val() );
});

Answer 2

这应该可以解决问题。

您使用 jQuery 函数遍历每个选择。当找到一个 select 时，我们可以遍历 DOM 并选择与其相邻的输入。

function add() {
  $(".repeatable").append('<div class="field-group row"><br><div class="col-lg-6"><label for="" style="text-align:left">Package</label><select class="form-control ex" id="selectiontab2"><option>Seçiniz</option><option>Cv Görüntüleme</option><option>Proje Açma</option><option>Kişi Ekleme</option><option>CV İletişim Bilgileri Görüntüleme</option></select></div><div class="col-lg-4"><label for="">Quantity</label><input type="number" class="span2 form-control" min="0" id=""></div><div class="col-lg-2"><label for=""></label><br><br></div></div>');
};
add();
add();

$('.ex').find(':selected').each(function () {
   let stringValueConsole = $(this).text();
   stringValueConsole += ": " +$(this).parent("div.row").find("input.span2").val();
   console.log(stringValueConsole);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" style="background-color: #ecf0f5; padding: 15px 35px;">

  <div class="col-xs-12">

    <div class="repeatable"></div>

    <form class="form-horizontal" style="margin-left: 0x!important;">


      <fieldset class="todos_labels">

        <div class="form-group" style="text-align:left;">
          <br><input type="button" value="Add" class="btn btn-success add" align="center"><br>
        </div>

      </fieldset>
      <input type="button" id="btnSavePackagetab2" class="form-control btn btn-success" style="width: 14%;float: right;" value="Kaydet">
    </form>

  </div>


</div>
</div>