2016-07-19 172 views
7

Quindi, ecco lo scenario. Ho 2 drop downs. Il primo ha la funzione onchange per caricare i dati nella seconda discesa. Funziona completamente, ma vorrei implementare il caricamento dei dati sul secondo menu a discesa utilizzando la funzione onload.AJAX esegue l'evento onchange prima del caricamento della pagina

Ecco la mia funzione:

function fetch_select(val) 
    { 
     $.ajax({ 
     type: 'post', 
     url: '../function/fetch_car_package.php', 
     data: { 
      get_option:val 
     }, 
     success: function (response) { 
      document.getElementById("new_select").innerHTML=response; 
     } 
     }); 
    } 

Ecco la mia discesa:

<select name='cItemID' onchange="fetch_select(this.value);"> 
    <?php 
    $sql = ""; 
    $sth = $dbh->prepare($sql); 
    $sth->execute(); 
    $result = $sth->fetchAll(); 

    foreach($result as $row) { 
     if ($_SESSION['cItemID'] == $row['Item ID']) { 
      $selected = "selected"; 
     } else { 
      $selected = ''; 
     } 
     echo "<option value='".$row['Item ID']."' $selected>".$row['Item Name']."</option>"; 
    } 
    ?> 
</select> 

La mia pagina di elaborazione ajax:

if(isset($_POST['get_option'])){ 
    $ItemID = $_POST['get_option']; 
    $sql = ""; 
    $sth = $dbh->prepare($sql); 
    $sth->execute(); 
    $result = $sth->fetchAll(); 

    foreach($result as $row) { 
     echo "<option value='".$row['cCLID']."' $selected>".$row['cDescription']."</option>"; 
    } 

    exit; 
} 

risposta

1

Prova ad aggiungere un contatore variabile per tenere traccia di 2 ° <option> nel foreach di iterazione:

<select name='cItemID' > 
    <?php 
    $sql = $store =""; 
    $sth = $dbh->prepare($sql); 
    $sth->execute(); 
    $count=0; 
    $result = $sth->fetchAll(); 

    foreach($result as $row) { 
     $count++; 
     if ($_SESSION['cItemID'] == $row['Item ID']) { 
      $selected = "selected"; 
     } 
     else { 
      $selected = ''; 
     } 

     $store = ($count==2)? "fetch_select(this.value)" : " "; 
     echo "<option onselect='".$store."' value='".$row['Item ID']."' $selected>".$row['Item Name']."</option>"; 
    } 
    ?> 
</select> 

si aggiunge una stringa $store contenente javascript necessario se il valore $count raggiunge 2 altrimenti lascia onselect=" ", se seleziona la seconda opzione, attiva la funzione con il valore selezionato.

Puoi andare per onfocus o onclick o qualsiasi altro evento javascript sul tag <option> che consente di completare il tuo lavoro.

2

I (personalmente) non piace l'esecuzione di JavaScript in linea, se posso farne a meno, quindi vorrei solo usare $(document).ready() per il carico e .on('change') per l'azione cambiamento, sia utilizzando la stessa funzione:

<script> 
// I am making an object for ajax reuse. You don't necessarily have to have this...premise is the same. 
var Ajaxer = function($) 
    { 
     var $j  = $; 
     var useUrl = '../function/fetch_car_package.php'; 
     var url; 

     this.setUrl = function(url) 
      { 
       useUrl = url; 
       return this; 
      } 

     this.ajax = function(data,func) 
      { 
       $j.ajax({ 
        type: 'post', 
        url: useUrl, 
        data: data, 
        success: function (response) { 
         func(response); 
        } 
       }); 
      } 
    } 
// When document loads 
$(document).ready(function() { 
    // Create ajax instance, pass jQuery 
    var nAjax = new Ajaxer($); 
    // Set the send function 
    function getSelect(obj) 
     { 
      // Save the value 
      var val = obj.val(); 
      // Run the ajax 
      nAjax.ajax({ 
        "get_option":val 
       }, 
       function(response){ 
        // Send data to our container 
        $("#new_select").html(response); 
       } 
      ); 
     } 
    // On load, save our select object 
    var SelectMenu = $('select[name=cItemID]'); 
    // Run the function on load 
    getSelect(SelectMenu); 
    // On change, run the function 
    SelectMenu.on('change',function(e) { 
     // Use $(this) to reference itself 
     getSelect($(this)); 
    }); 
}); 
</script>