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
Post a Comment