Home/ Questions/Q 7726249
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T05:09:59+00:00

i was wondering if jquery can be used to manipulate my select html element

  • 0

i was wondering if jquery can be used to manipulate my “select” html element as such:

I have three different memberships., Gold, Silver and PRemium,

So Gold will allow the user to select to up to 50 words while Silver will allow the user to select to up to 10 words. So i was wondering if i can disable the rest of the options after a user selects 10 or 50 depending on the type of membership selected.

Is that possible in JQuery? Can’t seem to get my head around the format.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here we go: 

    <!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>
        $('document').ready(function () {
            var count;  // number of selected elements
            var type = "silver";  //lets assume the 'type' as silver and can select 3 elements

           $('#selectElem').bind('click', function (e)  {
                count = $('#selectElem :selected').length;
                switch (type) {
                case "gold":
                    //do somthing..
                    break;
                case "silver":
                    if(count >= 3) {
                        // disable the rest of the elems
                        $('#selectElem :not(:selected)').attr('disabled', 'disabled');
                    } else {
                        // remove disabled elems if any
                        $('#selectElem :not(:selected)').removeAttr('disabled');
                    }                
                    break;
                }
           });
        });    
    </script>
</head>

<body>
    <div>
        <select id="selectElem" multiple="multiple">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
            <option value="6">Six</option>
            <option value="7">Seven</option>
        </select>
    </div>
</body>
</html>

    Example: http://jsfiddle.net/kadaj/RRHCs/

    • 0