0

Есть таблица, которая формируется php, но в каждой строке есть две ячейки с селектом, которые пользователь "заполняет" самостоятельно. Нужно средствами Jquery || Js собрать все значения селектов в массив. КАК?

введите сюда описание изображения

Это код на ПХП. тут формируется таблица.

  echo '<table class="table text-center mb-5">
        <thead>
        <tr>
            <th scope="col">Ссылка на сайт, которые встречается в ТОП-10</th>
            <th scope="col">ЧастотностьСколько раз сайт был найден</th>
            <th scope="col">Сколько это в % от всех ТОПов</th>
            <th scope="col">Тональность сайта </th>
            <th scope="col">Тип сайта</th>
        </tr>
        </thead>
        <tbody>';
foreach ($yagoo_res2 as $url => $num) {
    $percent = round(100/count($yagoo_res2) * $num,1);
    echo '<tr>';
    echo "<td><a href=$url class='my_link'> $url </a></td>";
    echo '<td>' . $num . '</td>';
    echo '<td>' . $percent . '</td>';
    echo '<td><select class="custom-select" id="inputGroupSelect01">
    <option selected>Не определена</option>
    <option value="положительная">положительная</option>
    <option value="2">отрицательная</option>
    <option value="3">нейтральная</option>
  </select></td>';
    echo '<td><select class="custom-select" id="inputGroupSelect02">
    <option selected>Не определен</option>
    <option value="1">отзовик</option>
    <option value="2">блог</option>
    <option value="3">соцсеть</option>
    <option value="4">СМИ</option>
    <option value="5">свой сайт (подконтрольный)</option>
  </select></td>';
    echo '</tr>';
}
echo '</tbody></table>';

ПРобовал вот это

var table = $('.table');
        var trs = $('tr', table);
        var option = [];
        trs.each(function () {
            option.push($('td', this));

        });

но значения селектов не собирает.

5
  • 2
    приведите ваш код на PHP
    – Komdosh
    28 мар 2018 в 9:34
  • А в чем конкретно проблема? Что пробовали? Что не получилось?
    – newman
    28 мар 2018 в 9:38
  • Отредактировал вопрос
    – your uncle
    28 мар 2018 в 9:42
  • Что значит "собрать в массив?" Вы хотите получить просто все значения их ячеек последовательно в массиве? Или вам нужно по каждой строке сделать объект с полями-значениями из колонок?
    – wirtwelt
    28 мар 2018 в 9:48
  • уточните, в каком виде вы ожидаете увидеть результат работы?
    – teran
    28 мар 2018 в 9:49

2 ответа 2

0

В зависимости о того, какие значения нужны, все или только выбранные можете использовать один из нижеприведенных примеров.

В данном случае в массивы попадает текст (метки), если нужны значения, то используйте $(this).val();

var result = $("table select > option").map(function(){ return $(this).text(); }).get();
console.log(result);

var result = $("table select > option:selected").map(function(){ return $(this).text(); }).get();
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>
    <select>
       <option>1</option>
       <option selected>2</option>
       <option>3</option>
    </select>
  </td></tr>  
  <tr><td>
    <select>
       <option>4</option>
       <option>5</option>
       <option selected>6</option>
    </select>
  </td></tr>
</table>

0

Вы зачем-то проходите по таблице. Когда можно брать сразу значения из select

Но для начала вам стоит сделать для каждого select свой уникальный id - c привязкой к номеру строки. Либо вы можете убрать id и добавить в каждый select аттрибуты "data" - чтобы они служил номером строки.

Т.е. можно заменить

echo '<td><select class="custom-select" id="inputGroupSelect01">

на

echo "<td><select class="custom-select" data-col="1" data-row="$num">

Со вторым селектом аналогично

А дальше уже можно выбирать данные

var result = {};
$(".custom-select").each(function(){
  var row = $(this).data('row');
  if (!(row in result)) {
    result[row] = {};
  }
  result[row][$(this).data('col')] = $(this).val() 
});
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>
    <select data-col="1" data-row="0" class="custom-select">
       <option value="1">1</option>
       <option value="2" selected>2</option>
       <option value="3">3</option>
    </select>
  </td></tr>  
  <tr><td>
    <select data-col="2" data-row="0" class="custom-select">
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3" selected>3</option>
    </select>
  </td></tr>
</table>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.