2016-07-28 80 views
1

我想嘗試laravel 5中的依賴下拉列表。 在包含多個列表(如Electronics,Automobiles)的主下拉列表中單擊或更改事件。 我想創建另一個完整的下拉菜單。 如果我點擊電子比彼此下拉菜單會自動對電子設備產生。在laravel中創建下拉示例from existingnig下拉列表

enter image description here 如果我當時另一個下拉菜單會爲electornics自動生成從第一個下拉列表電子點擊。 比如果我點擊從第一個下拉列表汽車比它應該替換最後一個自動創建的下拉這是電子產品。

+0

請添加一些代碼,並解釋你想達到的最終結果是什麼。 – TheFallen

回答

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>