Javascript 在选择另一个选择字段时创建动态选择字段_Javascript_Php_Html

Javascript 在选择另一个选择字段时创建动态选择字段

javascript php html

Javascript 在选择另一个选择字段时创建动态选择字段,javascript,php,html,Javascript,Php,Html,这是我的主页，在这里我选择一个选项字段 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&

这是我的主页，在这里我选择一个选项字段

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>

这是我的opt2.php页面，用于显示子选择

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

实际上，这并没有产生预期的结果

是否存在任何逻辑或处理错误？

您需要对opt2.php进行ajax调用以获取该数据因此，您的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>


你好
hiii
拜伊
--

还有你的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");
    }
    }); 
});


$（“#s1”）。更改（函数（）{
$（'#s2'）.find（'option'）.remove（）.end（）；//清除城市ddl
var block_no=$（this）.find（“选项：选定”）.text（）；
var s1=document.getElementById（s1）；
var ch=s1.0；
//执行ajax调用
$.ajax({
url:'OPT2.php'，
类型：'GET'，
数据：{变量：s1}，
数据类型：'json'，
cache:false，
成功：功能（数据）
{
//data=JSON.parse（data）；//如果数据类型设置为JSON，则不需要
var ddl=document.getElementById（'s2'）；
对于（var c=0；cYou正在发送{variable:ch}
，其中variable
是键，而不是ch
，因此它应该是$con=$\u POST['variable']；
而不是$con=$\u POST['ch']；
<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");
    }
    }); 
});