select2 - 制作所选选项文本的数组,其中键是选项值
select2 - make array of selected options text where key is option value
使用带有多个选项的最新 select2。当用户 selects 任何选项时,我需要制作 selected 选项值和文本的数组。为了获得价值,我使用:
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();
虽然它对单个 select 非常有用,但尝试将它与多个 select 一起使用只会生成一个像 name=optiontext1optiontext2
这样的字符串(所有 selected 选项的字符串组合成一个)
我怎样才能让它看起来像这样:name[value1]=optiontext1, name[value2]=optiontext2
?
尝试过这个但没有任何运气:
var id=$("#select2_dropdown option:selected").text();
var name[id]=$("#select2_dropdown option:selected").text();
您可以在 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 字符串的示例。
使用带有多个选项的最新 select2。当用户 selects 任何选项时,我需要制作 selected 选项值和文本的数组。为了获得价值,我使用:
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();
虽然它对单个 select 非常有用,但尝试将它与多个 select 一起使用只会生成一个像 name=optiontext1optiontext2
这样的字符串(所有 selected 选项的字符串组合成一个)
我怎样才能让它看起来像这样:name[value1]=optiontext1, name[value2]=optiontext2
?
尝试过这个但没有任何运气:
var id=$("#select2_dropdown option:selected").text();
var name[id]=$("#select2_dropdown option:selected").text();
您可以在 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 字符串的示例。