Question

侨

我需要根据用户选择创建动态表单。

即。在第一个表单字段中我选择"John Smith"，这将填充（通过外部php / mysql文件）第二个选择字段"Artist, Carpenter, Other"，如果我选择艺术家我用{{1}填充第三个选择字段<等等

我在javascript上无能为力，我花了早上的谷歌搜索脚本，我找到了cool tutorial here

它很有用，它很干净，但它只更新id为"Singer, Painter, Sculptor"的div，这是js文件中包含的静态（参见ajax_req.js的第19行和第31行）。我以为我可以通过GET传递id名称，但我不知道如何让脚本识别变量。

这是代码：

txtResult

我想通过GET传递id名称，并且有类似的东西：

function stateChanged()  
{  
   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")  
   {  
           document.getElementById("txtResult").innerHTML= xmlHttp.responseText;  
   }  

}

你能帮帮我吗？如果你碰巧知道更好的东西，我也可以改变剧本

Ciao，谢谢你，

版

Answer 1

这是HTML ...

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
        $(function(){
            $.get('x.php?f_name=get_names',function(data){
                $("#select_name").html(data);
                $.get("x.php?f_name=get_jobs&s_name="+$("#select_name").val(),function(data){
                    $("#select_job").show();
                    $("#select_job").html(data);
                })
            });


            $("#select_name").change(function(){
                $.get("x.php?f_name=get_jobs&s_name="+$("#select_name").val(),function(data){
                    $("#select_job").html(data);
                })

            });





        })

        </script>
    </head>
    <body>
        <select name="name" id="select_name">

        </select>

        <select name="job" id="select_job"></select>
    </body>
    </html>

，这是PHP方面（在代码中称为x.php）

    <?php
        $names = array("A","B","C");
        $jobs  = array(array("Job_1","Job_2") ,array("Job_1"), array("Job_1","Job_2","Job_3"));
        GLOBAL $names;
        GLOBAL $jobs;


        switch ($_GET['f_name']) {
            case 'get_names':
                get_names($names);
                break;
            case 'get_jobs':
                get_jobs($jobs,$_GET['s_name']);
                break;
            default:
                # code...
                break;
        }





        function get_names($names){
            foreach ($names as $key=>$value) {
                echo "<option value='$key'>$value</option>";
            }
            return false;
        }
        function get_jobs($jobs,$s_name){
            foreach ($jobs[$s_name] as $key => $value) {
                echo "<option value='$key'>$value</option>";
            }
            return false;
        }



    ?>

您可以创建自己的数组，例如$ names和$ jobs，并添加一些案例来切换以获得更复杂的系统......

度过愉快的一天。

Answer 2

在select的{{1}}通行证中，

element

在<select name="country" onchange="htmlData('city.php', 'ch='+this.value, 'your_element_id')" />

htmlData()

在function htmlData(url, qStr, id) { // get id as well that is 'your_element_id' //You can do line 43 in `ajax_req.js` as, xmlHttp.onreadystatechange = function () { stateChanged(id); } }

stateChanged()

然后你可以在第31行做，

function stateChanged(id)  
{  
   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")  
   {  
           document.getElementById(id).innerHTML= xmlHttp.responseText;  
   }  
   else {  
           //alert(xmlHttp.status);  
   }  
}

在Javascript中通过GET获取div id

2 个答案: