CODEWITHSUNDEEP
javascriptjqueryhtmlcss
cedPound
cedPound

Reputation: 377

how to Display div if option is selected in jQuery

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');

        });

Upvotes: 1

Views: 2124

Answers (5)

Trimantra Software Solution
Trimantra Software Solution

Reputation: 3329

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();
             }
        });
 });

Upvotes: 1

Gauri Bhosle
Gauri Bhosle

Reputation: 5483

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();
                        }
                    });

Upvotes: 0

vijayP
vijayP

Reputation: 11512

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>

Upvotes: 1

Vaibhav shetty
Vaibhav shetty

Reputation: 372

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
            }
        });
    });

Upvotes: 0

Super User
Super User

Reputation: 9642

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>

Upvotes: 0

Related Questions