Question

我正在使用jquery生成数据并附加到html＃id.but datalist在firefox中运行正常，在chrome中发布 HTML代码：

    <td>
    <input type="type" class="form-control products" id="product_onchange"  name="onchangeValue" list="listValue"/>
    <datalist id="listValue">       
    </datalist>
    </td>

脚本代码：

    var update_product_dropdown = function (elm) {
    $.ajax({
    url:"api/v1/skuproducts?client_id="+$(elm).val(),
    method:"GET"
    }).done(function(data) {
    var optList = "";
    optList += "<option value=''>Select the Product</option>";
    for(var d in data) {
    optList +="<option value='["+data[d].product_code+"]-"+data[d].product_name+"'>                   ["+data[d].product_code+"]-"+data[d].product_name+"</option>";
    }
    $("#listValue").html(optList);
    })
    .fail(function() {
    console.log( "error" );
    });
    }

Answer 1

这是因为你的模态z-index（css）大于你的datalist的z-index，你需要通过在你的css文件中添加下一行来增加datalist的z-index：

   datalist{
       z-index: 1000;
   }

我也发现了firefox的这个问题。

Datalist不在chrome的bootstrap模式对话框中弹出

1 个答案: