Select2 将相关数据加载到第二个 select2 中？答案

【问题标题】：Select2 load related data into second select2?Select2 将相关数据加载到第二个 select2 中？
【发布时间】：2014-03-12 14:54:20
【问题描述】：

我正在使用 Cakephp 2.4、Select2 3.4 和 Jquery 1.10。在我的应用程序中，我有一个包含 3 列的表格 - 产品代码、产品描述和产品价格。

我设置了 Select2，以便用户可以通过产品代码或产品描述进行选择。我想要实现的是：

如果用户通过产品代码选择，则设置产品描述和价格，如果用户通过描述选择，则设置产品代码和价格。

我的数据返回如下：

[{"id":1,"text":"10001","description":"Test Product Name","unitPrice":"1.25"},    {"id":2,"text":"10002","description":"product 2","unitPrice":"5.00"},    {"id":3,"text":"10003","description":"Product 3","unitPrice":"2.74"}]

我可以使用普通的 jQuery 设置第二个 select2 框的值：

$(".productCode").on('change', function (product){ 
$(".description").select2("data", {id: '1', text: 'Test'});     
});

我必须使用什么来将 .description select2 值设置为返回的“描述”值？

【问题讨论】：

标签： javascript jquery cakephp jquery-select2

【解决方案1】：

您忘记初始化选择元素。这样做：

<!DOCTYPE html>
<html>
<head>
    <title>jquery select2 test</title>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <link href="select2/select2.css" rel="stylesheet"/>
    <script src="select2/select2.js"></script>
</head>

<body>

<input type="hidden" class="productCode" />

<select class="description" >
</select>

<script type="text/javascript">


$(document).ready(function() { 

    var $productCode = $(".productCode"),
        $description = $(".description"), 
        product = [{"id":1,"text":"10001","description":"Test Product Name","unitPrice":"1.25"},{"id":2,"text":"10002","description":"product 2","unitPrice":"5.00"},{"id":3,"text":"10003","description":"Product 3","unitPrice":"2.74"}];
    //should initilize two select first
    $productCode.select2({
        'placeholder' : 'input to search',
        "width" : '200px',
        "query": function(query){
            var data = {results: product};
            query.callback(data);
        }
    });
    $description.select2({
        'width' : '200px'
    });



    $productCode.on('change', function (product){ 
        $description.select2("data", {id: '1', text: 'Test'}); 
    });
});

</script> 
</body>

</html>

【讨论】：

【解决方案2】：

如果您使用隐藏输入来支持 Select2 控件，如下所示：

<input type="hidden" class="product" id="productCode" data-text="text" data-placeholder="code" />
<input type="hidden" class="product" id="description" data-text="description" data-placeholder="description" />
<input type="hidden" class="product" id="unitPrice" data-text="unitPrice" data-placeholder="unit price" />

你有这样的数据：

var PRODUCTS = [
    { id: 1, text: '10001', description: 'Product 1', unitPrice: '1.25' },
    { id: 2, text: '10002', description: 'Product 2', unitPrice: '5.00' },
    { id: 3, text: '10003', description: 'Product 3', unitPrice: '2.74' }
];

您可以使用“数据”选项填充 Select2 控件，如下所示：

$('.product').each(function() {
    var $this = $(this);
    $this.select2({
        allowClear: true,
        data: { results: PRODUCTS, text: $this.attr('data-text') }
    });
});

您可以使用 Select2 "val" 函数来获取和设置值，如下所示：

$('.product').change(function() {
    var selecteId = $(this).select2('val');
    $('.product').select2('val', selecteId);
});

jsfiddle demo

【讨论】：