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

【问题标题】：creating a dynamic select field upon selecting another select field在选择另一个选择字段时创建动态选择字段
【发布时间】：2016-04-18 12:03:24
【问题描述】：

这是我选择选项字段的主页。

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，我从上面select获取值并传递给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>";
?>

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

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

【问题讨论】：

你发送的是{variable: ch}，其中variable是关键，而不是ch，所以它应该是$con = $_POST['variable'];而不是$con = $_POST['ch'];

标签： javascript php html

【解决方案1】：

您需要对 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");
    }
    }); 
});

【讨论】：