jQuery Multiple Select

jQuery Multiple Select

本文关键字：Select Multiple jQuery      更新时间：2024-06-26

我有一个多选HTML元素。

<select multiple="multiple" id="mult_sel">
   <option value="1">Dog</option>
   <option value="2">Cat</option>
</select>

我使用下面的jQuery来捕捉这个多选中的单个选项被点击时的情况：

$('#mult_sel').click(function(v){
   console.log(v);
});

此事件按预期触发，但是，我不确定如何获取为多选字段单击的单个选项的值和文本值。

谢谢！

尝试

$('#mult_sel option').click(function(){
   alert('the value ' $(this).val()); //for get the value
   alert('the text'  $(this).text()); //for get the text
});

.val()返回选项的值，.text()返回所选选项的文本。

Jsfddle

jsfiddle

$('#mult_sel').click(function(event){
    // event.originalEvent.srcElement isn't fully supported
    console.log(e.target);
});

有：-）（检查它是[选项]还是[选择]元素）

尝试使用Select2 JQuery

您必须从GitHub下载代码，并将dist目录复制到您的项目中。

在HTML的<head>部分中包含以下代码行。

<link href="../css/select2.min.css" rel="stylesheet" />
<script src="../js/select2.min.js"></script>

初始化要使其成为多个选择框的<select>元素上的Select2。

<script type="text/javascript">
  $('#select2-multiple').select2();
</script>

示例代码（记住使用多属性声明）

<select class="select2-multiple" multiple="multiple">
  <option value="WWL">Wong Wai Ling</option>
  <option value="AE">Alessia Enzler</option>
  <option value="ASL">A-Young SON LAuren</option>
</select>
相关文章：