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

Question

我需要在控制台中同时看到两个值，例如 2次Kişiekleme， 3倍ProjeAçma等。

页面中有多个具有相同类的行。 因此，我需要合并同一行中的两个值。

但是需要获取每个。 数量来自数字输入框，第二个来自下拉选择框。

如何将它们合并在console.log（）;中？ ？ 顺便说一句，我通过添加添加选择框。 选择选项没有价值。

此代码显示.ex和.span2的位置，但不同时显示。

$('.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）的父元素，然后使用this内（但在each范围内）相同的选择器回调：

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

Answer 2

这应该可以解决问题。

您可以使用jQuery函数遍历每个选择。找到选择项后，我们可以遍历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>