Question

我正在使用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值设置为＆＃34;描述＆＃34;值返回了吗？

Answer 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>

Answer 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' }
];

您可以使用＆＃34;数据＆＃34;填充您的Select2控件。选项，像这样：

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

你可以使用Select2＆＃34; val＆＃34;获取和设置值的函数，如下所示：

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

jsfiddle demo

Select2加载相关数据到第二个select2？

2 个答案: