使用值和选项引导选择以创建新值答案

【问题标题】：Bootstrap select with values and option to create new value使用值和选项引导选择以创建新值
【发布时间】：2017-01-15 01:52:45
【问题描述】：

我想要一个包含数据库中预定义选项的选择字段，并允许用户从预定义选项中进行选择，或者如果列表中没有合适的值，则可以创建一个新值。

我正在使用 Bootstrap 3

并使用类似 ajax 的方式创建选择字段

  /*
  * 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 i = 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 = i+1;
            });
         },
         error: function(xhr, ajaxOptions, thrownError) {
             alert(xhr.status);
             alert(thrownError);
         }
      });
    }
  });

简而言之，我想要input type="text" 和select 标签的组合

【问题讨论】：

标签： jquery twitter-bootstrap select

【解决方案1】：

 /*
  * 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 i = 0;
                  $.each(data, function(key, value) {
                    var message = '<div class="form-group">' +
                                  '<label>'+value['title']+'</label>' +
                                  '<input type="hidden" name="product_attribute_type_title[]" style="display:none;" class="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 += '<option value="others">Others</option></select>' +
                            '</div>';
                    $('#product_attributes').append(message);
            // change events
            $(".select2").on("change",function(){
            if($(this).val() == "others")
               {$(this).find(".product_attribute_type_title").css("display","none");
$(this).find(".product_attribute_type_title").focus();
               }});

                    i = i+1;
                });
         },
         error: function(xhr, ajaxOptions, thrownError) {
             alert(xhr.status);
             alert(thrownError);
         }
      });
    }
  });

【讨论】：

试试这样的。
我试过了，但 onchange 不能处理 jQuery 生成的代码。如果在 html 中预定义选择字段，则同样可以正常工作

【解决方案2】：

在你的 ajax 调用之后添加这个

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

并在html中添加

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

现在我猜，它回答了你的问题。

【讨论】：