【问题标题】:select2 - make array of selected options text where key is option valueselect2 - 制作选定选项文本数组,其中键是选项值
【发布时间】:2017-06-01 18:58:03
【问题描述】:

使用带有多个选项的最新 select2。当用户选择任何选项时,我需要制作所选选项值和文本的数组。为了获得价值,我使用:

var id=$('#select2_dropdown').val();

它可以生成id[]="value1", id[]="value2" 等数组

现在我需要为<option> 标签之间的文本创建相同的数组。在Get selected text from a drop-down list (select box) using jQuery 找到了解决方案,因此添加了以下代码:

var name=$("#select2_dropdown option:selected").text();

虽然它非常适合单选,但尝试将它与多选一起使用只会生成一个类似name=optiontext1optiontext2 的字符串(所有选定选项的字符串组合成一个)

我怎样才能让它看起来像这样:name[value1]=optiontext1, name[value2]=optiontext2

尝试了这个没有任何运气:

var id=$("#select2_dropdown option:selected").text();
var name[id]=$("#select2_dropdown option:selected").text();

【问题讨论】:

  • 我能问一下为什么需要选项文本吗?一般来说,您可能会打开一个漏洞来信任文本值中传回的内容。
  • 我通过 ajax 将此数据提交到另一个 PHP 文件,该文件会进行一些验证/计算、格式化新数据并将其返回到原始脚本。然后,这些新数据用于动态创建新的输入字段、编写一些文本等
  • 您也可以使用 JSON 字符串来传递数据吗?
  • 我在数据库中也有选项文本,所以我也可以查找它们

标签: jquery jquery-select2 jquery-select2-4


【解决方案1】:

你可以在 select2 上做一个 jQuery.each。

$("#select2_dropdown option:selected").each(function(){

  var option = $(this);

  var label = option.text();
  var value = option.value();

});

您可以将这些值推送到一个对象中,然后按照您认为合适的方式格式化数据。

$('.select2').select2({ placeholder: 'Please choose one.'});

$('#stringify').on('click',function(){
	
  var result = { };
	$('#feeling :selected').each(function() { var o = $(this); result[o.text()]=o.val() });
  
  $('#output').text(JSON.stringify(result));

});
.select2 {
  min-width:200px;
}

.output {
  margin-top: 25px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>


<label for='feeling'>How are you feeling?</label>
<select multiple='multiple' id='feeling' class='select2'>
  <option value="1">Awake</option> 
  <option value="2">Tired</option> 
  <option value="3">Happy</option> 
  <option value="4">Sad</option> 
  <option value="5">Hungry</option> 
  <option value="6">Tearful</option> 
</select>

<button class='btn btn-primary' id="stringify">
  To JSON.
</button>

<div class='output well'>
  <span id='output'>
  </span>
</div>

展示如何对对象执行此操作并将其转换为 JSON 字符串的示例。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-08-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多