CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
Bender
Bender

Reputation: 715

Select2 jQuery unable to get selected element

Working on a html5 template Londinium - responsive bootstrap 3 admin template

  1. I have 3 items in drop down and when clicked on Owned i want to display hidden div cown , but it is not getting displayed.

drop-down using Select2Jquery to populate the list.

Dropdown 

  <select id ="owner" data-placeholder="Select Ownership" class="select-full" >
     <option value="" selected></option>
     <option value="Owned">Owned</option>
     <option value="Co-Owned">Co-Owned</option>
     <option value="Consigned">Consigned</option>
    </select>

Div to display

        <div id="cown" style='display:none'>
            <div class="col-md-4" >
              <label>Percentages</label>
              <input type="text" placeholder="20" class="form-control">
            </div>
          </div>

Javascript

    <script type='text/javascript'>//<![CDATA[ 
  $(document).ready(function() {
      $('#cown').hide();
       $('#ownership').change(function () {
        alert(('#ownership option:selected').text());
          if ($('#ownership option:selected').text() == 'Owned'){
              $('#cown').show();
          }
           else { 
                $('#cown').hide();
           }
      });
  });
  //]]>  
</script>

What is wrong with this script.

Theme folder * I can not attach a snippet because of many jQuery dependencies, folder incudes all the files

Upvotes: 0

Views: 297

Answers (2)

vanarajcs
vanarajcs

Reputation: 978

Try this

Html Code 

<div id="cown">
  <div class="col-md-4">
    <label>Percentages</label>
    <input type="text" placeholder="20" class="form-control">
  </div>
</div>

Javascript Code

<script type="text/javascript">
     $(document).ready(function() {
         var el = $('#cown');
         el.hide();
         $('#ownership').change(function() {
            if($(this).val() == 'Owned') {
                el.show();
            } else {
               el.hide();
             }
          });
     });
</script>

Upvotes: 0

Chris Middleton
Chris Middleton

Reputation: 5942

You just had some typos. This should work:

$(document).ready(function() {
  $('#cown').hide();
  $('#ownership').change(function() {
    // !! you forgot the '$' here
    alert($('#ownership option:selected').text());
    if ($('#ownership option:selected').text() == 'Owned') {
      $('#cown').show();
    } else {
      $('#cown').hide();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- you had "owner", should be "ownership" -->
<select id="ownership" data-placeholder="Select Ownership" class="select-full">
  <option value="" selected></option>
  <option value="Owned">Owned</option>
  <option value="Co-Owned">Co-Owned</option>
  <option value="Consigned">Consigned</option>
</select>

<div id="cown" style='display:none'>
  <div class="col-md-4">
    <label>Percentages</label>
    <input type="text" placeholder="20" class="form-control">
  </div>
</div>

Upvotes: 1

Related Questions