jQuery Chosen插件在bootstrap模式上动态添加选项

时间:2014-03-28 09:43:16

标签: jquery ajax twitter-bootstrap modal-dialog jquery-chosen

我一直在尝试各种方法从ajax动态添加,但无济于事。

我试过了:

$(function(){
//var htmlstring="";
$('#createNewTags').tokenfield();
$('#myModal').on('shown.bs.modal', function () {
    //var htmlstring="";
      $('.chzn-select', this).load("/availableTags.do", function(response, status, xhr ){
          var htmlstring="";
          if(status == "success"){
              var arrayVal = $.parseJSON(response.substring(response.indexOf("["), response.indexOf("}")));
              //var htmlstring="";
              $.each(arrayVal, function( index, value ) {
                  htmlstring +="<option value="+value+">"+value+"<option>\n";
              });

          }

      });
      $('.chzn-select', this).chosen();

});

我的htmlstring确实填充了我想要的内容,即

<option value="tagvalue">tagvalue</option>
<option value="tagvalue2">tagvalue2</option>
<option value="tagvalue3">tagvalue3</option>
<option value="tagvalue4">tagvalue4</option>

但我不知道如何添加这个htmlstring来阅读。我的jsp页面上有“select”但是append不起作用。知道我应该如何从这里继续吗?我没有拉出数据的问题。

2 个答案:

答案 0 :(得分:3)

试试这个

$('.chzn-select').append("<option value='"+value+"'>"+value+"</option>");
$('.chzn-select').chosen().trigger("chosen:updated");

答案 1 :(得分:0)

没有必要使用html字符串。只需在循环中附加select即可。最后,您需要更新chosen()元素。

$(function(){
$('#createNewTags').tokenfield();
$('#myModal').on('shown.bs.modal', function () {
    //var htmlstring="";
      $('.chzn-select', this).load("/availableTags.do", function(response, status, xhr ){
          var htmlstring="";
          if(status == "success"){
              var arrayVal = $.parseJSON(response.substring(response.indexOf("["), response.indexOf("}")));
              //var htmlstring="";
              $.each(arrayVal, function( index, value ) {
                  $("select").append("<option value="+value+">"+value+"<option>");
              });

          }

      });
      $('.chzn-select', this).chosen().trigger("chosen:updated");

});

查看Chosen documentation并查找动态更新选择