locked
Jquery or javascript, how to check the values of all DDL input fields on the page, upon ddl selection change? RRS feed

  • Question

  • User747696199 posted
    Hi,

    I'm working on a MVC3 web app, using razor view, c#, etc. On a page, it has multiple DDL fields, and all fields have the same drop down list, say it all have 5 values - a, b, c, d and e.

    For any of the DDL fields, if the user selects a or b, then a hidden div on this page should be shown - which already works, via jquery. Now, if the user first selects a, thus this hidden div becomes visible, then the user change it to c, then at this point, if none of the other DDL fields on this page has a or b as selected value, i need to hide this div; if any other DDL field has a or b selected, i need to keep this div visible.

    What is the best, simplest approach to achieve this?

    I think that i should write a function to do this: any time an DDL field value gets changed, i need to call this function to check all fields to see if the current value is a or b; if there is any field with a or b selected, this div will be visible; if none has a or b selected, this div will be hidden.

    Also, on the same page, every DDL field has a "Remove" link. Clicking on this link should also trigger this function. So that if there is only 1 DDL field with a or b selected, then the user click "Remove" to remove this DDL field ( also via jquery), now the div should be hidden.

    Note: there are already quite a lot of jquery code on this page, i'd like to keep this additional function as isolated as possible, so that it won't interfere with any existing code.

    Can someone suggest the best approach? Sample code to show idea would be great - i am not sure how to check the "current value" of all the input fields.

    Thanks a lot,

    Claudia












    Sunday, June 12, 2016 5:30 AM

Answers

  • User475983607 posted

    Can someone suggest the best approach? Sample code to show idea would be great - i am not sure how to check the "current value" of all the input fields.

    Use a JQuery selector that selects the all the dropdowns.  That can be as easy as adding a class to each select.  Then use an each() loop to iterate over every select to get the val(). 

    Or, select all the selected options and loop over them.

    Once you have the data then build your UI logic.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, June 12, 2016 11:39 AM
  • User61956409 posted
    
    

    Hi Claudia,

    claudia888

    For any of the DDL fields, if the user selects a or b, then a hidden div on this page should be shown - which already works, via jquery. Now, if the user first selects a, thus this hidden div becomes visible, then the user change it to c, then at this point, if none of the other DDL fields on this page has a or b as selected value, i need to hide this div; if any other DDL field has a or b selected, i need to keep this div visible.

    claudia888

    Also, on the same page, every DDL field has a "Remove" link. Clicking on this link should also trigger this function. So that if there is only 1 DDL field with a or b selected, then the user click "Remove" to remove this DDL field ( also via jquery), now the div should be hidden.

    Based on your requirement, I create the following sample for your reference.

    <script>
        $(function () {
            $("select").change(function () {
                checkoption();
            });
    
            $(".btnremove").click(function () {
                $(this).prev("select").remove();
                $(this).remove();
                checkoption();
            })
        })
    
        function checkoption() {
            $("#content").hide();
            $("select option:selected").each(function () {
                var oval = $(this).val();
                if (oval == "a" || oval == "b") {
                    $("#content").show();
                    return;
                }
            })
        }
    </script>
    
    <select id="ddl1">
        <option>a</option>
        <option>b</option>
        <option>c</option>
        <option>d</option>
        <option>e</option>
    </select><input type="button" value="Remove" class="btnremove" />&nbsp;
    <select id="ddl2">
        <option>a</option>
        <option>b</option>
        <option>c</option>
        <option>d</option>
        <option>e</option>
    </select><input type="button" value="Remove" class="btnremove" />&nbsp;
    <select id="ddl3">
        <option>a</option>
        <option>b</option>
        <option>c</option>
        <option>d</option>
        <option>e</option>
    </select><input type="button" value="Remove" class="btnremove" />&nbsp;
    <br />
    <div id="content">Hello World</div>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 13, 2016 9:14 AM

All replies

  • User475983607 posted

    Can someone suggest the best approach? Sample code to show idea would be great - i am not sure how to check the "current value" of all the input fields.

    Use a JQuery selector that selects the all the dropdowns.  That can be as easy as adding a class to each select.  Then use an each() loop to iterate over every select to get the val(). 

    Or, select all the selected options and loop over them.

    Once you have the data then build your UI logic.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, June 12, 2016 11:39 AM
  • User747696199 posted
    Thanks mgebhard.

    Your advice makes sense, and it is the direction I'm thinking. However, can you or anyone suggest some sample code, so i can modify it for my page? That will give me a good starting point.

    Thanks,

    Claudia












    Sunday, June 12, 2016 5:02 PM
  • User61956409 posted
    
    

    Hi Claudia,

    claudia888

    For any of the DDL fields, if the user selects a or b, then a hidden div on this page should be shown - which already works, via jquery. Now, if the user first selects a, thus this hidden div becomes visible, then the user change it to c, then at this point, if none of the other DDL fields on this page has a or b as selected value, i need to hide this div; if any other DDL field has a or b selected, i need to keep this div visible.

    claudia888

    Also, on the same page, every DDL field has a "Remove" link. Clicking on this link should also trigger this function. So that if there is only 1 DDL field with a or b selected, then the user click "Remove" to remove this DDL field ( also via jquery), now the div should be hidden.

    Based on your requirement, I create the following sample for your reference.

    <script>
        $(function () {
            $("select").change(function () {
                checkoption();
            });
    
            $(".btnremove").click(function () {
                $(this).prev("select").remove();
                $(this).remove();
                checkoption();
            })
        })
    
        function checkoption() {
            $("#content").hide();
            $("select option:selected").each(function () {
                var oval = $(this).val();
                if (oval == "a" || oval == "b") {
                    $("#content").show();
                    return;
                }
            })
        }
    </script>
    
    <select id="ddl1">
        <option>a</option>
        <option>b</option>
        <option>c</option>
        <option>d</option>
        <option>e</option>
    </select><input type="button" value="Remove" class="btnremove" />&nbsp;
    <select id="ddl2">
        <option>a</option>
        <option>b</option>
        <option>c</option>
        <option>d</option>
        <option>e</option>
    </select><input type="button" value="Remove" class="btnremove" />&nbsp;
    <select id="ddl3">
        <option>a</option>
        <option>b</option>
        <option>c</option>
        <option>d</option>
        <option>e</option>
    </select><input type="button" value="Remove" class="btnremove" />&nbsp;
    <br />
    <div id="content">Hello World</div>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 13, 2016 9:14 AM
  • User747696199 posted

    Hi Fei,

    Your code concept is exactly what I was looking for. I built my logic based on what you provided, and it works.

    Thank you very much for taking the time to construct the code sample.

    Appreciate it!

    Claudia

    Tuesday, June 14, 2016 3:41 PM