Jquery 如何让标签与rails HABTM协会合作？

我有一个表格，我使用选择框从HABTM协会中选择工作地点：

<div class="form-group">
    <%= f.label "Working Locations", :class => 'control-label col-lg-2' %>
      <div class="col-lg-10">
        <%= f.collection_check_boxes :wrkloc_ids, Wrkloc.all, :id, :wrkstate do |b| %>
          <div class="collection-check-box-altered">
            <%= b.check_box %>
            <%= b.label %>
          </div>
        <% end %>
      </div>
  </div>

associates_controller.rb白名单：

def associate_params
  params.require(:associate).permit(:name, :wrkstate, { wrkloc_ids:[] })
end

模式：

  create_table "associates_wrklocs", id: false, force: :cascade do |t|
    t.integer "associate_id", null: false
    t.integer "wrkloc_id",    null: false
  end

  create_table "wrklocs", force: :cascade do |t|
    t.string   "wrkstate"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

将其标记为jQuery：

<script type="text/javascript">
    $(document).ready(function() {
        $(".add-tags").tagit({

            // Options
            fieldName: "wrkloc_ids",
            availableTags: ['AL', 'AK', 'AR', 'AZ', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'],
            //autocomplete: {delay: 0, minLength: 2},
            //showAutocompleteOnFocus: false,
            removeConfirmation: false,
            caseSensitive: true,
            allowDuplicates: false,
            allowSpaces: false,
            readOnly: false,
            tagLimit: null,
            singleField: false,
            singleFieldDelimiter: ' ',
            singleFieldNode: null,
            tabIndex: null,
            placeholderText: "type state abbreviation",

            // Events
            onTagClicked: function(event, ui) {
                console.log(ui.tag);
                console.log(ui.tagLabel);
                //window.location = ui.tag;
                //window.open(ui.tagLabel);
            },
            onTagLimitExceeded: function(event, ui) {
                console.log(ui.tag);
            }

        });

    });
  </script>

$（文档）.ready（函数（）{
$（“.add tags”）.tagit({
//选择权
字段名：“wrkloc_id”，
可用标签：[AL'，AK'，AR'，AZ'，CA'，CO'，CT'，DE'，FL'，GA'，HI'，ID'，IL'，IN'，IA'，KS'，KY'，LA'，ME'，MD'，MA'，MI'，MN'，MS'，MO MT'，NE'，NV NH NJ'，NM NY'，NC'，ND'，OH'，OK'，OR'，PA'，RI'，SC'，SD'，TN TX UT VT VA'，WA WV'，WY'，WY']，
//自动完成：{延迟：0，最小长度：2}，
//showAutocompleteOnFocus:错误，
Remove确认：false，
区分大小写：是的，
allowDuplicates:false，
allowSpaces:false，
只读：false，
tagLimit:null，
单字段：false，
singleFieldDelimiter:“”，
singleFieldNode:null，
tabIndex:null，
占位符文本：“键入状态缩写”，
//事件
onTagClicked：函数（事件、用户界面）{
console.log（ui.tag）；
console.log（ui.tagLabel）；
//window.location=ui.tag；
//window.open（ui.tagLabel）；
},
ontaglimitexeceded：函数（事件、用户界面）{
console.log（ui.tag）；
}
});
});

*此外，我还从我写的列表中获取了可用的标签。我需要把它像Wrkloc一样拉出来，也许吧

  create_table "associates_wrklocs", id: false, force: :cascade do |t|
    t.integer "associate_id", null: false
    t.integer "wrkloc_id",    null: false
  end

  create_table "wrklocs", force: :cascade do |t|
    t.string   "wrkstate"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

<script type="text/javascript">
    $(document).ready(function() {
        $(".add-tags").tagit({

            // Options
            fieldName: "wrkloc_ids",
            availableTags: ['AL', 'AK', 'AR', 'AZ', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'],
            //autocomplete: {delay: 0, minLength: 2},
            //showAutocompleteOnFocus: false,
            removeConfirmation: false,
            caseSensitive: true,
            allowDuplicates: false,
            allowSpaces: false,
            readOnly: false,
            tagLimit: null,
            singleField: false,
            singleFieldDelimiter: ' ',
            singleFieldNode: null,
            tabIndex: null,
            placeholderText: "type state abbreviation",

            // Events
            onTagClicked: function(event, ui) {
                console.log(ui.tag);
                console.log(ui.tagLabel);
                //window.location = ui.tag;
                //window.open(ui.tagLabel);
            },
            onTagLimitExceeded: function(event, ui) {
                console.log(ui.tag);
            }

        });

    });
  </script>