从现有下拉列表中用laravel创建下拉示例
从现有下拉列表中用laravel创建下拉示例
提问于 2016-07-28 11:28:36
我想在laravel 5中尝试依赖下拉，其中主下拉列表有几个列表，比如(电子、汽车)，并从其中之一点击或更改事件。我想再创建一个完整的下拉列表。如果我点击电子，比另一个下拉将自动生成的电子。
在这里输入图像描述，如果我在第一个下拉列表中点击了电子设备，那么另一个下拉列表将自动生成给选民。如果我点击第一个下拉列表中的汽车，它应该取代最后一个自动创建的下拉列表，这是用于电子产品的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-07-29 07:08:39
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dependent Drop-down Demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<h1>Dependent Drop-down Demo</h1>
<div class="container">
{!! Form::open(['url'=>'Demo'] ) !!}
<div class="dropdown">
<select name="category" id="category" class=" form-control">
<option value=" "selected disabled>Select Category</option>
@foreach($categories as $category)
<option value='{{ $category->id }}' > {{$category->name}} </option>
@endforeach
</select>
<select hidden name="subcategory" id="subcategory" class=" form-control">
</select>
<select hidden name="semicategory" id="semicategory" class=" form-control">
</select>
</div>
{!! Form::close() !!}
</div>
<script>
$("#category").on('change', function(e){
alert("test");
console.log(e);
$("#semicategory").hide();
$("#subcategory").show();
var category_id = e.target.value;
var s = $('<select />');
//ajax
$.get('/index?category_id=' + category_id, function(data){
console.log(data);
$("#subcategory").empty();
$.each(data, function(index, subcatObj){
$("#subcategory").append('<option value ="'+ subcatObj.id +'">'+subcatObj.name+'</option>');
});
});
});
$("#subcategory").on('change', function(e){
alert("hello");
console.log(e);
$("#semicategory").show();
var subcategory_id = e.target.value;
//ajax
$.get('/index1?subcategory_id=' + subcategory_id, function(data){
console.log(data);
$("#semicategory").empty();
$.each(data, function(index, subcatObj1){
$("#semicategory").append('<option value ="'+ subcatObj1.id +'">'+subcatObj1.name+'</option>');
});
});
// $("#subcategory").hide();
});
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38635050
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号