多选 val() 返回 null

Question

我正在将项目添加到一个工作正常的多选列表框。 但是，当我提交表单时，它们将作为null返回。 奇怪的是，如果我在提交之前选择项目，他们通过正确。 我很困惑为什么会发生这种情况，因为表单名称和选择名称是正确的，希望得到一些帮助来指出我的错误。

我只发布了我正在检查价值的代码。 谢谢

html

<div class="form-group">
    <label class="labelStyle" for="box_ni">Select Your Box(es)</label><br />
     <select 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>

添加代码

$(function() {
  $(document).on('click', '#add', function() {
    var boxvalue = $("#box_input").val();
    if (boxvalue == '') {
      $("#niinputmessage").fadeIn(3000).html('No blank entries').fadeOut(5000).css({
        'color': 'red',
        'margin-left': '5px',
        'margin-top': '5px'
      });
      return false;
    }
    count = $('#box_ni').children('option').length;
    console.log(count);
    $("#counter").html("Total selected boxes for intake: " + '<span style="font-size: 14px; color: black;">' + '( ' + count + ' )' + '</span>').css('color:, black');
    if (count > 2) {
      $("#counter").html("No more than 3 items per intake. Please remove items from the list.");
      return false;
    } else {
      count++;
      $("#counter").html("Total selected boxes for intake: " + '<span style="font-size: 14px; color: black;">' + '( ' + count + ' )' + '</span>').css('color:, black');
    }
    $("#box_ni").append("<option>" + boxvalue + "</option>");
    $("#box_input").val('');
  });
});

js

$("#USRboxni").submit(function(e) {
  e.preventDefault();
  var boxintake = $("#box_ni").val();
  console.log(boxintake); <-- RETURNS NULL
});

Answer 1

问题（在问题评论中确定）是 jquery 1.12.1 包含一个错误/功能，当没有选择任何项目时将返回 null：

 console.log($("select").val(), "== null", $("select").val() == null)

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select multiple></select>

这已在 jquery 的更高版本中得到修复（专门用 3.3.1 测试过）（在 v2 中也失败了）。

 console.log($("select").val(), "== null", $("select").val() == null)

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <select multiple></select>

jquery<3 的解决方法是添加|| [] || []检索值时：

 var v = $("select").val() || []; console.log(v, "== null", v == null)

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select multiple></select>

使用 jquery 3.3.1 的更长示例： https : //jsfiddle.net/86wcznse/7/

---

返回一个空数组有什么意义

我相信这里的问题是 OP 正在添加项目，但没有选择它们。

$("select[multiple]").val()将返回选定的项目，问题的补充显示正在添加但未选择的项目。

要获取添加的项目的所有值，您可以使用.map ：

$("select option").map(function(i, e) {
  return $(e).val();
}).toArray();

例子：

 var v = $("select option").map(function(i, e) { return $(e).val(); }).toArray(); console.log(v, "== null", v == null)

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select multiple> <option value="1">one</option> <option value="2">two</option> </select>