Question

任何人都可以帮助我解决我的问题..我有4个下拉列表，每个下拉列表应该有不同的值，当他们有重复值时我输入错误信息，我将其设置为1到4，以便没有重复值时我提交。但想要我想要做的就是让我说第一个下拉菜单我选择值1然后在下一个我也选择1然后会有一个错误，但我点击错误按钮后我想重置值下拉的错误回到＆＃34; 0＆＃34;，...发生的是在我点击错误之后它仍然保留在我之前选择的相同值上。

我真的很陌生，我真的很感谢你的帮助。感谢

这是我使用的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<SCRIPT LANGUAGE="JavaScript">
<!--
function validateForm(objForm)
{
var returnStatus = 1;

if (objForm.a1.selectedIndex == 0) {
    alert("Please make sure you answer all the survey");
    return false;
};
if (objForm.a2.selectedIndex == 0) {
    alert("Please make sure you answer all the survey");
    return false;
};
if (objForm.a3.selectedIndex == 0) {
    alert("Please make sure you answer all the survey");
    return false;
};
if (objForm.a4.selectedIndex == 0) {
    alert("Please make sure you answer all the survey");
    return false;
};

if (returnStatus) {
    objForm.submit();
}
}
// -->
</SCRIPT>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">       </script>
<script type="text/javascript" >
function check_val(a) { 
 $('.a').each(function(i, ele){
        if(ele != a && ele.value == a.value){
               //Throw an error Here <---
              alert('ERROR! Duplicate entry! Choose another value.'); 

        }

  })
}
</script>

</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <div id="content">
<article class="post clearfix">
  <header>
    <h1 class="post-title"><a href="#">WHEN I INTRODUCE IDEAS TO OTHERS I WANT TO BE:</a></h1>
    <p class="post-meta">
      <time class="post-date" datetime="2011-05-08" pubdate></time>
    </p>
  </header>
  <p style="text-align:justify">
    <select name="a1" class="a" onchange="javascript: check_val(this);" >
      <option value="0" selected="selected" >-</option>
      <option value="1" >1</option>
      <option value="2" >2</option>
      <option value="3" >3</option>
      <option value="4" >4 </option>
    </select>
    sincere, dedicated and ethical person.<br />
    <br />
    <select name="a2" class="a" onchange="javascript: check_val(this);" >
      <option value="0" selected="selected" >-</option>
      <option value="1" >1</option>
      <option value="2" >2</option>
      <option value="3" >3 </option>
      <option value="4" >4</option>
    </select>
    bold, masterful and assertive individual. <br />
    <br />
    <select name="a3" class="a" onchange="javascript: check_val(this);" >
      <option value="0" selected="selected" >-</option>
      <option value="1" >1</option>
      <option value="2" >2</option>
      <option value="3" >3 </option>
      <option value="4" >4</option>
    </select>
    compress, practical and cautios person. <br />
    <br />
    <select name="a4" class="a" onchange="javascript: check_val(this);" >
      <option value="0" selected="selected" >-</option>
      <option value="1" >1</option>
      <option value="2" >2</option>
      <option value="3" >3 </option>
      <option value="4" >4</option>
    </select>
    friendly, jovial and enthusiastic person. </p>
  <footer id="footer">
    <p><span class="buttons">
      <input  type="button" class="send" onclick="validateForm(document.form1)" value="Submit" src="images/sub.png"/>
    </span></p>
  </footer>
  <div class="video"></div>
  <!-- /.video -->
  <div class="video"></div>
  <!-- /.video -->
</article>
<!-- /.post -->
  </div>
</form>
</body>
</html>

Answer 1

我有一个fiddle，并在javascript中完成所有操作，一些jQuery可能会将它缩短几个字符，我只是用暴力来检查重复项。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>

        <SCRIPT LANGUAGE="JavaScript">
        <!--
            function validateForm() {

                var ret = new Boolean();

                ret = true;

                var errMessage = "";

                var a1 = document.forms["form1"]["a1"].selectedIndex;
                var a2 = document.forms["form1"]["a2"].selectedIndex;
                var a3 = document.forms["form1"]["a3"].selectedIndex;
                var a4 = document.forms["form1"]["a4"].selectedIndex;

                if (a1 == 0 || a2 == 0 || a3 == 0 || a4 == 0) 
                {
                    errMessage = "Please make sure you answer all the survey";
                    ret = false;
                }
                else
                {
                    if(a2 == a1)
                    {
                        errMessage = ": a2";
                        document.forms["form1"]["a2"].selectedIndex = 0;
                        ret = false;
                    }

                    if(a3 == a2 || a3 == a1)
                    {
                        errMessage = errMessage + ": a3";
                        document.forms["form1"]["a3"].selectedIndex = 0;    
                        ret = false;
                    }

                    if(a4 == a3 || a4 == a2 || a4 == a1)
                    {
                        errMessage = errMessage + ": a4";
                        document.forms["form1"]["a4"].selectedIndex = 0; 
                        ret = false;
                    }

                    if(errMessage.length > 0)
                        errMessage = "ERROR! duplicate entry! Choose another value for " + errMessage;
                }

                var sOut = "a1: " + a1 + "\n" + "a2: " + a2 + "\n" + "a3: " + a3 + "\n" + "a4: " + a4

                if (errMessage.length > 0) {
                    sOut = sOut + "\n" + errMessage;
                }

                sOut = sOut + "\nret: " + ret;

                alert(sOut);

                return ret;
            }   
        // -->
        </SCRIPT>

    </head>

    <body>
        <form name="form1">
            <select name="a1">
                <option value="0" selected="selected">-</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
            <select name="a2">
                <option value="0" selected="selected">-</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
            <select name="a3">
                <option value="0" selected="selected">-</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
            <select name="a4">
                <option value="0" selected="selected">-</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
            <input type="button" onclick="validateForm()" value="Submit" />
        </form>
    </body>
</html>

发生错误时如何重置下拉列表？

1 个答案: