序列化不返回选择下拉列表的值

时间:2018-03-07 09:25:53

标签: javascript jquery

我有一些代码可以从选择下拉列表中的未选中的选项中获取值。这将在console.log中显示为具有正确值的数组。但是,serialize();console.log(data);时没有为此选择返回任何值。如果我console.log(boxintake);这表明我传递了正确的值。

从按钮单击添加选项并且正常工作。假设所有名称和表单名称都是正确的。

如果有人能够告诉我为什么这不起作用,我将不胜感激。非常感谢。

HTML

<div class="form-group">
    <label class="labelStyle" for="box_ni">Select Your Box(es)</label><br />
     <select disabled id="box_ni" multiple name="box_ni[]" size="15">
      <option value="">
      </option>
    </select>
    <div id="nidstrmessage"></div>
    <div class="servicesHelp"><lead id="serviceHelp" class="form-text text-muted help">
      Read help <img src="/domain/admin/images/qmark.png" width="24px" height="24px" class="helpintk"/>
      </lead>
    </div>
    <div class="noBrtvBoxes" style="color:white;"></div>
  </div>

JS

$("#USRboxni").submit(function(e) {
   e.preventDefault();

    var boxintake = $("#box_ni option").map(function(){
      return this.value;
     }).get();
     console.log(boxintake);

    var data = $("#USRboxni").serialize();
      console.log(data);
});

1 个答案:

答案 0 :(得分:3)

几个问题:

  • .serialize()将排除disabled
  • 的所有控件 多选中的
  • .serialize()将仅返回所选值

由于您的select已被禁用且未实际选择任何内容,因此无法获得任何结果。

当您添加商品时,我建议您当时选择它们;这可能会解决你的许多问题。

<select multiple的用途 - 为用户提供多种选项,并允许他们选择他们想要的选项。但是你没有使用它,你将它用作&#34;用户选择了这些&#34;。您可能最好使用隐藏的输入存储和div来显示所选的值。

已删除已停用且已选择一项的示例代码段显示它仅返回该项:

&#13;
&#13;
//$("#USRboxni").submit(function(e) {
//e.preventDefault();

var boxintake = $("#box_ni option").map(function() {
  return this.value;
}).get();
console.log(boxintake);

var data = $("#USRboxni").serialize();
console.log(data);
//});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id='USRboxni'>
<div class="form-group">
  <label class="labelStyle" for="box_ni">Select Your Box(es)</label><br />
  <select /*disabled*/ id="box_ni" multiple name="box_ni[]" size="15">
      <option value="1" selected>one</option>
      <option value="2">two</option>
    </select>
</div>
</form>
&#13;
&#13;
&#13;

您可以删除“已停用”状态&#39;在serialize()之前,然后将其添加回来,但您仍然需要选择项目。