选择元素 $(this).find() 不起作用答案

【问题标题】：select element $(this).find() not working选择元素 $(this).find() 不起作用
【发布时间】：2018-11-28 09:09:45
【问题描述】：

我正在尝试从 select 元素中获取选定的选项值。

<form method="post" action="training/save" enctype="multipart/form-data" id="trainingForm">
  <select name="trainees[]" id="trainees" class="form-control" required multiple="multiple">
    <option value="1">1</option>                    
  </select>
  <button type="submit">Submit</button>
</form>

我在尝试访问 select 值时收到 undefined：

$('#trainingForm').submit( function (){
  console.log($(this).find('select[name="trainees"]').val());
});

我可以通过其他方式（通过 ID）获取值：

$('#trainees').val();

注意：select2 正在使用中。

但我想以以前的方式获取值。

【问题讨论】：

使用正确的选择器，即select[name="trainees[]"]
@Satpal 我的错.. 谢谢.. :)

标签： javascript jquery select jquery-select2

【解决方案1】：

[] 也是元素的 name 属性的一部分。您必须将其包含在选择器中：

$(document).ready(function() {
    $('#trainees').select2();
});

$('#trainingForm').submit( function (){
  console.log($(this).find('select[name="trainees[]"]').val());
  return false;
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<form method="post" action="training/save" enctype="multipart/form-data" id="trainingForm">
    <select name="trainees[]" id="trainees" class="form-control" required multiple="multiple">
        <option value="1">1</option> 
        <option value="2">2</option>
    </select>
<button type="submit">Submit</button>
</form>

【讨论】：

【解决方案2】：

改变你的

$('#trainingForm').submit( function ()
{
  console.log($(this).find('select[name="trainees"]').val());
});

到

$('#trainingForm').submit( function ()
{
  console.log($(this).find('select[name="trainees[]"]').val());
});

您需要提供与您的 html 中相同的名称。

【讨论】：