将所选的多选选项值设置为使用 json 选择

我在使用 jQuery 选择的插件填充<select>并将一些选项设置为默认选择时也遇到了类似的问题。我在代码中使用的方法是，

• 从 ajax 调用获取 JSON 响应
• 使用 JSON 填充 <select> 元素
• 循环访问<option>元素
• 使用"选定"属性更新它们（对于特定选项）

我使用的代码片段如下。

var response = "[{'"id'":'"1'",'"location'":'"Chennai'"},{'"id'":'"2'",'"location'":'"Bangalore'"},{'"id'":'"3'",'"location'":'"Hyderabad'"},  {'"id'":'"4'",'"location'":'"Goa'"},{'"id'":'"5'",'"location'":'"Delhi'"},{'"id'":'"6'",'"location'":'"Mumbai'"},{'"id'": '"7'",'"location'":'"Cochin'"},{'"id'":'"8'",'"location'":'"Trivandrum'"}]";
/*populate <select> with the list of locations*/
var locationList = JSON.parse(response);
$.each(locationList, function() {
  $("#location-select").append($("<option/>")
    .val(this.id).text(this.location));
});
$("#location-select").chosen({
  no_results_text: "Oops, no location found!",
  display_selected_options: false
});
/*Make some locations from the list to be selected by default*/
var selectedLoc = JSON.parse("[{'"id'":'"2'",'"location'":'"Bangalore'"},{'"id'":'"6'",'"location'":'"Mumbai'"},{'"id'": '"7'",'"location'":'"Cochin'"}]");
/*
 *Create an array of locations, it can be array of id also,then
 * the if condition should be
 * if ($.inArray($(this).val(), users) != -1){...}
 * This is because id is populated as
 * <select>
 *  <option value="id from json"> location from json </option>
 * </select>
 */
var locations = [];
$.each(selectedLoc, function() {
  locations.push(this.location);
});
$("#location-select option").each(function() {
  if ($.inArray($(this).text(), locations) != -1) {
    $(this).attr('selected', 'selected');
    $("#location-select").trigger('chosen:updated');
    return;
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script>
<h3>
jQuery Chosen multiselect with selected values by default
</h3>
<select id="location-select" data-placeholder="Select locations..." style="width:95%;" multiple class="chosen-select"></select>

我搜索了更多内容并得到了专门用于设置选择框值的解决方案（我猜）（选择选择框）

基本上，导致所有问题的代码中缺少触发器。在使用 json 检索的最后一个值中添加触发器后，这一切都得到了解决。

$("#Job_Type").val(obj[0].Job_type).trigger('chosen:updated');

希望它也对其他人有所帮助！！

从此链接中找到答案

此外，对于多选框，如果您有 [1,2,3,4] 这样的值，您可以使用以下内容获得结果：

var values = obj[0].Locations;
$.each(values.split(','), function(index, element)
{
   $('#Locations').find('option[value="'+ element +'"]').attr('Selected', 'Selected');
   $("#Locations").trigger('chosen:updated');   
});

我写了一个简单的例子 http://jsfiddle.net/f7z664u5/

而不是那部分

if($(this).val() == 1)
{
    $(this).prop('selected', true);
}
if($(this).val() == 2)
{
    $(this).prop('selected', true);
}

检查数组中的值是否为 .. 或存储数据的类型。

这将起作用。

$.each(objlist, function (index, value) {                                  
  $(".chosen-select option[value=" + value.id+ "]").attr("selected", "selected");
  $(".chosen-select").trigger("chosen:updated");                             
});