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

这是我选择选项字段的主页面.

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>";
?>

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

有任何逻辑或处理错误吗?

最佳答案
你需要对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>

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

转载注明原文:javascript – 在选择另一个选择字段时创建动态选择字段 - 代码日志