Я пытаюсь создать окно поиска, в котором опция, выбранная из «box1», заполняет параметры, доступные для «box2». Параметры для обоих полей указаны в моей базе данных MYSQL. Моя проблема в том, что я не знаю, как выполнить запрос на основе первого запроса без обновления страницы, которая была бы утомительной и раздражающей.
HTML / PHP
<form role="form" action="search.php" method="GET"> <div class="col-md-3"> <select class="form-control"> <?php $result = mysqli_query($con,"SELECT `name` FROM school"); while($row = mysqli_fetch_array($result)) { echo '<option name="'.$row['name'].'">'.$row['name'].' School</option>'; } ?> </select> </div> <div class="col-md-3"> <select class="form-control"> <?php $result = mysqli_query($con,"SELECT * FROM products"); while($row = mysqli_fetch_array($result)) { echo '<option name="'.$row['product'].'">'.$row['product'].'</option>'; } mysqli_close($con); ?> </select> </div> <button type="submit" class="btn btn-info">Search</button> </form> Я думаю, что запрос будет выглядеть примерно так. AJAX может быть решением этой проблемы, но я не уверен, как использовать AJAX для выполнения этого запроса без обновления.
SELECT `product` FROM products WHERE `school` = [SCHOOL NAME FROM BOX 1]
Заранее спасибо!
Сначала создайте меню выбора no1 с помощью php, как вы упомянули выше. Затем добавьте к нему «change» eventListener, например:
$('#select1').change(createSelect2); function createSelect2(){ var option = $(this).find(':selected').val(), dataString = "option="+option; if(option != '') { $.ajax({ type : 'GET', url : 'http://www.mitilini-trans.gr/demo/test.php', data : dataString, dataType : 'JSON', cache: false, success : function(data) { var output = '<option value="">Select Sth</option>'; $.each(data.data, function(i,s){ var newOption = s; output += '<option value="' + newOption + '">' + newOption + '</option>'; }); $('#select2').empty().append(output); }, error: function(){ console.log("Ajax failed"); } }); } else { console.log("You have to select at least sth"); } }
Теперь в меню выбора no2 есть новые опции в соответствии с выбранным выбором.
И файл php:
<?php header('Content-Type: application/json; charset=utf-8'); header('Access-Control-Allow-Origin: *'); if(isset($_GET['option'])) { $option = $_GET['option']; if($option == 1) { $data = array('Arsenal', 'Chelsea', 'Liverpool'); } if($option == 2) { $data = array('Bayern', 'Dortmund', 'Gladbach'); } if($option == 3) { $data = array('Aek', 'Panathinaikos', 'Olympiakos'); } $reply = array('data' => $data, 'error' => false); } else { $reply = array('error' => true); } $json = json_encode($reply); echo $json; ?>
Конечно, я использую некоторые демо-данные, но вы можете сделать запрос sql, заполнив массив $ data и отправить их как json с правильными заголовками. Наконец, используйте еще несколько js для второго меню выбора:
$('#select2').change(selectSelect2); function selectSelect2(){ var option = $(this).find(':selected').val(); if(option != '') { alert("You selected: "+option); } else { alert("You have to select at least sth"); } }
Проверьте здесь http://jsfiddle.net/g3Yqq/2/ рабочий пример
Попробуй это:
You made one mistake here in select && option tag structure of HTML. Just modify this and your code will work. <select class="form-control" name="ddlist1"> && <?php echo '<option value = "'.$row['name'].'">'.$row['name'].' School</option>'; ?> >> Add name property in select statement and value in place of name in option tag.
Благодаря!
возможно, вы можете создать двумерный массив javascript, который сохранит школу отношений для продуктов. И когда вы выбираете имя shool, вы можете получить список продуктов по имени школы в качестве ключа в массиве и обновить список опций box2.
Возможно, вы можете повторить строку js следующим образом:
<script language="javascript"> var array = { "school_name1" : { "product1", "poduct2" }, "school_name2", { "product3", "product4" } }; //you can get the product list by array['school_name1'], and you use js to update the product list </script>
благодаря
Вы должны попробовать это;
search.php
<?php // Check if the user wants the school or the school products (based on what the $.getJSON function sends us if ( ! isset( $_GET['products'] ) && ! empty( $_GET['school'] ) ) { $sql_schools = mysqli_query( $con, "SELECT `name` FROM school" ); $schools = ''; while ( $school = mysqli_fetch_array( $sql_schools ) ) { $schools .= '<option value="' . $school['name'] . '">' . $school['name'] . '</option>'; } } // The user selected a school and now we will send back a JSON array with products, belonging to the specified school else { $school = mysqli_real_escape_string( $_GET['school'] ); $sql_products = mysqli_query( $con, "SELECT `product` FROM products WHERE school = '{$school}'" ); $products = array(); while ( $product = mysqli_fetch_array( $sql_products ) ) { // Note: If you use array_push() to add one element to the array it's better to use $array[] = // because in that way there is no overhead of calling a function. // http://php.net/manual/en/function.array-push.php $products[] = $product['product']; } header( "Content-Type: application/json" ); echo json_encode( $products ); die; } ?> <form role="form" action="search.php" method="GET"> <div class="col-md-3"> <select class="form-control" id="schools" name="school"> <?= $schools; ?> </select> </div> <div class="col-md-3"> <select class="form-control"> </select> </div> <button type="submit" class="btn btn-info">Search</button> </form> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> // When #schools gets changed to a new value, load the products belonging to that school $('#schools').on('change', function() { $.getJSON('search.php?products&school=' + this.value, function(data) { var items = []; $.each(data, function(key, val) { items.push('<option value="' + val + '">' + val + '</option>'); }); $('#schools').empty().append(items); }); }); </script>в<?php // Check if the user wants the school or the school products (based on what the $.getJSON function sends us if ( ! isset( $_GET['products'] ) && ! empty( $_GET['school'] ) ) { $sql_schools = mysqli_query( $con, "SELECT `name` FROM school" ); $schools = ''; while ( $school = mysqli_fetch_array( $sql_schools ) ) { $schools .= '<option value="' . $school['name'] . '">' . $school['name'] . '</option>'; } } // The user selected a school and now we will send back a JSON array with products, belonging to the specified school else { $school = mysqli_real_escape_string( $_GET['school'] ); $sql_products = mysqli_query( $con, "SELECT `product` FROM products WHERE school = '{$school}'" ); $products = array(); while ( $product = mysqli_fetch_array( $sql_products ) ) { // Note: If you use array_push() to add one element to the array it's better to use $array[] = // because in that way there is no overhead of calling a function. // http://php.net/manual/en/function.array-push.php $products[] = $product['product']; } header( "Content-Type: application/json" ); echo json_encode( $products ); die; } ?> <form role="form" action="search.php" method="GET"> <div class="col-md-3"> <select class="form-control" id="schools" name="school"> <?= $schools; ?> </select> </div> <div class="col-md-3"> <select class="form-control"> </select> </div> <button type="submit" class="btn btn-info">Search</button> </form> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> // When #schools gets changed to a new value, load the products belonging to that school $('#schools').on('change', function() { $.getJSON('search.php?products&school=' + this.value, function(data) { var items = []; $.each(data, function(key, val) { items.push('<option value="' + val + '">' + val + '</option>'); }); $('#schools').empty().append(items); }); }); </script>