在這種情況下如何選擇和取消選擇按鈕

Question

我為下拉菜單包含了一個jQuery處理程序，以便在第一個下拉菜單中選擇某些內容時，它將處理第二個下拉菜單中的選項。 現在，用戶要做的是在第一個下拉菜單（ OptionDropId ）菜單中選擇選項類型，然后在第二個下拉菜單（ NumberDropId ）菜單中選擇所需的答案數量。 在該下拉菜單下面，將顯示一個按鈕列表，用戶根據用戶在第二個下拉菜單中選擇的數量來選擇按鈕的數量。

現在，假設用戶單擊兩個按鈕，然后更改選項類型（第一個下拉菜單），然后仍選擇了選擇的按鈕，如果選項類型已更改，我希望取消選擇按鈕。

這曾經可以工作，但是由於我包含了change事件處理程序以綁定我的jquery（需要此代碼），因此當選項類型更改時，它不會取消選擇按鈕。

我需要做些什么來解決此問題：

下面是我的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("answerA").className="answerBtnsOff";
    document.getElementById("answerB").className="answerBtnsOff";
    document.getElementById("answerC").className="answerBtnsOff";
    document.getElementById("answerD").className="answerBtnsOff";
    document.getElementById("answerE").className="answerBtnsOff";       
    document.getElementById("answerTrue").className="answerBtnsOff";
    document.getElementById("answerFalse").className="answerBtnsOff";
    document.getElementById("answerYes").className="answerBtnsOff";
    document.getElementById("answerNo").className="answerBtnsOff";

    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=="answerBtnsOn")
    {
        btn.className="answerBtnsOff";
        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=="answerBtnsOff")
    {
        btn.className="answerBtnsOn";
        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="answerBtns" name="answerAName" id="answerA" type="button" value="A" onclick="javascript:btnclick(this);"/>
       <input class="answerBtns" name="answerBName" id="answerB" type="button"   value="B" onclick="javascript:btnclick(this);"/>
       <input class="answerBtns" name="answerCName" id="answerC" type="button"   value="C" onclick="javascript:btnclick(this);"/>
       <input class="answerBtns" name="answerDName" id="answerD" type="button"      value="D" onclick="javascript:btnclick(this);"/>
       <input class="answerBtns" name="answerEName" id="answerE" type="button"   value="E" onclick="javascript:btnclick(this);"/>
       <input class="answerBtns" name="answerTrueName" id="answerTrue" type="button"    value="True" onclick="javascript:btnclick(this);"/>
       <input class="answerBtns" name="answerFalseName" id="answerFalse" type="button"   value="False" onclick="javascript:btnclick(this);"/>
       <input class="answerBtns" name="answerYesName" id="answerYes" type="button"   value="Yes" onclick="javascript:btnclick(this);"/>
       <input class="answerBtns" name="answerNoName" id="answerNo"      type="button" value="No" onclick="javascript:btnclick(this);"/>
     </td>
    </tr>
  </table>
</form>

Answer 1

您可以按如下所述使用Jquery的.removeAtrr（）函數： 在jQuery中取消選擇<select>的最佳方法？

然后，您的更改功能將如下所示：

$("#optionDropId").change(function ()
    {
        var selectedValue = $(this).val();
        $("#numberDropId").html("");
        $.each(OptDrop[selectedValue], function (x, y)
        {
            $("#numberDropId").append($("<option></option>").attr("value", y).html(y));
        });
        $("#numberDropId").removeAttr("selected");
    });