在这种情况下如何选择和取消选择按钮

我为我的下拉菜单包含了一个jQuery处理程序，这样当在第一个下拉菜单中选择某些内容时，它将操作第二个下拉菜单中的选项。现在用户所做的是在第一个下拉菜单(OptionDropId)中选择选项类型，然后在第二个下拉菜单(NumberDropId)中用户选择所需答案的数量。在该下拉菜单下面将出现一个按钮列表，用户根据用户在第二个下拉菜单中选择了多少个按钮来选择按钮的数量。

现在假设用户点击了两个按钮，然后改变了选项类型(第一个下拉菜单)，那么选中的按钮仍然被选中，如果选项类型改变了，我希望按钮不被选中。

这曾经工作，但因为我已经包括我的change事件处理程序绑定我的jquery(这段代码是必需的)，它不会取消选择按钮时，选项类型的变化。

我需要做些什么来解决这个问题:

$(document).ready(function ()
{
    var OptDrop = new Array();
    OptDrop.abc = ["",1,2];
    OptDrop.abcd = ["",1,2,3];
    OptDrop.abcde = ["",1,2,3,4];
    OptDrop.trueorfalse = [1];
    OptDrop.yesorno = [1];
    $("#optionDropId").change(function ()
    {
        var selectedValue = $(this).val();
        $("#numberDropId").html("");
        $.each(OptDrop[selectedValue], function (x, y)
        {
            $("#numberDropId").append($("<option></option>").attr("value", y).html(y));
        });
    }); 
    $("#optionDropId").change();
});       
var currenttotal=0;
function getButtons()
{
    document.getElementById("answerswerA").className="answerswerBtnsOff";
    document.getElementById("answerswerB").className="answerswerBtnsOff";
    document.getElementById("answerswerC").className="answerswerBtnsOff";
    document.getElementById("answerswerD").className="answerswerBtnsOff";
    document.getElementById("answerswerE").className="answerswerBtnsOff";       
    document.getElementById("answerswerTrue").className="answerswerBtnsOff";
    document.getElementById("answerswerFalse").className="answerswerBtnsOff";
    document.getElementById("answerswerYes").className="answerswerBtnsOff";
    document.getElementById("answerswerNo").className="answerswerBtnsOff";
    currenttotal=0;
}
function btnclick(btn)
{
    if(document.getElementById("numberDropId").value=="")
    {
        alert('You must first select the number of answers you require from the drop down menu');
        return false;
    }
    if (btn.className=="answerswerBtnsOn")
    {
        btn.className="answerswerBtnsOff";
        currenttotal--;
        return false;
    }
    if(document.getElementById("numberDropId").value==currenttotal)
    {
        alert('You are not allowed beyond the limit of the number of answers you require, deselect other button');
        return false;
    }
    if (btn.className=="answerswerBtnsOff")
    {
        btn.className="answerswerBtnsOn";
        currenttotal++;
        return false;
    }
}

Html代码如下:

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);">
  <table id="optionAndAnswer">
    <tr>
      <th colspan="2">
        Option and Answer
      </th>
    </tr>
    <tr>
      <td>Option Type:</td> 
      <td>
        <select name="optionDrop" id="optionDropId" onChange="getDropDown()">
          <option value="">Please Select</option>
          <option value="abc">ABC</option>
          <option value="abcd">ABCD</option>
          <option value="abcde">ABCDE</option>
          <option value="trueorfalse">True or False</option>
          <option value="yesorno">Yes or No</option>
        </select>
      </td>
   </tr>
   <tr>
     <td>Number of Answers:</td>
     <td>
       <select name="numberDrop" id="numberDropId" onChange="getButtons()">
       </select>
     </td>
   </tr>
   <tr>
     <td>Answer</td>
     <td>
       <input class="answerswerBtns" name="answerswerAName" id="answerswerA" type="button" value="A" onclick="javascript:btnclick(this);"/>
       <input class="answerswerBtns" name="answerswerBName" id="answerswerB" type="button"   value="B" onclick="javascript:btnclick(this);"/>
       <input class="answerswerBtns" name="answerswerCName" id="answerswerC" type="button"   value="C" onclick="javascript:btnclick(this);"/>
       <input class="answerswerBtns" name="answerswerDName" id="answerswerD" type="button"      value="D" onclick="javascript:btnclick(this);"/>
       <input class="answerswerBtns" name="answerswerEName" id="answerswerE" type="button"   value="E" onclick="javascript:btnclick(this);"/>
       <input class="answerswerBtns" name="answerswerTrueName" id="answerswerTrue" type="button"    value="True" onclick="javascript:btnclick(this);"/>
       <input class="answerswerBtns" name="answerswerFalseName" id="answerswerFalse" type="button"   value="False" onclick="javascript:btnclick(this);"/>
       <input class="answerswerBtns" name="answerswerYesName" id="answerswerYes" type="button"   value="Yes" onclick="javascript:btnclick(this);"/>
       <input class="answerswerBtns" name="answerswerNoName" id="answerswerNo"      type="button" value="No" onclick="javascript:btnclick(this);"/>
     </td>
    </tr>
  </table>
</form>