CODEWITHSUNDEEP
javascriptjquery
Aazad K
Aazad K

Reputation: 13

Adding " li " items to select as options

I'm using tag-it, and when I add values to it, I get a ul like this 

<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>

I'm trying to populate a select element from it 

$("#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+'"]'));
        }
});

but the above code does not work as expected.

Link to JSFiddle: https://jsfiddle.net/LjomqhbL/16/

Upvotes: 1

Views: 171

Answers (3)

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

You can do it like following using append() and remove(). To add index as value declare availableTags as a global variable. Hope this will help you.

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

Upvotes: 0

Tamil Selvan C
Tamil Selvan C

Reputation: 20199

  1. To get tag name use ui.tagLabel.
  2. select variable is not defined in your code. initialize select variable as var select = document.querySelector("select"); or var select = document.querySelector("select[name='tags']");

Try: https://jsfiddle.net/tamilcselvan/LjomqhbL/19/

Snippet:

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+'"]'));
		}
});
<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>

Edit:

add position of tag as value i.e <option value="2">Java</option> instead of <option value="Java">Java</option>

this.value return the tag string with seperator comma. eg java,javascript. So spilt the string and get the length of array use as option value. 

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

Upvotes: 1

TipuZaynSultan
TipuZaynSultan

Reputation: 783

As far as I could find... You want the last selection to be your selected value. So I just changed the Script a bit.

$("#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

Upvotes: 0

Related Questions