0

谁能帮我解决我的问题.. 我有 4 个下拉列表，每个下拉列表应该有不同的值，当它们有重复值时我会输入一条错误消息，我将其设置为 1 到 4，以便在我提交时没有重复值。但是我想做的是让说在第一个下拉列表中我选择值 1 然后在下一个我也选择 1 然后会出现错误，但是在我单击错误上的确定按钮后我想重置值错误返回到“0”的下拉列表，.. 在我单击“确定”错误后，它仍然保持在我之前选择的相同值上。

我对此很陌生，我非常感谢您的帮助。谢谢

这是我使用的代码

<!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>
4

1 回答 1

1

我对它进行了修改，并在 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>
于 2013-09-11T01:04:07.213 回答