Question

我正在使用tag-it，当我为其添加值时，我会得到ul这样的

<ul id="mytags" class="tagit ui-widget ui-widget-content ui-corner-all">
<li class="tagit-choice ui-widget-content ui-state-default ui-corner-all tagit-choice-editable">
<span class="tagit-label">Android</span>
<a class="tagit-close"><span class="text-icon">×</span><span class="ui-icon ui-icon-close"></span></a>
</li>
<li class="tagit-choice ui-widget-content ui-state-default ui-corner-all tagit-choice-editable">
<span class="tagit-label">Java</span>
<a class="tagit-close"><span class="text-icon">×</span><span class="ui-icon ui-icon-close"></span></a>
</li>
<li class="tagit-new"><input type="text" class="ui-widget-content ui-autocomplete-input" autocomplete="off"></li>
</ul>

我正在尝试从中填充选择元素

$("#tagQuery").tagit({
    availableTags: ["c++", "java", "play", "scala", "ruby", "python", "c"],
    afterTagAdded : function(event, ui) {
             var option = document.createElement("option");
                option.value = this.value;
                option.text = this.name;
                option.selected = 'selected';
                select.appendChild(option);
        },
        afterTagRemoved : function(event, ui) {
            select.removeChild(select.querySelector('[value="'+this.value+'"]'));
        }
});

但上面的代码没有按预期工作。

链接到JSFiddle：https://jsfiddle.net/LjomqhbL/16/

Answer 1

要使用ui.tagLabel获取标记名称。
选择变量。将选择变量初始化为var select = document.querySelector("select");或var select = document.querySelector("select[name='tags']");

尝试：https://jsfiddle.net/tamilcselvan/LjomqhbL/19/

<强>段：

＆＃13;

var select = document.querySelector("select");
$("#tagQuery").tagit({
    availableTags: ["c++", "java", "php", "javascript", "ruby", "python", "c"],
    afterTagAdded : function(event, ui) {
			 var option = document.createElement("option");
       console.log(ui);
			    option.value = ui.tagLabel;
			    option.text =  ui.tagLabel;
			    option.selected = 'selected';
			    select.appendChild(option);
		},
		afterTagRemoved : function(event, ui) {
			select.removeChild(select.querySelector('[value="'+ui.tagLabel+'"]'));
		}
});

＆＃13;

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css" rel="stylesheet"/>
<link href="https://rawgit.com/aehlke/tag-it/master/css/jquery.tagit.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script src="https://rawgit.com/aehlke/tag-it/master/js/tag-it.js"></script>

<input type="hidden" id="tagQuery" type="text" placeholder="tags" class="input-field"/><br> 
			<ul id="mytags"></ul><br><br>  
      
      <select name="tags" path="tags">
			</select>

＆＃13;

修改

将标记的位置添加为值<option value="2">Java</option>而不是<option value="Java">Java</option>

this.value使用分隔符逗号返回标记字符串。例如java，javascript。因此溢出字符串并将数组的长度用作选项值。

var arr=this.value.split(','); option.value = arr.length;

Answer 2

您可以使用append()和remove()执行此操作。将索引添加为值声明availableTags作为全局变量。希望这会对你有所帮助。

var availableTags= ["c++", "java", "php", "javascript", "ruby", "python", "c"];

$("#tagQuery").tagit({
    availableTags: availableTags,
    afterTagAdded : function(event, ui) {
        var arr=this.value.split(',');
        var text = arr[arr.length - 1];
        var index = availableTags.indexOf(text)+1;

       $('select[name=tags]').append('<option selected value='+index+'>'+text+'</option>');
    },
    afterTagRemoved : function(event, ui) {
        $('select[name=tags] option[value='+ui.tagLabel+']').remove();
    }
});

UPDATED FIDDLE

Answer 3

据我所知......您希望最后一个选项成为您选择的值。所以我只是改变了一下脚本。

$("#tagQuery").tagit({
      availableTags: ["c++", "java", "php", "javascript", "ruby", "python", "c"],
      afterTagAdded : function(event, ui) {
          $option = $("<option>");
          $option.attr("value", ui.tagLabel);
          $option.text(ui.tagLabel);
          $("select[name='tags']").append($option);
          $("select[name='tags']").val(ui.tagLabel);
      },
      afterTagRemoved : function(event, ui) {
            $("select[name='tags']").find('option[value="'+ui.tagLabel+'"]').remove();
      }
});

Fiddle

添加“li”项目以选择作为选项

3 个答案:

UPDATED FIDDLE