2016-01-13 126 views
4

這是我的主頁,我選擇一個選項字段。在選擇另一個選擇字段時創建一個動態選擇字段

opt1.php:

<html> 
<div> 
    <select id="mn" onchange = "show(this.id)" > 
    <option value="3">hello</option> 
    <option value="4">hiii</option> 
    <option value="5">byee</option> 
    </select> 
</div> 
<?php include 'OPT2.php'?> 
</html> 

這是我的JavaScript,我從上面選擇獲得的價值,並傳遞給opt2.php

function show(s1){ 
    var s1 = document.getElementById(s1); 
    var ch = s1.value; 
    $.post('OPT2.php', {variable: ch}); 
} 

這是我OPT2 .php頁面顯示子選擇。

<?php 
    $con = @$_POST['ch']; 
    echo "SELECT MODEL:<select id=sb name=sb >"; 
    echo "<option name=$con>$con</option>"; 
    echo "</select>"; 
?> 

實際上這並沒有產生預期的結果。

是否有任何邏輯或處理錯誤?

+1

您發送'{variable:ch}'其中'variable'是關鍵字,而不是'ch',所以它應該是'$ con = $ _POST ['variable'];'not'$ con = $ _POST ['ch']; ' – Sean

回答

0

你需要調用Ajax opt2.php來獲取數據 所以你opt1.php應該像

<html> 
<div> 
      <select id="s1" onchange = "show(this.id)" > 
       <option value="3">hello</option> 
       <option value="4">hiii</option> 
       <option value="5">byee</option> 
      </select> 
      <select id="s2"> 
       <option>--</option> 
      </select> 
     </div> 
     <?php include 'OPT2.php'?> 
</html> 

而JavaScript

<script type="text/javascript"> 
    $("#s1").change(function(){ 
    $('#s2').find('option').remove().end(); //clear the city ddl 
    var block_no = $(this).find("option:selected").text(); 
    var s1 = document.getElementById(s1); 
    var ch = s1.value; 
    //do the ajax call 
    $.ajax({ 
     url:'OPT2.php', 
     type:'GET', 
     data:{variable:s1}, 
     dataType:'json', 
     cache:false, 
     success:function(data) 
     { 
     //data=JSON.parse(data); //no need if dataType is set to json 
     var ddl = document.getElementById('s2');      
     for(var c=0;c<data.length;c++) 
       {    
       var option = document.createElement('option'); 
       option.value = data[c]; 
       option.text = data[c];       
       ddl.appendChild(option); 
       } 

    }, 

     error:function(jxhr){ 
     alert("Pls Reload the page"); 
    } 
    }); 
});