jquery - Select2 jQuery 无法获取所选元素

Question

使用 html5 模板Londinium - 响应式 Bootstrap 3 管理模板

1. 我在下拉列表中有 3 个元素，当单击 Owned 时，我想显示隐藏的 div cown，但它没有显示。

下拉使用 Select2Jquery 来填充列表。

下拉菜单

  <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

        <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>

这个脚本有什么问题。

Theme folder * 由于存在许多 jQuery 依赖项，我无法附加代码片段，文件夹包含所有文件

Answer 1

您刚刚有一些错别字。这应该有效:

$(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>