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：

＆＃13;

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

＆＃13;

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

＆＃13;

这已在更高版本的jquery中修复（特别是用3.3.1测试）（在v2中也失败了）。

＆＃13;

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

＆＃13;

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

＆＃13;

解决jquery＆lt; 3的问题是在检索值时添加|| []：

＆＃13;

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

＆＃13;

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

＆＃13;

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

返回空数组有什么意义

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

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

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

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

示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

多个select val（）返回null

1 个答案: