Javascript 选择2个带模板的动态下拉列表

正在尝试了解如何使用带有动态select2下拉列表的select2模板函数来在JSON响应中显示额外的数据

我的问题与如何创建HTML模板格式化无关（我已经解决了这个问题）。我想知道在加载远程数据时如何使模板工作-此时远程数据加载函数覆盖模板

下面是我所说的“模板化”结果的示例。我希望能够指定“otherData”和“extraData”字段的格式

当前示例数据格式（由下面不使用模板的代码使用）

{“12”：“DASGDSA67”}

建议的示例数据（如JSON和额外数据）

{“id”：“12”，“value”：“DASGDSA67”，“otherData”：“Brunswick”，“extraData”：“Heads”}

视图（Javascript）

$（文档）.ready（函数（）{
$（“.company2”）。选择2（）；
$（“.location2”）。选择2({
templateResult:formatState
});
});
$（“.company2”）。在（'change'，function（）上选择2（）{
变量$company2=$（'.company2'）；
$.ajax({
url:“../api/locations/”+$company2.val（），
类型：'GET'，
成功：功能（数据）{
变量$location2=$（“.location2”）；
$location2.empty（）；
$.each（数据、函数（值、键）{
$location2.append（$（“”）.attr（“value”，value）.text（key））；
}); 
$location2.select2（）；
}
});
}).触发（“变更”）；
函数格式化状态（状态）{
如果（！state.id）{return state.text；}
变量$state=$(
''+state.element.value（）++'+''+state.element.otherData（）++'
'
);
返回$state；
};

您的问题缺少一些信息。你期望结果是什么样子？@KevinBrown我添加了一个示例图像一个图像在这里不是很有用，尤其是来自示例的图像。也许如果您给我们一些您想要显示的示例标记（以及

otherData

和

extraData

的位置），有人可以提供帮助。@KevinBrown我的问题与如何创建HTML模板格式化无关（我已经解决了这个问题）。我想知道在加载远程数据时如何使模板工作-目前远程数据加载函数覆盖了模板…@KevinBrown还有什么想法吗？你的问题缺少一些信息。你期望结果是什么样子？@KevinBrown我添加了一个示例图像一个图像在这里不是很有用，尤其是来自示例的图像。也许如果您给我们一些您想要显示的示例标记（以及

otherData

和

extraData

的位置），有人可以提供帮助。@KevinBrown我的问题与如何创建HTML模板格式化无关（我已经解决了这个问题）。我想知道在加载远程数据时如何使模板工作-目前远程数据加载函数覆盖了模板…@KevinBrown还有其他想法吗？

<script type="text/javascript">
$(document).ready(function() {
    $(".company2").select2();
    $(".location2").select2({
        templateResult: formatState
    });
});

$(".company2").select2().on('change', function() {
var $company2 = $('.company2');
$.ajax({
    url:"../api/locations/" + $company2.val(),
    type:'GET',
    success:function(data) {
        var $location2 = $(".location2");
        $location2.empty();
        $.each(data, function(value, key) {
            $location2.append($("<option></option>").attr("value", value).text(key));
        }); 
        $location2.select2();
    }
});
}).trigger('change');

function formatState (state) {
  if (!state.id) { return state.text; }
      var $state = $(
         '<h1>' + state.element.value() + '</h1>' + '<p>' + state.element.otherData() + '</p>'
      );
  return $state;
};
</script>