响应文本框和一个空的“选择”中加载列表

Question

的选择，我有两个选择框，一个是产品，另一种是产品类型。产品类型列表中显示的内容取决于产品中选择的内容。我想要实现的是在加载列表顶部的空选项，以便我可以在产品上进行搜索。我将如何去做这件事？

到目前为止，我已经

<select class="form-control" name="product_type" id="producttype"> 
    <option value=""></option> 
</select> 

和JS/jQuery的

$('#product').on('change', function(e) { 
    console.log(e); 

    var prod_id = e.target.value; 

    $.get('/ajax-subcat?prod_id=' + prod_id, function(data) { 
    $('#producttype').empty(); 

    $.each(data, function(index, subcatObj) { 
     $('#producttype').append('<option value="' + subcatObj.id + '">' + subcatObj.name + '</option>'); 
    }); 
    }); 
}); 

Answer 1

可以追加一条默认选项填写你的选择在每个前，像这样：

$('#product').on('change', function(e) { 
    console.log(e); 

    var prod_id = e.target.value; 

    $.get('/ajax-subcat?prod_id=' + prod_id, function(data) { 
    $('#producttype').empty(); 

    $('#producttype').append('<option selected disabled>Select a product type</option>'); 

    $.each(data, function(index, subcatObj) { 
     $('#producttype').append('<option value="' + subcatObj.id + '">' + subcatObj.name + '</option>'); 
    }); 
    }); 
});