Select2将相关数据载入第二个select2？

我正在使用Cakephp 2.4，Select2 3.4和Jquery 1.10。在我的应用程序中，我有一个包含3列的表格 - 产品代码，产品说明和产品价格。Select2将相关数据载入第二个select2？

我有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设置第二个选择2框的值：

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

我有什么用设置.description将select2值返回给“description”值？

来源

2014-03-12 Cody

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

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

来源

2014-11-05 10:23:00 dongyado

如果您使用隐藏的投入来支持你的选择二的控制，就像这样：

<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') } 
    }); 
});

而且可以使用选择二“VAL”功能来获取和设置的值，如：

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

jsfiddle demo

来源

2014-11-07 23:44:12

Select2将相关数据载入第二个select2？

回答

相关问题