有没有办法通过jquery选择的插件动态ajax添加元素？

我试图通过收获（http://harvesthq.github.com/chosen/）使用“选择”插件，它适用于我传递的静态选项集。 但是，我想要的是，每当有人输入不在预填充选项中的内容时，它应该将其作为新选项发送到服务器，并且在成功响应时，我不仅要将其添加到有效列表中选项，但也让它选择它。

重新加载选项非常简单：

// In ajax response var newOption = new Option("Text", __value__); $("#tagSelection").append(newOption); $("#tagSelection").trigger("liszt:updated"); 

但是，我不知道如何使“选择”插件选择此值作为值。 我很想做点什么

 $("#tagSelection").trigger("liszt:select:__value__"); 

或类似的东西。

有什么建议？

（ps：我正在尝试根据选择构建一个“标记”插件。因此，如果键入的标签不存在，它会将其添加到服务器，然后立即选择它。）

Answer 1

我刚刚这样做了。 我不喜欢Shreeni的选线（没有进攻），所以我去了

 $('#tagSelection').append( $('') .val(data.Item.Id) .html(data.Item.Value) .attr("selected", "selected")); $("#tagSelection").trigger("liszt:updated"); 

我个人认为有点清洁（用多选框测试，它工作正常）

Answer 2

这些是我对所选插件（jquery版本）所做的全部更改，以解决此问题

 Chosen.prototype.choice_build = function(item) { this.new_term_to_be_added = null; // .... }; Chosen.prototype.no_results = function(terms) { // .... no_results_html.find("span").first().html(terms); this.new_term_to_be_added = terms; return this.search_results.append(no_results_html); }; Chosen.prototype.keydown_checker = function(evt) { // ... case 13: if(this.new_term_to_be_added != null && this.options.addNewElementCallback != null) { var newElement = this.options.addNewElementCallback(this.new_term_to_be_added); if(newElement!=null && newElement.length == 1) { // KEY TO SOLVING THIS PROBLEM this.result_highlight = newElement; // This will automatically trigger the change/select events also. // Nothing more required. this.result_select(evt); } this.new_term_to_be_added = null; } evt.preventDefault(); break; // ... }; 

this.new_term_to_be_added维护当前键入的字符串，该字符串不在预定义的选项中。

options.addNewElementCallback是对调用函数的回调，允许它们处理它（将它发送到服务器等）并且它必须是同步的。 下面是骨架：

 var addTagCallback = function(tagText) { var newElement = null; $.ajax({url : that.actionUrl, async : false, dataType: "json", data : { // ....}, success : function(response) { if(response) { $('#tagSelection').append( $('') .val(data.Item.Id) .html(data.Item.Value) .attr("selected", "selected")); $("#tagSelection").trigger("liszt:updated"); // Get the element - will necessarily be the last element - so the following selector will work newElement = $("#tagSelection_chzn li#tagSelection_chzn_o_" + ($("#tagSelection option").length - 1)); } else { // Handle Error } }}); return newElement; }; 

newElement是一个jquery元素 – 最新添加的li对象列表选项。

通过这样做.result_highlight = newElement; 和this.result_select（evt）; 我告诉Chosen插件选择这个。 无论是单选还是多选，这都有效。 Rifky的解决方案仅适用于单选。

Answer 3

在此处创建了包含所需function的分支。 这个fork被称为koenpunt fork。

您可以在harvesthq github网站上完成此function的讨论

• https://github.com/harvesthq/chosen/pull/506
• https://github.com/harvesthq/chosen/pull/320
• https://github.com/harvesthq/chosen/pull/166

我对发生的事情的总结：

1. 很多人都想要这个function
2. 一些人已经使用建议的解决方案创建了拉取请求
3. 最佳解决方案是pull-request 166
4. “被选中”的作者决定不包括该function
5. koenpunt（pull-request 166的作者）创建了一个’选择’的分支
6. 人们已经开始放弃“选择”的harvesthq版本，转而使用koenpunt fork

Answer 4

从版本1.0开始，上面的一些建议不再相关。 以下是所有需要的：

 --- /home/lauri/Downloads/chosen_v1.0.0 (original)/chosen.jquery.js +++ /home/lauri/Downloads/chosen_v1.0.0 (modified)/chosen.jquery.js @@ -408,8 +408,18 @@ break; case 13: evt.preventDefault(); - if (this.results_showing) { + if (this.results_showing && this.result_highlight) { return this.result_select(evt); + } + var new_term_to_be_added = this.search_field.val(); + if(new_term_to_be_added && this.options.add_term_callback != null) { + var newTermID = this.options.add_term_callback(new_term_to_be_added); + if(newTermID) { + this.form_field_jq.append( + $('').val(newTermID).html(new_term_to_be_added).attr("selected", "selected") + ); + this.form_field_jq.trigger("chosen:updated"); + } } break; case 27: 

选项如下：

 {add_term_callback: addTagCallback, no_results_text:'Press Enter to add:'} 

这意味着如果“橙色”不在水果列表中，它只会提示：

按Enter键添加：“橙色”

回调应该通过任何必要的方式注册新术语，并返回新选项的ID（或基础选择元素的上下文中的值）。

 var addTagCallback = function(tagText) { // do some synchronous AJAX return tagID; }; 

Answer 5

在你的ajax响应中，试试吧

 var newOption = new Option("Text", __value__); $("#tagSelection").append(newOption); **/* add this line */ $("#tagSelection").val(__value__);** $("#tagSelection").trigger("liszt:updated"); 

Answer 6

我认为这不是最好的做法，但这段代码对我有用。 数据返回有一个html标记

 $.post("url.php",{data:data},function(data){ $('.choosen').empty().append(data); $(".choosen").trigger("liszt:updated"); }); 

Answer 7

我只是这样做，它完美地运作：

 // this variable can be filled by an AJAX call or so var optionsArray = [ {"id": 1, "name": "foo"}, {"id": 2, "name": "bar"} ]; var myOptions = ""; for(var i=0; i'+optionsArray[i].name+''; } // uses new "chosen" names instead of "liszt" $(".chosen-select").html(myOptions).chosen().trigger("chosen:updated"); 

Answer 8

你不需要太多压力，保持简单。 您需要在选择框html中添加ajax响应，然后更新所选。

这看起来像……

码：

 var baseURL='Your Url'; $.ajax({          type: "POST",           url: baseURL+"Your function", //enter path for ajax           data: "id="+id, //pass any details           success: function(response){ //get response in json_encode()formate                 var json_data = JSON.parse(response);                  var i=0; var append='';                  if((json_data['catss_data'].length > 0)){                      for(i=0;i < json_data['response_data'].length; i++){              append+=""+json_data['response_data'][i].category_name+"";                           // make response formate in option                        }                    $('#(selectbox-id)').html(append); // enter select box id and append data in it                     }                 } $("#(selectbox-id)").trigger("chosen:updated"); // enter select box id and update chosen  });