Question

在我的HTML表单中，我使用＆lt; select＆gt;这部分：＆lt; form id =＆＃34; fruits＆＃34;＆gt; ＆lt; input type =＆＃34; text＆＃34;命名=＆＃34;标题＆＃34;值=＆＃34; some_title＆＃34; /＆GT; ＆lt; select name =＆＃34; color＆＃34;＆gt; ＆lt; option value =＆＃34;＆＃34;＆gt; all＆lt; / option＆gt; ＆lt; option value =＆＃34; red＆＃34;＆gt; red＆lt; / option＆gt; ＆lt; option value =＆＃34; green＆＃34;＆gt; green＆lt; / option＆gt; ＆LT; /选择＆GT; ＆LT; /形式＆GT; 我使用jQuery.serializeArray（）;来序列化这个表单： var serialized_data = $（＆＃34; form＃fruits＆＃34;）。serializeArray（）; 即使第一个选项值为＆＃34;＆＃34;被选中，它被序列化。所以我得到一个像这样的数组： {＆＃34; title＆＃34;：＆＃34; some_title＆＃34;，＆＃34; color＆＃34;：＆＃34;＆＃34;} 但我需要得到一个像这样的数组： {＆＃34;标题＆＃34;：＆＃34; some_title＆＃34;} 没有＆＃34;颜色＆＃34;：＆＃34;＆＃34; 如何排除这个＆lt; select＆gt;，这样就没有被序列化？附：我已经尝试过这样的事情： $（＆＃34; #fruits：input [value！=＆＃39;＆＃39;]＆＃34;）。serializeArray（）; 和StackOverflow上的其他答案... id不能使用.serializeArray（）;! 请给我一个真正有效的答案，并告诉我你用来测试它的jQuery版本！

Answer 1

CSS中没有选择器可以执行此操作。属性选择器匹配属性值，而不是输入元素值。

您必须使用JavaScript。

例如，在选择元素后，您可以像这样过滤它们：

$(".js-data-example-ajax").select2({
  ajax: {
    url: '/path/to/index.json',
    dataType: 'json',
    delay: 250,
    data: function (params) {
      // Returns the query params that should be passed to the server
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    transport: function(params, success, failure) {
      // Custom transport lets us get pagination info stored in the headers.
      // Check for X-Page and X-Total-Pages, and alternatively for Link rel=next
      var read_headers = function(data, textStatus, jqXHR) {
        var more;
        var current_page = parseInt(jqXHR.getResponseHeader('X-Page')) || 0;
        var total_pages = parseInt(jqXHR.getResponseHeader('X-Total-Pages')) || 0;
        var link = jqXHR.getResponseHeader('Link') || '';
        if ((current_page < total_pages) || (link.search(/<([^>]+)>;\s*rel\s*=\s*['"]?next['"]?\s*(,|$)/i) > -1)) {
          more = true;
        }
        else {
          more = false;
        }
        return {
          results: data,
          pagination: {
            more: more
          }
        };
      };
      var $request = $.ajax(params);
      $request.then(read_headers).then(success);
      $request.fail(failure);
    },
    cache: true
  }
});

Answer 2

您可以使用jQuery过滤器，其中对象名称不等于颜色。这将为您提供一个没有颜色键/值的数组。

var serialized_data = $("#fruits").serializeArray();

serialized_data = serialized_data.filter(function(objectElement){
    return objectElement.name != "color";
});

Answer 3

如果序列化值为空，则只需在序列化之前禁用它，然后重新启用它

$("#btn").click(function(e){
  e.preventDefault();
  let $form = $('#form');
  let $select = $form.find('#select');
  if($select.val() === ''){
    $select.attr('disabled', 'disabled');
  }
  let value =  $form.serializeArray();
  $select.removeAttr('disabled');
  console.log(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <input type="checkbox" checked name="check" />
  <select name="select" id="select">
    <option value="">Please select</option>
    <option value="1">Value 1</option>
  </select>
  <button id="btn">Serialize and log</button>
</form>

jQuery SerializeArray - 如何用空值排除<select>？

3 个答案: