Я использую Laravel и в настоящее время создаю форму, в которой пользователи могут сначала выбрать категорию, а затем выбрать соответствующую подкатегорию.
Категория имеет идентификатор и имя, подкатегория имеет идентификатор и имя, а также parent_id (так что это идентификатор родительской категории).
Теперь я попробую следующее: пользователь может выбрать категорию, после этого появится второй select , и пользователь может выбрать подкатегорию из подкатегорий, принадлежащих родительской категории (и только тех!).
Таким образом, представление получает все категории и все подкатегории из контроллера.
Затем для категорий я сделал следующее:
<div class="form-group{{ $errors->has('category') ? ' has-error' : '' }}"> <label for="category" class="col-md-4 control-label">Kategorie</label> <div class="col-md-6"> <select> @foreach($categories as $category) <option value="<?php echo $category['id'];?>">{{$category->name}}</option> @endforeach </select> </div> </div>
А для подкатегорий у меня то же самое, только с подкатегориями:
<div class="form-group{{ $errors->has('subCategory') ? ' has-error' : '' }}"> <label for="subCategory" class="col-md-4 control-label">Unterkategorie</label> <div class="col-md-6"> <select> @foreach($subCategories as $subCategory) <option value="<?php echo $subCategory['id'];?>">{{$subCategory->name}}</option> @endforeach </select> </div> </div>
Теперь возникает вопрос: что мне нужно сделать (в подкатегории foreach) @if и проверить значение выбранного option category select а затем проверить, есть if($subcategory->parent_id == $chosenOptionID) , чтобы скажем, это в псевдокоде. Как я могу это сделать? Я не хочу отправлять форму или что-то еще, прежде чем кто-то тоже не будет выбирать подкатегорию … Конечно, я мог бы отправить запрос ajax контроллеру всякий раз, когда выбирается категория, а затем проверьте значение опцию в контроллере и отправку идентификатора. Но это вызовет очень большой трафик и, возможно, не будет лучшим решением, поэтому я хотел бы сделать это только, если у меня не будет лучшего способа сделать ….
PS: Вопрос не в том, чтобы скрыть подкатегории, когда не выбрана ни одна категория, thats basic js, я знаю, как это сделать. Я только хочу знать, если можно прочитать значение category select пока форма еще не отправлена.
EDIT : Я теперь попробовал AJAX вещь, но, кажется, есть небольшая ошибка … Что я изменил:
<div class="form-group{{ $errors->has('subCategory') ? ' has-error' : '' }}"> <label for="subCategory" class="col-md-4 control-label">Unterkategorie</label> <div class="col-md-6"> <select class="form-control" id="subCategorySelect"> </select> </div> </div>
Теперь выбор пуст и имеет идентификатор. Тогда в том же файле у меня есть следующий JS:
<script> $().ready(function(){ $('#categorySelect').change(function(){ var selectedOption = $('#categorySelect').find(":selected").val(); $.ajax({ url: '/getSubCategories', data: {'id': selectedOption}, type: 'GET', success: function (data) { $('#subCategorySelect').html(data); } }); }); }); </script>
/getSubcategories указывает на следующую функцию в моем контроллере:
public function returnSubCategories(Request $request){ $subCategories = Subcategory::where('parent_id', '=', $request->id); foreach($subCategories as $subCategory){ echo "<option value='$subCategory->id'>$subCategory->name</option>"; } }
Но это не работает. Запрос ajax отправляется при выборе опции, а также отправляется правильный идентификатор. Но почему-то ничего не выводится … Любые идеи почему?
Я наконец получил его работу с AJAX. Это мой первоначальный subCategorySelect .
<div class="form-group{{ $errors->has('subCategory') ? ' has-error' : '' }}"> <label for="subCategory" class="col-md-4 control-label">Unterkategorie</label> <div class="col-md-6"> <select class="form-control" id="subCategorySelect"> </select> </div> </div>
Теперь выбор пуст и имеет идентификатор. Тогда в том же файле у меня есть следующий JS:
<script> $().ready(function(){ $('#categorySelect').change(function(){ var selectedOption = $('#categorySelect').find(":selected").val(); $.ajax({ url: '/getSubCategories', data: {'id': selectedOption}, type: 'GET', success: function (data) { $('#subCategorySelect').html(data); } }); }); }); </script>
/getSubcategories указывает на следующую функцию в моем контроллере:
public function returnSubCategories(Request $request){ $subCategories = Subcategory::where('parent_id', '=', $request->id)->get(); foreach($subCategories as $subCategory){ echo "<option value='$subCategory->id'>$subCategory->name</option>"; } }
И он отлично работает.
надеюсь, что это поможет вам понять, как это работает с php в любом случае для одного выбранного варианта:
<div class="form-group"> <label class="control-label" for="country">Country:<span>*</span></label> <select name="country" type="text" class="form-control" id="country"> <option value="">--Country--</option> <?php include "../db/db.php"; //db-connection cause i want to load a country list $sql = "SELECT id, country_name FROM apps_countries ORDER BY country_name ASC"; $result = $conn->query($sql); if ($result->num_rows > 0) { //check if an entry is there while($row = $result->fetch_assoc()) { //get the values from the db //now this is the part you have to implement in your script if(isset($_POST["country"]) && $row["id"] == $_POST["country"]) { //check if country isset so if the user selected something $optionSelected = "selected='selected'"; } else{ $optionSelected = ""; } //your foreache loop goes here / add the value that is selected here /*@foreach($categories as $category) <option value="<?php echo $category['id']; ?>">{{$category->name}}</option> // get the associative array with "" and change it to $category["id"] @endforeach*/ /**for my attempt it was this {the id like as your category[id]} {set the selected here inside the option tag} ↓ ↓ */ $countrySet = "<option value='" .$row["id"]. "' ".$optionSelected.">".$row["country_name"]."</option>"; echo $countrySet; } } $conn->close(); ?> </select> </div>