3

Здравствуйте! На сайте есть страница с несколькими селектами (содержимое берется из бд) и тем же количеством инпутов:

<div class="col-md-2 col-xs-12">
      <input class="form-control center" value="<?= $value['position'] ?>">
</div>

<div class="col-md-8 col-xs-12">
     <select class="select1 form-control">
         <option value="<?= $value['seo_url'] ?>" selected><?= $value['name'] ?></option>
             <? foreach ($url as $value1) {
                    if ($value['seo_url'] != $value1['seo_url']) {?>
                         <option value="<?= $value1['seo_url'] ?>"><?= $value1['name'] ?></option>
                  <?}
            }?>
     </select>
</div>

Необходимо при нажатии на кнопку .save получить массив вида
0: {position: "1", name: "гугл", url: "google.com"} 1: {position: "2", name: "яндекс", url: "yandex.ru"} ....

Пробую писать так, но ничего не получается:

$('.save').on('click', function(){

var result = [];
var typeValue = this.id;

    $('#myFormTop input').each(function () {<!--Получаем исходные значения!-->
        var select = $('+ select', this);

        result.push({
        input: $(this).val(),
        select: select.val(),
        url:  select.find('option:selected').text()
     });
    });

  console.log(result);
});

Инпуты и селекты:

<div class="col-xs-12">
                        <div class="col-md-2 col-xs-12">
                            <input class="form-control center" value="2">
                        </div>

                        <div class="col-md-8 col-xs-12">
                            <select class="select1 form-control">
                                <option value="" selected="">sd</option>
                                <option value="glavnaya_stranitsa">Главная страница</option>
                                <option value="o_kompanii">О компании</option>                                                                            
                                <option value="usloviya_vozvrata">Условия возврата</option>
                                                ...
                           </select>
                        </div>                          

Кнопка .save:

<div class="col-xs-12">
                <button class="save btn btn-danger" id="top" type="button">Сохранить</button>
 </div>
6
  • "ничего не получается" - вообще прямo ничего не происходит?
    – user176262
    28 сен 2017 в 18:08
  • $('+ select', this); - вот это что значит?
    – user176262
    28 сен 2017 в 18:10
  • @Igor, получаю вот это 0 : {input: "1", select: undefined, selected: ""} 1 : {input: "2", select: undefined, selected: ""}
    – r.mcreal
    28 сен 2017 в 18:10
  • @Igor, честно говоря код не мой и я мало что в нем понимаю(
    – r.mcreal
    28 сен 2017 в 18:11
  • Вы можете каким-то образом поставить селекты в соответствие инпутам? Или они просто по порядку соответствуют друг другу?
    – user176262
    28 сен 2017 в 18:12

1 ответ 1

2

$('.save').on('click', function() {

  var result = [];

  var inputs = $('#myFormTop input');
  var selects = $('#myFormTop select');
  for (var i = 0; i < Math.min(inputs.length, selects.length); i++) {
    var iValue = $(inputs[i]).val();
    var sValue = $(selects[i]).val();
    var sText = $(selects[i]).find('option:selected').text();
    result.push({
      input: iValue,
      select: sValue,
      url: sText
    });
  }

  console.log(result);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12" id="myFormTop">
  <div class="col-md-2 col-xs-12">
    <input class="form-control center" value="2">
  </div>

  <div class="col-md-8 col-xs-12">
    <select class="select1 form-control">
      <option value="" selected="">sd</option>
      <option value="glavnaya_stranitsa">Главная страница</option>
      <option value="o_kompanii">О компании</option>                                             <option value="usloviya_vozvrata">Условия возврата</option>
    </select>
  </div>

  <div class="col-xs-12">
    <button class="save btn btn-danger" id="top" type="button">Сохранить</button>
  </div>
</div>
  

10
  • Все работает, только есть одна проблема. Если мы не меняя значения селектов нажмем кнопку .save то в массиве, select: "" будет пустым. Получается каждый раз надо выбрать значение селекта. Может это связано с html
    – r.mcreal
    28 сен 2017 в 18:27
  • @r.mcreal а визуально в них выбраны опции с текстом?
    – user176262
    28 сен 2017 в 18:29
  • Визуально да все на месте. Вот что приходит, чтобы было понятнее {input: "2", select: "", url: "google.com"}.
    – r.mcreal
    28 сен 2017 в 18:34
  • @r.mcreal добавьте, пожалуйста, в вопрос html (из браузера), содержащий форму с инпутами, селектами и кнопкой .save
    – user176262
    28 сен 2017 в 18:35
  • Посмотрите пожалуйста, я ничего не пропустил?
    – r.mcreal
    28 сен 2017 в 18:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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