Question

我想在laravel 5中尝试依赖下拉列表。在哪个主下拉列表中有几个列表，如（电子，汽车），其中一个列表点击或更改事件。我想创建另一个完整的下拉列表。如果我点击电子设备而不是另一个下拉列表将自动为电子设备生成。

enter image description here 如果我在当时从第一个下拉列表中点击电子设备，将自动为电子设备生成另一个下拉列表。而且如果我从第一个下拉列表中点击汽车，它应该替换最后自动创建的电子产品下拉列表。

Answer 1

<!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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <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>

在existsnig下拉列表中创建laravel中的下拉示例

1 个答案: