首页 文章

Javascript - 如果任何2个选定的下拉列表值相同，如何显示消息框

提问于
浏览 次
1

如果任何两个选定的下拉列表的值相同，我可以知道如何显示一个消息框吗？

这是我对这些下拉列表的编码：

<form action="checkresult2.php">
    <table class="p1" bgcolor="#FFFFCC" bordercolor="#000000" align="center" width="771" border="2">
          <tr>
              <td><div align="center"><strong>No.</strong></div></td>
              <td><div align="center"><strong>Subject Name</strong></div></td>
              <td><div align="center"><strong>Grade</strong></div></td>
          </tr>

          <?php 
          for($i=1; $i<=10; $i++)
          {?>
          <tr>
              <td width="42"><div align="center"><?php echo $i; ?></div></td>
              <td width="539">
                  <select id="subject_opt" name="subj[]">
                      <option value="">--- Please choose a subject ---</option>
                          <?php
                          $result = mysql_query("SELECT * FROM spm_subject");
                          while($s = mysql_fetch_assoc($result))
                          {?>
                              <option value="<?php echo $s['name']; ?>"><?php echo $s["name"]; ?></option>
                      <?php } ?>
                  </select>
              </td>
              <td width="166"><div align="center">
                  <select id="grade_opt" name="grad[]">
                      <option value="">- Select grade -</option>
                          <?php
                          $result2 = mysql_query("SELECT * FROM spm_grade");
                          while($g = mysql_fetch_assoc($result2))
                          {?>
                              <option value="<?php echo $g['grade']; ?>"><?php echo $g["grade"]; ?></option>
                      <?php } ?>
                  </select>
              </div>
              </td>
          </tr>
            <?php }?>
          <tr>
              <td colspan="3">
                  <div align="center">
                      <input type="submit" value="Submit">
                  </div>
              </td>
          </tr>
    </table>
</form>

如果：Dropdown lists
然后会出现一个消息框，告诉我有重复值不能相同 . 任何人都可以为我分享想法？谢谢 .

javascript

3 回答

  • 0

    我认为'id应该不一样，但'name'可以相同，然后你可以用getElementById检查 . 您应该能够在'id'之后添加$ i来对元素进行舍入

    id="subject_opt<?php echo $i; ?>"

    以下是您的示例：

    <script>
function checkSubjectAndGrade(num){
    for(i=0;i<2;i++){
        if(i!=num && document.getElementById("subject_opt"+num).value === document.getElementById("subject_opt"+i).value){
            alert("dropdown lists' value are same");
        }
    }
}
</script>
<form action="checkresult2.php">
    <table class="p1" bgcolor="#FFFFCC" bordercolor="#000000" align="center" width="771" border="2">
          <tr>
              <td><div align="center"><strong>No.</strong></div></td>
              <td><div align="center"><strong>Subject Name</strong></div></td>
              <td><div align="center"><strong>Grade</strong></div></td>
          </tr>

          <tr>
              <td width="42"><div align="center">1</div></td>

              <td width="539">
                  <select id="subject_opt0" name="subj[]" onChange="checkSubjectAndGrade(0)">
                      <option value="">--- Please choose a subject ---</option>
                      <option value="aaa">English</option>
                      <option value="bbb">Math</option>                             
                  </select>
              </td>

              <td width="166"><div align="center">
                  <select id="grade_opt0" name="grad[]">
                      <option value="">- Select grade -</option>
                      <option value="aaa">A</option>
                      <option value="bbb">B</option>
                  </select>
              </td>
          </tr>

          <tr>
              <td width="42"><div align="center">2</div></td>

              <td width="539">
                  <select id="subject_opt1" name="subj[]" onChange="checkSubjectAndGrade(1)">
                      <option value="">--- Please choose a subject ---</option>
                      <option value="aaa">English</option>
                      <option value="bbb">Math</option>                             
                  </select>
              </td>

              <td width="166"><div align="center">
                  <select id="grade_opt1" name="grad[]">
                      <option value="">- Select grade -</option>
                      <option value="aaa">A</option>
                      <option value="bbb">B</option>
                  </select>
              </td>
          </tr>       
          <tr>
              <td colspan="3">
                  <div align="center">
                      <input type="submit" value="Submit">
                  </div>
              </td>
          </tr>
    </table>
</form>
    回复于
  • 0
    <script>
function validate()
{
var dropdown1 = document.getElementById("grade_opt");
var dropdown2 = document.getElementById("subject_opt");
if(dropdown1.value == dropdown2.value){
   alert("Cannot Have duplicate values");
}
}
</script>

    然后将属性onchange添加到每个选择 onchange="validate()"

    回复于
  • 1

    如果你使用jquery使用下面的代码

    function validateDropdowns(){
 var selectBox1 = $("#subject_opt option:selected").val();
 var selectBox2 = $("#grade_opt option:selected").val();

  if((selectBox1 != "" && selectBox2 !="") &&(selectBox1 == selectBox2)){
        alert("duplicate values are not accepted");
  }
 }

    在每个下拉列表中调用 validateDropdowns() 函数

    回复于

相关问题