2016-01-13 98 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"); 
    } 
    }); 
}); 

相关问题