Having difficulty retrieving the selected element with Select2 jQuery

Currently developing an HTML5 template known as 

Londinium - responsive bootstrap 3 admin template

  1. In my dropdown menu, I have three items. When the user clicks on Owned, I am trying to display the hidden div cown, but it is not showing up.

The drop-down menu utilizes Select2 jQuery to populate the list.

Dropdown Menu

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

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

Any suggestions on how to fix this script issue?

Download Theme folder Here * I am unable to attach a snippet due to multiple jQuery dependencies; the folder contains all necessary files

jquerycsstwitter-bootstrap

Answer №1

There were some typos in your code, try this revised version:

$(document).ready(function() {
  $('#cown').hide();
  $('#ownership').change(function() {
    // Make sure to include the '$' before '('#ownership'
    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>
<!-- Replace "owner" with "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>

Answer №2

Give this a shot

HTML Snippet 

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps should I take to ensure that the proper link is loaded and opened when the loop is clicked?

I've been working on a script to display the top 25 posts from reddit and have their respective links open in a sliding div below. However, I'm running into an issue where the script outputs the same post for every item in the loop. I understand ...

javascriptjqueryjsonreddit

Is it possible for AJAX to update a button's argument?

After successfully using AJAX to extract a data value from a button click, I am now looking to pass this value as an argument to another button on the same page. Is there a way to achieve this seamlessly? Sample code from test.html: <a href="#" onClic ...

javascriptajaxjquery

Customized CSS scrollbar within a specific div

Is it possible to apply CSS to customize the scroll bar of a specific div without affecting the entire page layout? ...

csshtmlscrollbar

Guide on integrating a jQuery confirmation popup in CodeIgniter

Currently, I am working on a project independently and have chosen CodeIgniter as my framework. I am relatively new to PHP and CodeIgniter. I managed to create a confirm box in jQuery, but it displays as an HTML alert. Can someone guide me on how to improv ...

phpjquerycodeigniter

Multer is not recognizing the uploaded file and is returning req.file

This question has definitely been asked multiple times in the past, and I have attempted to implement various solutions without much success. Struggling to upload a file and read its size through Node has left me frustrated. Initially, I tried using the f ...

javascriptjqueryajaxnode.jsexpress

Mobile compatibility in ECMAScript 5.1 is essential for creating seamless user

Is there a reliable source for information on ECMAScript 5.1 compatibility with mobile browser devices? ...

javascriptjqueryandroidiosmobile

jQuery makes it easy to remove all controls within a tab

Within my tabcontainer, there are 5 tabs. I am looking to use JQuery to clear all data from the controls within tab1. What method would be most effective for achieving this? ...

jqueryasp.net

The Step-by-Step Guide to Adding a Function Style to Wordpress

Typically I would use enqueue in this manner wp_enqueue_style( 'mystyle', get_stylesheet_directory_uri() . '/css/style.css',false,'1.1','all'); but now I have created a custom field and need to enqueue a style that ...

phpcsswordpress

"Step-by-step guide for incorporating a right-to-left (RTL) Bootstrap

Is there a way to make my bootstrap navbar right-to-left (RTL)? I want the logo to be on the right and the links to flow from right to left. I've tried various tricks but none of them seem to work. Here's the code I currently have: <nav class ...

csstwitter-bootstrapbootstrap-4navbar

Is your animation glitching due to axis restrictions?

I decided to create my own version of the Google Maps icon using Photoshop, and now I want to replace the current image with my duplicate when the link that wraps around both is hovered over. To achieve this, I used the position: absolute property to layer ...

jqueryhtmlcssjquery-animate

What values can be used for the CSS Property "padding-right-ltr-source"?

Currently, I am facing an issue with box padding specifically in Firefox. Upon inspecting the affected span element, I noticed a property called "padding-right-ltr-source" with the value "physical". Here is the snippet of code: >padding: 0px 15px; ...

cssfirefoxpadding

Communicating PHP variables with JavaScript through AJAX in a chat application

Hello there! I am currently in the process of developing a chat application for my website that includes user registration and login. My backend server is built using NodeJS to leverage SocketIO capabilities. Within my index.php file, I have implemented ...

javascriptphpjqueryajaxnode.js

Retrieving a jQuery object from a full HTML document

Can a full HTML document be parsed as an entire jQuery object? I have attempted the following: var $tmp = $("<html><head><title>title</title></head><body><p id='test'>test</p></body></html ...

jquerydom

Solving the CSS Trick: Responsive Data Table (featuring inline editing) Display Glitch

In my quest to create a responsive table with inline editing, I turned to Chris's guide at CSS-Tricks (check it out here). To see how it all comes together, take a look at this Plunker demo. On mobile screens, the responsiveness is on point. https: ...

htmlcssangularjsdatatableresponsive-design

Using jQuery and regex to only allow alphanumeric characters, excluding symbols and spaces

Seeking advice, I am using a jquery function called alphanumers var alphanumers = /^[a-zA-Z0-9- ]*$/; which currently does not allow all symbols. However, I now wish to disallow the space character as well. Any suggestions? ...

javascriptjquery

Discovering the clicked element using JavaScript: A complete guide

Let me start by saying that I have come across similar posts about tracking event listeners, but in my specific case, I am struggling to figure it out. While I am familiar with the event.target property, I just can't seem to make it work. Here is a s ...

javascripthtmlcssevent-handling

Transform one div to another using a CSS animation slide

I am experiencing an issue with two divs (page1 + page2) inside a container (also a div). The container has overflow:hidden property, but when the animation starts, the overflow configuration is being ignored. Additionally, the page that should be displaye ...

jqueryhtmlcssanimation

What is the best way to send the $_SESSION['var'] array to jquery and initiate an ajax request?

I'm dealing with an issue here. I need to retrieve all the items within the $_SESSION['cart'] array and pass it to jQuery so that it can be used in a php-ajax file. My question is, how can this be accomplished? This is what I have in mind: ...

phpjavascriptjqueryajax

JQuery enthusiast seeks cheerful clicker for callback upon event binding

Incorporating a complex functionality into a click event is proving to be challenging $(someSelector)).bind('click', someFunction(a,b,c)); function somefunction(a,b,c) { return function() { // dive into complexity $(anotherS ...

javascriptjquery

When using jQuery autocomplete and selecting an option by pressing ENTER, it triggers a popup blocker response

In my Office add-in, I have implemented jquery UI autocomplete to provide users with a list of clickable links. When a selection is made from the autocomplete dropdown, it triggers window.open to open the link in a new tab in the default browser. The fun ...

jqueryjquery-uioffice-jsjquery-ui-autocomplete