AJAX запускает событие обмена до загрузки страницы

Question

Итак, вот сценарий. У меня 2 спуска. Первая имеет функцию onchange для загрузки данных во 2-ое падение. Он полностью работает, но я хотел бы реализовать загрузку данных во втором выпадающем меню, используя функцию onchangeonload.

Вот моя функция:

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

Вот мой выпадающий:

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

Моя страница Обработка Аякса:

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

Попробуйте добавить счетчик переменную а следить за 2-й <option> в foreach итерации:

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

Это добавит строку $store, содержащую необходимый JavaScript, если значение $count достигает 2 в противном случае оставляет onselect=" ", если вы выберите второй вариант, он вызывает функцию с выбранным значением.

Вы можете найти onfocus или onclick или любое другое событие javascript на ярлыке <option>, которое выполняет вашу работу.

Answer 2

Я (лично) не любят работать встроенный JavaScript, если я могу помочь ему, так что я просто хотел бы использовать $(document).ready() для загрузки и .on('change') для действия изменения, как используя ту же функцию:

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