Question

 <div class="update_genre_list">
        <input type="text" class="custom_input" id="suggestion_sub_genre" placeholder="">            
      </div>

  $.ajax({
          url: "<%= genre_suggestion_search_artists_path %>",
          data: {select_genre:select_genre},
          type: 'get',
          success: function(data) {
              $(".update_genre_list").parent().find('ul').remove();
              $("#suggestion_sub_genre").tokenInput(data,{
                  onAdd: function (item) {
                     $(".token_save").append('<li class="token-input-token"><p>'+item.name+'</p><span class="token-input-delete-token remove_token">×</span></li>');


                  }
              });
          }
      });

我想将tokeninput选中的项目显示给另一个div.Below是我要显示的div。

 <div class="token_save"></div>

我该怎么做？

Answer 1

设置第二个tokenInput字段并向其添加原始令牌的克隆可能更简单。

<强> HTML

<div class="update_genre_list">
    <input type="text" class="custom_input" id="suggestion_sub_genre" placeholder="">
</div>
<div id="token_save">
    <input>
</div>

<强>的Javascript

var $token_save_input = $("#token_save input").tokenInput();

$.ajax({
    url: "<%= genre_suggestion_search_artists_path %>",
    data: { select_genre: select_genre },
    type: 'get',
    success: function(data) {
        $(".update_genre_list").parent().find('ul').remove();
        $("#suggestion_sub_genre").tokenInput(data, {
            onAdd: function (item) {
                $token_save_input.tokenInput( 'add', $.extend({}, item) );
            }
        });
    }
});

未测试

我不确定$.extend(...)是否有必要，但我们更有保证确保克隆与原始版本的独立性高于.tokenInput( 'add', item )。

jQuery tokeninput将所选项更改为另一个div而不是父div

1 个答案: