Question

我在尝试设置表单元素时遇到了一个奇怪的问题。特别是选择元素。

这个想法很简单。我有一个选择，当其状态发生变化时，通过ajax，第二个选择通过请求获取其数据。到目前为止，一切都很好。 ajax工作正常。但是当第一个选择更改其状态时，选择元素样式将恢复正常样式。

可以找到实时示例here

我使用2个主文件，文件1文件的重要内容是这个

<script language="javascript" type="text/javascript">

    /* FUNCTION : Ajax Initialize - Start */
        function getXMLHTTP() {
                var xmlhttp=false;  
                try{
                    xmlhttp=new XMLHttpRequest();
                }
                catch(e)    {       
                    try{            
                        xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch(e){
                        try{
                        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                        }
                        catch(e1){
                            xmlhttp=false;
                        }
                    }
                }

                return xmlhttp;
            }
    /* FUNCTION : Ajax Initialize - End */


    /* FUNCTION : Get Values - Start */
        function getValue(numb) {       

            var strURL="find.php?theValue="+numb;
            var req = getXMLHTTP();

            if (req) {

                req.onreadystatechange = function() {
                    if (req.readyState == 4) {
                        // only if "OK"
                        if (req.status == 200) {                        
                            document.getElementById('my_requestDiv').innerHTML=req.responseText;                        
                        } else {
                            alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                        }
                    }               
                }           
                req.open("GET", strURL, true);
                req.send(null);
            }       
        }
    /* FUNCTION : Get Values - End */

</script>

和

    <form method="post" action="" name="form1" id="example">

        <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="160" class="title_style">What</td>
            <td width="340">
                <select class="select" name="start" onChange="getValue(this.value)">
                    <option value="">please make a selection</option>
                    <option value="1">Colors</option>
                </select>
            </td>
          </tr>

          <tr>
            <td width="160" class="title_style">Result</td>
            <td width="340">
              <div id="my_requestDiv">
                <select class="select1" name="my_request" >
                    <option>Please select above first</option>
                </select>
              </div>
            </td>
          </tr>

        </table>

    </form>

其中，在用户对select元素1进行选择后，通过ajax，将一个变量传递给find.php

<?php

    $what=intval($_GET['theValue']);

    $link = mysql_connect('localhost', 'YOUR_USERNAME_HERE', 'YOUR_PASSWORD_HERE');
    if (!$link) {
        die('Could not connect: ' . mysql_error());
    }

    mysql_query("SET NAMES 'utf8'", $link);

    mysql_select_db('cry-for-help');

    $query="SELECT id, value FROM my_table WHERE requested='$what'";
    $result=mysql_query($query);

?>

<select class="select" name="my_request">
    <option>make your selection now</option>
        <?php
            while($row=mysql_fetch_array($result)) {
        ?>
                <option value=<?php echo $row['id']?>><?php echo $row['value']?></option>
        <?php
            }
?>
</select>

并将结果作为第二个选择元素的内容发布回文件1。

问题在于造型已经消失。

您可以下载示例文件here

任何帮助将不胜感激。另外，对不起，如果我的英语不是那么好，我的编程技巧不是那么先进，用较少的单词来解释我的问题。

扬

Answer 1

根据您链接的页面，看起来问题是您要替换jqtransform生成的所有额外HTML元素。在您的JavaScript回调中，您正在执行此操作：

 document.getElementById('my_requestDiv').innerHTML=req.responseText;

这取代了div的全部内容，吹走了jqtransform放在那里的所有额外元素。你真正想做的是将select元素本身替换为PHP服务的结果，或者在更新div之后再次运行jqtransform。

由于你已经包含了jQuery，我建议使用他们强大的选择功能来替换select元素：

$('select[name="my_request"]').replaceWith(req.responseText);

我不熟悉jqtransform库，因此您可能需要进一步调查以了解哪条路线最有意义。

设置使用ajax获取数据的表单元素时遇到的问题

1 个答案: