javascript - 多选 val() 返回 null

Question

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

我只发布了我检查值(value)的代码。谢谢

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/

---

what is the point of having an empty array returned

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

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

要获取添加的项目的所有值，您可以使用 .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>