Javascript - buttons select and unselect issue

[carlbrooks]

I have a dropdown menu and some buttons below in my HTML:

 

<p>
    <select name="numberDrop" id="numberDropId" onClick="getButtons()">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    </p>

    <p>
    <input class="answerBtns" name="answerA" type="button" value="A" />
    <input class="answerBtns" name="answerB" type="button" value="B" />
    <input class="answerBtns" name="answerC" type="button" value="C" />
    <input class="answerBtns" name="answerD" type="button" value="D" />
    <input class="answerBtns" name="answerE" type="button" value="E" />
    </p>

 

What I want to know is that how is it suppose to be coded so that the user can only select the same amount of buttons as the number from the drop down menu?

 

 

For example if the user selects the number 3 from the dropdown menu, then if the user clicks on a button, it will highlight the button in a color (lets say green) but the user can only have three buttons selected. If an additional button is clicked then that button would not be selected. The additional button can only be selected if the user unselects a selected button and then selects the button he wishes. This means that only 3 buttons can be selected at maximum. Also only 3 buttons minimum can be selected, if more or less buttons are selected than the number 3 then it should come up with an alert.

 

Is this suppose to be done in Javascript or Jquery and how can I use css to change the color of the ubttons to green if selected or back to grey if unselected?

 

Thank You

[Zane]

What have you tried so far?

.. and jQuery would definitely be the way to go.

[carlbrooks]

I tried using the hasClass and removeClass methods. Problem is that it is not retireving from dropdown menu and it is not matching my criteria at all. This is just a starter for me.  This example below is if less than 3 buttons are selected:

 

function getButtons(id)
{
    if ($('#' + id).hasClass('answerBtnsSelected'))
        $('#' + id).removeClass('answerBtnsSelected');
    else
    {
        if ($('.answerBtnsSelected').length < 3)
        {
            $('#' + id).addClass('answerBtnsSelected');
        }
        else
        {
             alert('Only three buttons can be selected.');
        }       
    }
}

 

my problem is using this type of function and applying it and matching it with my criteria

[Zane]

You need to use the .click() function to initiate anything after clicking a button.