jquery - Bootstrap select with values and option to create new value -


i want select field predefined options database , allow user either select predefined options or create new value if suitable value not in list.

i'm using bootstrap 3

and creating select field using ajax like

  /*   * select product attributes on change of product type   */   $("#producttypes").on('change',function() {      var id = $(this).val();       $("#product_attributes").html('');      if (id) {        var datastring = 'id='+ id;        $.ajax({            datatype:'json',            type: "post",            url: '/products/ajax-get-product-attribute-types' ,            data: datastring,            cache: false,            success: function(data) {               var = 0;               $.each(data, function(key, value) {                 var message = '<div class="form-group">' +                               '<label>'+value['title']+'</label>' +                               '<input type="hidden" name="product_attribute_type_title[]" value="'+value['value']+'" />' +                               '<select name="product_attribute_value[]" class="form-control select2" style="width:100%">';                           $.each(value['product_attributes'], function(a, b) {                            message += '<option value="'+b['value']+'">'+b['value']+'</option>';                 })                  message += '</select>' +                         '</div>';                 $('#product_attributes').append(message);                 = i+1;             });          },          error: function(xhr, ajaxoptions, thrownerror) {              alert(xhr.status);              alert(thrownerror);          }       });     }   }); 

in short, want combination of input type="text" , select tags

add after ajax call

$(".select2").append('<option value="">other</option>'); $(".select2").on("change", function(){  if(this.value=="")   $(".othertxt").removeclass("hidden").focus();  else   $(".othertxt").addclass("hidden"); }); 

and in html add

<input type="text" class="hidden othertxt"> 

now guess, answers ur question.


Comments

Popular posts from this blog

java - Jasper subreport showing only one entry from the JSON data source when embedded in the Title band -

mapreduce - Resource manager does not transit to active state from standby -

serialization - Convert Any type in scala to Array[Byte] and back -