Zdarzenie AJAX uruchom onchange przed załadowaniem strony

Question

Oto scenariusz. Mam 2 drop downs. Pierwszy z nich ma funkcję onchange, aby załadować dane z drugiego menu. Jest w pełni sprawny, ale chciałbym zaimplementować ładowanie danych na drugim liście przy użyciu funkcji onchangeonload.

Oto moja funkcja:

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; 
     } 
     }); 
    } 

Oto mój rozwijana:

<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> 

Moja strona przetwarzanie 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; 
} 

Answer 1

Spróbuj dodać licznika zmienną śledzić 2 <option> w foreach iteracji:

<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> 

Będzie dodać ciąg $store zawierający Javascript required jeżeli wartość $count osiągnie 2 inaczej pozostawia onselect=" ", jeśli wybierz drugą opcję, uruchamia funkcję o wybranej wartości.

Możesz przejść do onfocus lub onclick lub dowolnego innego zdarzenia javascript na tagu <option>, który wykona twoją pracę.

Answer 2

I (osobiście) nie lubią działać inline JavaScript czy mogę na to poradzić, więc ja po prostu użyć $(document).ready() dla obciążenia i .on('change') na działanie zmian, zarówno stosując tę ​​samą funkcję:

<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>