Сериализация выбора

Question

Моя форма (где-то около)

<form name="ShoppingCart" method="post">
  <select name="city">
    <option value="db5c88c4-391c-11dd-90d9-001a92567626">City1</option>
    <option value="db5c88c4-391c-11dd-90d9-001a92567636">City2</option>
    ...
    <option value="db5c88c4-391c-11dd-90d9-001a92567689">CityN</option>
  </select>
  <select name="warehouses">
    <option value="db5c88c4-391c-11dd-90d9-001a92567329">Warehouses1</option>
    <option value="db5c88c4-391c-11dd-90d9-001a92567452">Warehouses2</option>
    ...
    <option value="db5c88c4-391c-11dd-90d9-001a92567352">WarehousesN</option>
  </select>
  <div>
      <input class="submit_form" type="submit" name="Submit" value="Submit" />
  </div>
</form>

Выбор складов, созданных динамически, в зависимости от выбора первого выбора. Мне нужна форма serialize(), чтобы она представляла текущее значение и текст в сериализации.

cityName=City1&cityValue=db5c88c4-391c-11dd-90d9-001a92567352&warehousesName=Warehouses1&warehousesValue=db5c88c4-391c-11dd-90d9-001a92567352

Как я могу это сделать?

Answer 1

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

$(function() {
  $("form").submit(function(e) {
    e.preventDefault();
    var fData = {};
    // Alternate:
    var formD = new FormData();

    $("select", this).each(function(i, el) {
      fData[$(el).attr("name") + "Name"] = $("option:selected", el).text().trim();
      fData[$(el).attr("name") + "Value"] = $(el).val();
      // Alternate:
      formD.append($(el).attr("name") + "Name", $("option:selected", el).text().trim());
      formD.append($(el).attr("name") + "Value", $(el).val());
    });
    console.log($.param(fData));
    // FormData does not have a Serialize or Stringify method
    for (var pair of formD.entries()) {
      console.log(pair[0] + ': ' + pair[1]);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="ShoppingCart" method="post">
  <select name="city">
    <option value="db5c88c4-391c-11dd-90d9-001a92567626">City1</option>
    <option value="db5c88c4-391c-11dd-90d9-001a92567636">City2</option>
    <option value="db5c88c4-391c-11dd-90d9-001a92567689">CityN</option>
  </select>
  <select name="warehouses">
    <option value="db5c88c4-391c-11dd-90d9-001a92567329">Warehouses1</option>
    <option value="db5c88c4-391c-11dd-90d9-001a92567452">Warehouses2</option>
    <option value="db5c88c4-391c-11dd-90d9-001a92567352">WarehousesN</option>
  </select>
  <div>
    <input class="submit_form" type="submit" name="Submit" value="Submit" />
  </div>
</form>

Как вы можете видеть, это перебирает элементы select и собирает данные по вашему желанию. Затем вам необходимо опубликовать его в своем сценарии.