Wypełnianie innego wyboru z bazy danych w oparciu o wybór listy rozwijanej

Buduję witrynę internetową, aby poznać kodowanie i próbuję zbudować narzędzie, w którym użytkownik klika na wybór/listę rozwijaną zawierającą nazwy kategorii pobrane z bazy danych cat, a następnie pojawi się inne zaznaczenie z nazwami podkategorii wyciągniętymi z bazy danych subcat. To prawie dokładnie tak, jak na Yelp (przejdź do kategorii) like Yelp's (go down to the categories).Wypełnianie innego wyboru z bazy danych w oparciu o wybór listy rozwijanej

Ja również schemat:

enter image description here

Mam już kategoria rozwijaną, która ciągnie od kot bazy danych:

<p><b>Category:</b><br /> 
<?php 
    $query="SELECT id,cat FROM cat"; 
    $result = mysql_query ($query); 
    echo"<select name='cselect3' class='e1'><option value='0'>Please Select A  Category</option>"; 
    // printing the list box select command 
    while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt 
    echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']." </option>"; 

    } 

echo"</select>"; 
?>

i mam subcat że ciągnie od baza danych podrzędnych:

<p><b>Subcat1:</b><br /> 
<?php 
    $query="SELECT id,subcat FROM subcat"; 
    $result = mysql_query ($query); 
    echo"<select name='sselect1' class='e1'><option value='0'>Please Select A Category</option>"; 
    // printing the list box select command 
    while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt 
     echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>"; 

    } 

echo"</select>"; 
?>

Jak utworzyć listę podkategorii na podstawie tego, co użytkownik kliknie w kategorię i automatycznie ją wyświetli? Dziękuję bardzo za wszelką pomoc!

Źródło

2012-07-24 infinity

Po prostu wstawiłbym zmienne w javascriptie za pomocą php, a następnie używałbym funkcji javascript. Nie potrzebowałem jQuery ani AJAX.

Jednak trzeba mieć klucz obcy dla podkategorii bez względu na to co to jest .. - Dla każdego rekordu w tabeli subcat trzeba dać mu CatID więc na przedstawieniu ...

<?php 
    $db = new mysqli('localhost','user','password','dbname');//set your database handler 
    $query = "SELECT id,cat FROM cat"; 
    $result = $db->query($query); 

    while($row = $result->fetch_assoc()){ 
    $categories[] = array("id" => $row['id'], "val" => $row['cat']); 
    } 

    $query = "SELECT id, catid, subcat FROM subcat"; 
    $result = $db->query($query); 

    while($row = $result->fetch_assoc()){ 
    $subcats[$row['catid']][] = array("id" => $row['id'], "val" => $row['subcat']); 
    } 

    $jsonCats = json_encode($categories); 
    $jsonSubCats = json_encode($subcats); 


?> 

<!docytpe html> 
<html> 

    <head> 
    <script type='text/javascript'> 
     <?php 
     echo "var categories = $jsonCats; \n"; 
     echo "var subcats = $jsonSubCats; \n"; 
     ?> 
     function loadCategories(){ 
     var select = document.getElementById("categoriesSelect"); 
     select.onchange = updateSubCats; 
     for(var i = 0; i < categories.length; i++){ 
      select.options[i] = new Option(categories[i].val,categories[i].id);   
     } 
     } 
     function updateSubCats(){ 
     var catSelect = this; 
     var catid = this.value; 
     var subcatSelect = document.getElementById("subcatsSelect"); 
     subcatSelect.options.length = 0; //delete all options if any present 
     for(var i = 0; i < subcats[catid].length; i++){ 
      subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].id); 
     } 
     } 
    </script> 

    </head> 

    <body onload='loadCategories()'> 
    <select id='categoriesSelect'> 
    </select> 

    <select id='subcatsSelect'> 
    </select> 
    </body> 
</html>

Źródło

2012-07-24 18:03:58 dano

można zauważyć I wybrane catid z subcat tak, że możesz powiązać subkoty z kotami .. to jest konieczne – dano

hej, dzięki za to! Pracował świetnie!Jak mogłem to zrobić w przypadku trzech zestawów rozwijanych? – infinity

Tak, nie ma problemu .. trzecia lista rozwijana na podstawie drugiego rozwijania zakładam? – dano

Jeśli używasz AJAX, będziesz chciał, aby ten drugi bit kodu był oddzielnym plikiem php, który będziesz wywoływał za pośrednictwem AJAX. w wywołaniu zwrotnym z wywołania AJAX, po prostu wykonaj (pseudo-kod): someContainingDivOrSomething.innerHtml = responseBody;.

Należy zauważyć, że generalnie nie jest dobrym pomysłem wykonywanie zapytań bezpośrednio w plikach wyświetlania PHP (oddzielenie problemów). Istnieje kilka innych rzeczy, które można poprawić. Jednak to cię zacznie.

Źródło

2012-07-24 17:43:19

Ponieważ dane w rozwijanym podkategorii zależy od tego, co jest wybrane w kategorii, prawdopodobnie chcesz użyć ajax. Możesz ustawić detektor zdarzeń z rozwijanej kategorii, a kiedy to zmieni, możesz poprosić o rozwijanie podkategorii i zapełnić ją, istnieje wiele różnych sposobów na zrobienie tego, poniżej jest jedna opcja (używając jquery), aby uzyskać Rozpoczęty.

// warning sub optimal jquery code 
$(function(){ 

    // listen to events on the category dropdown 
    $('#cat').change(function(){ 

     // don't do anything if use selects "Select Cat" 
     if($(this).val() !== "Select Cat") { 

      // subcat.php would return the list of option elements 
      // based on the category provided, if you have spaces in 
      // your values you will need to escape the values 
      $.get('subcat.php?cat='+ $(this).val(), function(result){ 
       $('#subcat').html(result); 
      }); 

     } 

    }); 

});

Źródło

2012-07-24 17:49:07

make ta struktura html na docelowej stronie

<p><b>Category:</b><br /> 
<?php 
    $query="SELECT id,cat FROM cat"; 
    $result = mysql_query ($query); 
    echo"<select name='cselect3' onChange='loadSubCats(this.value)' class='e1'><option value='0'>Please Select A  Category</option>"; 
    // printing the list box select command 
    while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt 
    echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']." </option>"; 

    } 

echo"</select>"; 
?> 

<div id='sub_categories'></div>

utworzyć funkcję js przypisanego do kategorii rozwijanej

function loadSubCats(value) 
{ 
    $.post('load_sub_cats.php',{catid : value},function{data} 
              { 
               $('#sub_categories').html(data); 

              }); 

}

teraz w load_sub_cats.php

<p><b>Subcat1:</b><br /> 
<?php 
    $catid = $_POST['cat_id'] 
    $query="SELECT id,subcat FROM subcat where catid = $catid"; 
    $result = mysql_query ($query); 
    echo"<select name='sselect1' class='e1'><option value='0'>Please Select A Category</option>"; 
    // printing the list box select command 
    while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt 
     echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>"; 

    } 

echo"</select>"; 
?>

Będziesz potrzebować dołączyć jquery do tego kodu działa.

Źródło

2012-07-24 17:57:15

Wypełnianie innego wyboru z bazy danych w oparciu o wybór listy rozwijanej

Odpowiedz

Powiązane problemy