none
Hiding drop down list options dynamically using script based on other drop down selection. RRS feed

  • Question

  • Could anyone suggest as to how we can hide/unhide drop down values using script.

    Here is what i tried

    using add(), remove() from JQuery it works , but its kind of messy , hiding/unhiding would be the right approach it seems.


    Best Regards, Pankaj Rana

    Monday, June 17, 2013 12:20 PM

Answers

  • Hi,

    I understand that you want to hide options in a drop down list control when based on other drop down selection. Since you can use add() or remove(), I assume that you can write the right script. You can use JQuery script to disable or enable the options instead.

    $('option[value=2]').prop('disabled', true);

    For more information, please refer to this site:

    Javascript to hide items in a Drop down list: http://forums.asp.net/t/1501711.aspx/1

    How to disable particular item in a drop down element: http://stackoverflow.com/questions/6840200/how-to-disable-particular-item-in-a-drop-down-element

    Thanks,

    Entan Ming


    Entan Ming
    TechNet Community Support

    Tuesday, June 18, 2013 7:07 AM
    Moderator
  • Hey Pankaj,

    I suggest to go with add/remove because if you are hiding/disabling it then any one can inspect that element and can change html source to show it or enable it. If you agree with this than you can do something like below.

    You can use JQuery hide() and show() functions to achieve the same. Below is the code block for your reference.

     <script type="text/javascript" language="javascript">
            $(document).ready(function () {
                $("select[Title='Status']").find('option:contains("Open")').hide();         
            });
     </script>

    Thanks, Please mark it as an answer if it helps.



    Tuesday, June 18, 2013 8:07 AM

All replies

  • I don't know how to do this using a script, but I did this by using a lookup column and using unique permissions on items in the lookup list. 

    Planet Technologies || SharePoint Task Force

    Monday, June 17, 2013 7:30 PM
  • Hi,

    I understand that you want to hide options in a drop down list control when based on other drop down selection. Since you can use add() or remove(), I assume that you can write the right script. You can use JQuery script to disable or enable the options instead.

    $('option[value=2]').prop('disabled', true);

    For more information, please refer to this site:

    Javascript to hide items in a Drop down list: http://forums.asp.net/t/1501711.aspx/1

    How to disable particular item in a drop down element: http://stackoverflow.com/questions/6840200/how-to-disable-particular-item-in-a-drop-down-element

    Thanks,

    Entan Ming


    Entan Ming
    TechNet Community Support

    Tuesday, June 18, 2013 7:07 AM
    Moderator
  • Hey Pankaj,

    I suggest to go with add/remove because if you are hiding/disabling it then any one can inspect that element and can change html source to show it or enable it. If you agree with this than you can do something like below.

    You can use JQuery hide() and show() functions to achieve the same. Below is the code block for your reference.

     <script type="text/javascript" language="javascript">
            $(document).ready(function () {
                $("select[Title='Status']").find('option:contains("Open")').hide();         
            });
     </script>

    Thanks, Please mark it as an answer if it helps.



    Tuesday, June 18, 2013 8:07 AM
  • Minor update to your code so that it works in Internet Explorer too.  Instead of .hide use .remove:

    <script type="text/javascript" language="javascript">
             $(document).ready(function () {
                 $("select[Title='Status']").find('option:contains("Open")').remove();         
             });
      </script>

    Friday, September 13, 2019 6:40 PM