gpt4 book ai didi

javascript - 如何避免选择框上的ajax结果

转载 作者:行者123 更新时间:2023-11-30 20:46:22 25 4
gpt4 key购买 nike

screen1

正如您在上面的示例中一样,我有占位符(没有值的选项)来表示例如。 选择子类别,但只要我更改我的类别值,子类别的结果就会显示。

我想要的是当我在子类别下拉列表中选择类别时仍然显示 Select Subcategory 但在该类别下加载所选类别的结果。简单来说:

Instead of showing results directly, shows placeholder option and results be under it.

这是我的代码:

// HTML
<label for="specification_id">specifications</label>
<select name="specification_id" class="form-control">
<option value="">Select Specification</option>
</select>

// JAVASCRIPT

<script type="text/javascript">
$(document).ready(function() {
$('select[name="subcategory_id"]').on('change', function() {
var subcategoryID = $(this).val();
if(subcategoryID) {
$.ajax({
url: '{{ url('getspecifications') }}/'+encodeURI(subcategoryID),
type: "GET",
dataType: "json",
success:function(data) {
$('select[name="specification_id"]').empty();
$.each(data, function(key, value) {
$('select[name="specification_id"]').append(
"<option class='form-control' value='"+ value['id'] +"'>"+ value['title'] +"</option>"
);
});
}
});
}else{
$('select[name="specification_id"]').empty();
}
});
});
</script>

最佳答案

清空项目后,确保将空白占位符追加回其中:

else{
$('select[name="specification_id"]').empty().append("<option value='' selected>Select Specification</option>");
}

或者在一开始清除选择时跳过它:

else{
$('select[name="specification_id"]').not(':first').remove();
}

我忘记了 success: 函数中的 empty():

success:function(data) {
$('select[name="specification_id"]').not(':first').remove();
//...

或:

success:function(data) {
$('select[name="specification_id"]').empty().append("<option value='' selected>Select Specification</option>");
//...

关于javascript - 如何避免选择框上的ajax结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48650245/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com