从选择菜单中用JQuery渲染多次部分
问题描述:
我有一个选择菜单,用户可以在其中选择产品。从选择菜单中用JQuery渲染多次部分
%fieldset
%legend
Select a Product
%ul.input_group
%li
%label{:for => "product"}
Product
%select#product
%option
Please Select
%option
2 recipients fo $65
%option
4 recipients for $100
%option
8 recipients for $150
如果用户选择2 recipients for $65
,我想部分位于/transcripts/products/recipients/select-recipient
加载两次到的div #recipient-list
。我想要这样做的另一个词:
#recipient-list
.recipient
...
.recipient
...
如果选择其他选项我希望这个div响应与适当数量的项目。
我该如何去写这个JQuery。
答
尝试是这样的:
$('#product option:selected').each(function(index, product)) {
$('#recipient-list').append($.get('/transcripts/products/recipients/select-recipient/' + product.val()));
}
然后改变你的选择以下
%fieldset
%legend
Select a Product
%ul.input_group
%li
%label{:for => "product"}
Product
%select#product
%option
Please Select
%option{value: "2"}
2 recipients fo $65
%option{value: "4"}
4 recipients for $100
%option{value: "8"}
8 recipients for $150
答
我认为您正在寻找这样的事情:
$('#product').on('change', function() {
var val = parseInt($(this).text(), 10);
if (val < 1) {
$('#recipient-list').empty();
return;
}
$('#recipient-list').load('/transcripts/products/recipients/select-recipient',
function() {
var copy = $(this).children().clone();
while (val-- > 1) {
$('#recipient-list').append(copy);
}
}
);
});
我猜猜它是某种形式,每一次都要取得正确的数字,而不仅仅是广告d到。 – bgadoci 2012-08-13 20:30:01
我一直在通过拥有不同数量的收件人的不同部分来破解它,但这似乎难以持久。我很难找到一个很好的方法来做到这一点。 – bgadoci 2012-08-13 20:33:35