blocks|key|626044|text|在ajax响应中，尝试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|626045|var+newOption+=+new+Option("Text",+__value__);++
$("#tagSelection").append(newOption);++
**/*++add+this+line+*/++
$("#tagSelection").val(__value__);**++
$("#tagSelection").trigger("liszt:updated");++|code-block|syntax|javascript|626046|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

in your ajax response, try

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

blocks|key|411006|text|这些是我为解决这个问题而对所选插件(jquery版本)所做的全部更改|type|unstyled|depth|inlineStyleRanges|entityRanges|data|411007|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;
++++++++++//+...
};|code-block|syntax|javascript|411008|this.new_term_to_be_added维护当前键入的字符串，该字符串不在预定义的选项中。|411009|options.addNewElementCallback是对调用函数的回调，允许它们处理它(发送到服务器等)。它必须是同步的。下面是骨架：|411010|var+addTagCallback+=+function(tagText)+{
++++var+newElement+=+null;
++++$.ajax({url+:+that.actionUrl,+
++++++++async+:+false,+
++++++++dataType:+"json",
++++++++data+:+{+//+....},
++++++++success+:+function(response)+{
++++++++if(response)+{
++++++++++++++++++++++++++++$('#tagSelection').append(
++++++++++++++++++++++++++++++++$('<option></option>')
++++++++++++++++++++++++++++++++++++++.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_"+%2B+($("#tagSelection+option").length+-+1));
++++++++}+else+{
++++++++++++//+Handle+Error
++++++++}
++++}});
++++return+newElement;
};|411011|newElement是一个jquery元素--最新添加到选项列表中的li对象。|411012|通过执行this.result_highlight+=+newElement；和this.result_select(evt)；，我告诉所选的插件选择它。无论是单选还是多选，这都是有效的。Rifky的解决方案只适用于single+select。|411013|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

These are the complete set of changes I did to the chosen plugin (jquery version) to solve this problem

<pre><code>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 &amp;&amp; this.options.addNewElementCallback != null) {
 var newElement = this.options.addNewElementCallback(this.new_term_to_be_added);


 if(newElement!=null &amp;&amp; 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;
 // ...
};
</code></pre>

The this.new_term_to_be_added maintains the currently typed string which is not among the pre-defined options. 

The options.addNewElementCallback is the callback to the calling function to allow them to process it (send it to server etc.) and it has to be synchronous. Below is the skeleton:

<pre><code>var addTagCallback = function(tagText) {
 var newElement = null;
 $.ajax({url : that.actionUrl, 
 async : false, 
 dataType: "json",
 data : { // ....},
 success : function(response) {
 if(response) {
 $('#tagSelection').append(
 $('&lt;option&gt;&lt;/option&gt;')
 .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;
};
</code></pre>

The newElement is a jquery element - the latest added li object to list of options.

By doing this.result_highlight = newElement; and this.result_select(evt); I tell the Chosen plugin to select this. This works whether it is a single select or a multi-select. Rifky's solution will work only for single select.

blocks|key|626161|text|我一直在做这件事。我不喜欢Shreeni的设置selected+(无意冒犯)的行，所以我选择了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|626162|$('#tagSelection').append(
++++$('<option></option>')
++++++++.val(data.Item.Id)
++++++++.html(data.Item.Value)
++++++++.attr("selected",+"selected"));
$("#tagSelection").trigger("liszt:updated");|code-block|syntax|javascript|626163|我个人认为它更简洁一些(使用多选框进行了测试，效果很好)|626164|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I've just been doing this. I didn't like Shreeni's line for setting selected (no offence) so i went with

<pre><code>$('#tagSelection').append(
 $('&lt;option&gt;&lt;/option&gt;')
 .val(data.Item.Id)
 .html(data.Item.Value)
 .attr("selected", "selected"));
$("#tagSelection").trigger("liszt:updated");
</code></pre>

which i personally think is a bit cleaner (tested with multiselect box and it works fine)

blocks|key|411099|text|我认为这不是最好的做法，但这段代码对我来说是有效的。数据返回有一个html标记<option>|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|411100|$.post("url.php",{data:data},function(data){
$('.choosen').empty().append(data);
$(".choosen").trigger("liszt:updated");
});|code-block|syntax|javascript|411101|entityMap^0|13|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

i think its not the best practice but this code works for me. data return has a html tag<code>&lt;option&gt;</code>

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

blocks|key|626217|text|我简单地这样做，它完美地工作了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|626218|//+this+variable+can+be+filled+by+an+AJAX+call+or+so
var+optionsArray+=+[+
++++{"id":+1,+"name":+"foo"},+
++++{"id":+2,+"name":+"bar"}
];

var+myOptions+=+"<option+value></option>";
for(var+i=0;+i<optionsArray.length;+i%2B%2B){
++++myOptions+%2B=++'<option+value="'%2BoptionsArray[i].id%2B'">'%2BoptionsArray[i].name%2B'</option>';
}

//+uses+new+"chosen"+names+instead+of+"liszt"
$(".chosen-select").html(myOptions).chosen().trigger("chosen:updated");|code-block|syntax|javascript|626219|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I do it simply this way and it works perfectly:

<pre><code>// this variable can be filled by an AJAX call or so
var optionsArray = [ 
 {"id": 1, "name": "foo"}, 
 {"id": 2, "name": "bar"}
];

var myOptions = "&lt;option value&gt;&lt;/option&gt;";
for(var i=0; i&lt;optionsArray.length; i++){
 myOptions += '&lt;option value="'+optionsArray[i].id+'"&gt;'+optionsArray[i].name+'&lt;/option&gt;';
}

// uses new "chosen" names instead of "liszt"
$(".chosen-select").html(myOptions).chosen().trigger("chosen:updated");
</code></pre>

blocks|key|411133|text|你不需要太大的压力，保持简单。您需要在选择框html中添加ajax响应，然后更新select。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|411134|这看起来像..。|411135|代码：|411136|var+baseURL='Your+Url';

+$.ajax({

          +type:+"POST",

           url:+baseURL%2B"Your+function",+//enter+path+for+ajax

           data:+"id="%2Bid,+++//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%2B%2B){

              ++++++++++++append%2B="<option+value='"%2Bjson_data['response_data'][i].category_name%2B"'>"%2Bjson_data['response_data'][i].category_name%2B"</option>";
                           ++++++++//+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

  +});+++|code-block|syntax|javascript|411137|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You don't need to much stress , keep it simple. You need to add your ajax response in select box html and then update chosen.

This will look like..

Code:

<pre><code>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 &gt; 0)){

                      for(i=0;i &lt; json_data['response_data'].length; i++){

               append+="&lt;option value='"+json_data['response_data'][i].category_name+"'&gt;"+json_data['response_data'][i].category_name+"&lt;/option&gt;";
                            // 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

   }); 
</code></pre>

I am trying to use "Chosen" plugin by harvest (http://harvesthq.github.com/chosen/) and it works for the static set of options I am passing. However, what I want is that whenever anybody types something that is not in the pre-filled options, then it should send that to the server as a new option and on successful response, I want to not only add that to the valid list of options, but also make it select it.

Reloading the options is fairly simple:

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

However, I don't know how to make "Chosen" plugin pick this as the value. I would love to do something like 

<pre><code>$("#tagSelection").trigger("liszt:select:__value__"); 
</code></pre>

or something similar. 

Any suggestions?

(ps: I am trying to build a "tagging" plugin based on chosen. So, if the tag being typed doesn't exist, it will add it to the server and then select it straight away.)

Is there a way to dynamically ajax add elements through jquery chosen plugin?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试使用“set”plugin by trying ()，它适用于我传递的静态选项集。然而，我想要的是，当任何人输入的内容不在预先填写的选项中时，它应该将其作为新选项发送到服务器，并在成功响应时，我不仅希望将其添加到有效选项列表中，而且还希望它选择它。重新加载选项相当简单：// In ajax responsev...

问有没有一种方法可以通过jquery选择的插件动态地添加ajax元素？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有一种方法可以通过jquery选择的插件动态地添加ajax元素？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有一种方法可以通过jquery选择的插件动态地添加ajax元素？
EN