how to Display div if option is selected in jQuery

Question

I am trying to display a div if one of 2 options is selected on my page. however i am struggling i have checked the console on browser and put a break point and analysed but still confused. i have also tried several steps but still nothing.

          <div id="dialog-store" title="Store information" style="display:none;">
                <span class="ui-state-default ui-corner-all" style="float: left; margin: 0 7px 0 0;"><span class="ui-icon ui-icon-info" style="float: left;"></span></span>
                <div style="margin-left: 23px;">
                    <legend class="legend">List of Stores which completed the survey so far</legend>   

                    <select for="postage" id="store_select">
                        <option value="">Please select...</option>
                        <option value="finished" id ="Finshed">Stores Completed.</option>
                        <option value="notFinished" id ="NotFinsh">Stores Not Completed</option>
                    </select>
                    <br />
                    <br />
                    <div id="completedStores" class="displaystore2">
                        @foreach (var item in Model.savedStoresList[i])
                        {
                            <div class="editor-label">
                                @Html.DisplayFor(modelItem => item.StoreName)
                            </div>          
                            <div class="editor-field">
                                @Html.DisplayFor(modelItem => item.StoreNumber) 
                            </div>    
                        }
                    </div>
                    <br />

                    <div id="notCompletedStores" class="displaystore1">

                        @foreach (var term in Model.notsavedStoresList[i])
                        {
                            <div class="editor-label">
                                @Html.DisplayFor(modelItem => term.StoreName)
                            </div>          
                            <div class="editor-field">
                                @Html.DisplayFor(modelItem => term.StoreNumber) 
                            </div>
                        }
                        <br />
                        <br />
                    </div>
                </div>
            </div>

first jquery code

    $(document).ready(function () {
        $('#dialog-store').hide();
        //$("#completedStores").hide();

        //$("#notCompletedStores").hide();

        $(function () {
            $("#store_select").change(function () {
                if ($("#Finshed").is(":selected")) {
                    alert("your dumb2");
                    //
                    $("#completedStores").show();
                    $("#notCompletedStores").hide();
                }
                else {
                    $("#completedStores").hide();
                    $("#notCompletedStores").show();
                }
                //if ($("#NotFinsh").is(":selected")) {
                //    $("#notCompletedStores").show();
                //    $("#completedStores").hide();
                //}
                //else {
                //    $("#notCompletedStores").hide();
                //    $("#completedStores").hide();
                //}
            });
        });

Second Jquery Code

        $(document).ready(function () {
            $('#store_select').bind('change', function (e) { 
                if( $('#store_select').val() == 'finished') {
                    $('#completedStores').show();
                    $("#completedStores").css({ display: "inline-block" });
                    $('#notCompletedStores').hide();
                }
                else if( $('#status').val() == 'notFinished') {
                    $('#completedStores').hide();
                    $('#notCompletedStores').show();
                }         
            }).trigger('change');

        });

Answer 1

Your code should work. Still I have made some minor changes to hide both div if user haven't made any selection so far.

 $(document).ready(function() { $('#store_select').bind('change', function(e) { if ($('#store_select').val() == 'finished') { $("#completedStores").show(); $("#notCompletedStores").hide(); } else if ($('#store_select').val() == 'notFinished') { $("#completedStores").hide(); $("#notCompletedStores").show(); } else { $("#completedStores").hide(); $("#notCompletedStores").hide(); } }).trigger('change'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div style="margin-left: 23px;"> <legend class="legend">List of Stores which completed the survey so far</legend> <select for="postage" id="store_select"> <option value="">Please select...</option> <option value="finished" id ="Finshed">Stores Completed.</option> <option value="notFinished" id ="NotFinsh">Stores Not Completed</option> </select> <br /> <br /> <div id="completedStores" class="displaystore2"> Stores Completed Div </div> <br /> <div id="notCompletedStores" class="displaystore1"> NOT Stores Completed Div <br /> <br /> </div> </div> 

Answer 2

try this...

1) Add jquery reference to your view

2) Use bellow code

 $(document).ready(function () {
        $('#store_select').change(function () { 
            var currentValue = $(this).val();
            switch(currentValue){
                case 'finished':
                     $('#completedStores').show();
                     $('#notCompletedStores').hide();
                     break;
                case 'notFinished':
                     $('#completedStores').hide();
                     $('#notCompletedStores').show();
                     break;
                default:
                     $('#completedStores').hide();
                     $('#notCompletedStores').hide();
             }
        });
 });

Answer 3

Just use $(this).val() function for this, check updated snippet below

 $("#store_select").change(function () { if($(this).val() == 'finished') { $("#completedStores").show(); $("#notCompletedStores").hide(); } else { $("#completedStores").hide(); $("#notCompletedStores").show(); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="dialog-store" title="Store information"> <span class="ui-state-default ui-corner-all" style="float: left; margin: 0 7px 0 0;"><span class="ui-icon ui-icon-info" style="float: left;"></span></span> <div style="margin-left: 23px;"> <legend class="legend">List of Stores which completed the survey so far</legend> <select for="postage" id="store_select"> <option value="">Please select...</option> <option value="finished" id ="Finshed">Stores Completed.</option> <option value="notFinished" id ="NotFinsh">Stores Not Completed</option> </select> <br /> <br /> <div id="completedStores" class="displaystore2" style="display:none;"> @foreach (var item in Model.savedStoresList[i]) { <div class="editor-label"> @Html.DisplayFor(modelItem => item.StoreName) </div> <div class="editor-field"> @Html.DisplayFor(modelItem => item.StoreNumber) </div> } </div> <br /> <div id="notCompletedStores" class="displaystore1" style="display:none;"> @foreach (var term in Model.notsavedStoresList[i]) { <div class="editor-label"> @Html.DisplayFor(modelItem => term.StoreName) </div> <div class="editor-field"> @Html.DisplayFor(modelItem => term.StoreNumber) </div> } <br /> <br /> </div> </div> </div> 

Answer 4

You can do like This

 $(document).ready(function () {

        $('#store_select').on('change', function () {
            var selectedVal = $(this).val();
            if(selectedVal == "finished")
            {
                //Do your code here
            }else
            {
                //do other stuff
            }
        });
    });

Answer 5

Try below code(check commented part ,you can use either this condition or the condition I have used)

 $(document).on("change","#store_select",function () {
                         var selectedValue1 = $(this).find("option:selected").text();
                          var selectedTextcenterType = $(this).val();
                            //if (selectedTextcenterType =="Finshed") { OR
                        if (selectedValue1 =="Stores Completed.") {
                            $("#completedStores").show();
                            $("#notCompletedStores").hide();
                        }
                        else {
                            $("#completedStores").hide();
                            $("#notCompletedStores").show();
                        }
                    });