jQuery – select + ajax

Na stronie internetowej czasami przydaje się lista wyboru, która ma wpływ na inne elementy, w tym na inne listy. Podpięcie wszystkiego będzie wymagało kilku zabiegów. Główna lista wymaga zastosowania wydarzenia change, które będzie odpalane po zmianie wybranego elementu. Docelowa lista potrzebować będzie czyszczenia za każdym razem, gdy wstawiane będą do niej nowe dane^*.

<script type="text/javascript">
function clean_options( id ) {
    while( $(id+ " option").length > 1 ) {
        $(id + " option:last").remove();
    }
}

function select_options( id, tab ) {
    clean_options( id ) ;
    $.each(tab, function() {
        $(id).append("<option value='"+$(this).attr('id')+"'>"+$(this).attr('tekst')+"</option>");
    });
}

$(document).ready( function( ) {
 $("#ID_SELECTA").change( function() {
        id = $(this).val() ;
  	if( id == 0 ) return ;
        $.ajax( {
                type: "GET",
                url: "SKRYPT.PHP",
                data: "id="+id,
                dataType: "json",
                success: function(result) {
                    tab = result.tab ;
                    select_options( "#DOCELOWY_SELECT", tab ) ;
                }
            });
        }) ;
});

</script>

Clean_options dba o usunięcie elementów ze wskazanej listy (pozostawia pierwszy, który w tym przypadku może zawierać słowo „wybierz opcję”). Select_options wstawia elementy do odpowiedniej listy wyboru. W change sprawdzane jest czy wybrany element z głównej listy ma odpowiednią wartość (podobnie jak podrzędna lista pierwszy element może zawierać prośbę o wybór pożądanej opcji), a następnie odpalany jest ajax pobierający tablicę. W skrypcie należy wpisać własne: #ID_SELECTA, SKRYPT.PHP oraz #DOCELOWY_SELECT.

<?
// polacz z baza
// wykonaj zapytanie
 while( $row = mysql_fetch_assoc( $result ) ) {
   $tab['tab'][] = array( 'id' => $row['id'], 'tekst' => $row['tekst'] ) ;
 }
 $tab['DODATKOWE'] = 'xxxx' ;
 echo json_encode( $tab ) ;
 // koncowe operacje
?>

Powyższy skrypt jest wywoływany przy każdej zmianie głównej listy. Po połączeniu z bazą pobierane są dane, które są odpowiednio grupowane. $tab[’tab’] jest tablicą, którą można odebrać po stronie js i przejrzeć przy pomocy $.each.

^* Lista wyboru może być także podmieniana w całości, w tym wypadku najlepiej użyć .html na elemencie rodzicielskim:

$("#RODZIC").html( '<select id="xxx"><option value="a">a</option>...</select>' ) ;

Można także próbować zmiany innerHTML na samej liście, ale niektóre przeglądarki mogą wyświetlić błąd przy wywołaniu funkcji.

• Tweet
• Pin It