Question

我有一个移动品牌的下拉菜单。当用户选择移动品牌时，动态下拉根据移动品牌填充移动模型，我想验证该移动模型下拉为空白选择值。我正在使用ajax xmlhttp请求来获取移动模型下拉菜单。

我的整个代码是：

带有移动品牌下拉菜单的页面代码

<script type="text/javascript">
    function validate() {
        if (document.myform.step3_mobilebrand.value=="") {
            document.getElementById("error1").innerHTML = (error1) ? "<img src='images/formerror.gif' height='15' width='18'>" : "";
            document.myform.step3_mobilebrand.focus();
            return false;
        }

        var myTextField = document.myform.getElementById('step3_mobilemodel').value;

        if (myTextField == "") {
            document.getElementById("error2").innerHTML = (error2)?"<img src='images/formerror.gif' height='15' width='18'>" : "";
            document.myform.step3_mobilemodel.focus();
            return false;
        }


    }
</script>

<?php
if (isset($_POST['submitted']) and $_POST['submitted']=="Continue") {
    $mobilebrand1 = $_POST['step3_mobilebrand'];
    $mobilemodel1 = $_POST['step3_mobilemodel'];

    if ($mobilemodel1=="") {
        echo "Please Select Mobile Model";          
    }

    $connectiontype=$_POST['step3_connectiontype'];
    $internet=$_POST['step3_internet'];

    include("admin/config.php");

    $sql="insert into member_detail (mobilebrand,mobilemodel,connection_type,internet) values('$mobilebrand1','$mobilemodel1','$connectiontype','$internet')";

    mysql_query($sql);
}
?>

<script type="text/javascript">
function showUser(str) {
    if (str=="") {
        document.getElementById("txtHint").innerHTML="";
        return;
    } 

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET","getuser.php?q="+str,true);
    xmlhttp.send();
}
</script>

<form name="myform" method="post" action="" onsubmit="return validate();">
    <table>
        <tr>
            <td>Mobile Brand</td>
            <td><?php 
                include ("admin/config.php");
                echo "<select name='step3_mobilebrand' onchange='showUser(this.value)'><option value='' selected>Select Mobile Brand</option>";
                $result = mysql_query ("select * from mobilebrand order by mobilebrand");
                while ($adcom=mysql_fetch_array($result)) {
                    echo "<option value=\"".$adcom['id']."\">".htmlspecialchars($adcom['mobilebrand'])."</option>";
                }

                echo "</select>";?><span id="error1" style="color:red;"></span></td>

        </tr>
    </table>
    <div id="txtHint"></div>
    <table>
        <tr>
            <td>Connection Type</td>
            <td><input type="radio" name="step3_connectiontype" value="PrePaid" checked="checked">Prepaid
                <input type="radio" name="step3_connectiontype" value="PostPaid">Postpaid
                <span id="error3" style="color:red;"></span>
            </td>
        </tr>
        <tr>
            <td>Have Internet On Mobile</td>
            <td><input type="radio" name="step3_internet" value="Yes" checked="checked">Yes
                <input type="radio" name="step3_internet" value="No">No
                <span id="error4" style="color:red;"></span>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" name="submitted" value="Continue"></td>
        </tr>
    </table>
</form>

，getuser.php的代码是

<table>
    <tr>
        <td>Mobile Model</td>
        <td>
            <?php
            $q=$_GET["q"];
            include("admin/config.php");
              echo "<select name='step3_mobilemodel' id='step3_mobilemodel' ><option value=''>Select Mobile Model</option>";
            $result = mysql_query ("select * from mobilemodel where brandcode='".$q."'");
            while ($adcom=mysql_fetch_array($result)) {
                echo "<option value=\"".$adcom['mobilemodel']."\">".htmlspecialchars($adcom['mobilemodel'])."</option>";
            }
                echo "</select>"; ?>

        </td>
    </tr>
</table>

输出结果是正确的我只想验证移动模型下拉菜单中的空白选择

Answer 1

对于验证选择，你可以这样做：


var e = document.getElementById("step3_mobilemodel");
var mobileVal = e.options[e.selectedIndex].value;
if(mobileVal == "") {
  ...//show your error here
}

希望有所帮助

Answer 2

这几乎是Sudhir发布的内容（来自我的+1），但是使用onchange事件处理程序的小提琴示例：http://jsfiddle.net/5TYwH/1/。

Answer 3

可能你只需为$ q添加一个php验证。

<table>
<tr>
    <td>Mobile Model</td>
    <td>
        <?php
        $q=$_GET["q"];
          echo "<select name='step3_mobilemodel' id='step3_mobilemodel'>"
if($q != ""){

        include("admin/config.php");
echo "<option value=''>Select Mobile Model</option>";

        $result = mysql_query ("select * from mobilemodel where brandcode='".$q."'");
        while ($adcom=mysql_fetch_array($result)) {
            echo "<option value=\"".$adcom['mobilemodel']."\">".htmlspecialchars($adcom['mobilemodel'])."</option>";
        }}else{ echo "<option value=''>Please select a mobile first</option>";} echo "</select>";?></td>
</tr></table>

使用Ajax验证动态下拉列表

3 个答案: