CODEWITHSUNDEEP
javascriptjqueryselect
AJ78
AJ78

Reputation: 3

Jquery OnChange Won't work at all

I am trying to trigger an onchange on a select box, to show the value that has been selected as an alert.

My current select box code is as follows:

<span class="location select-box">
  <input class="value-holder" type="text" disabled="disabled" placeholder="Select a Location">
<div class="advanced-select-button">
  <i class="fa fa-chevron-down"></i>
</div>
<ul class="select-clone custom-list">
  <li data-value="1">Advertising</li>
  <li data-value="2">Airport</li>
  <li data-value="3">Cars</li>
  <li data-value="4">Education</li>
  <li data-value="5">Entertainment</li>
  <li data-value="6">Garden</li>
  <li data-value="2">Airport</li>
  <li data-value="3">Cars</li>
  <li data-value="4">Education</li>
  <li data-value="5">Entertainment</li>
  <li data-value="6">Garden</li>
  <li data-value="2">Airport</li>
  <li data-value="3">Cars</li>
</ul>

<select name="Select_Location" data-placeholder="Select a Location">
   <option>Select Category</option>
          <option value="1">Advertising</option>
          <option value="2">Airport</option>
          <option value="3">Cars</option>
          <option value="4">Education</option>
          <option value="5">Entertainment</option>
          <option value="6">Garden</option>
          <option value="2">Airport</option>
          <option value="3">Cars</option>
          <option value="4">Education</option>
          <option value="5">Entertainment</option>
          <option value="6">Garden</option>
          <option value="2">Airport</option>
          <option value="3">Cars</option>
        </select>
      </span>

My current jquery script is as follows:

<script>
    $('select').on('change', function() {
    alert( this.value );
    })
</script>

I can't see where I am going wrong, or what I am doing wrong here. The above Jquery code is just one of many iterations I've tried without success.

If someone can figure this out for me - I would be eternally grateful.

Thanks in advance.

p.s - if you would like to see an example - I can provide a URL.

Upvotes: 0

Views: 246

Answers (3)

Hiroaki Machida
Hiroaki Machida

Reputation: 1090

$(document).ready(function(){
    $('select').on('change', function() {
    alert( this.value );
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="location select-box">
  <input class="value-holder" type="text" disabled="disabled" placeholder="Select a Location">
<div class="advanced-select-button">
  <i class="fa fa-chevron-down"></i>
</div>
<ul class="select-clone custom-list">
  <li data-value="1">Advertising</li>
  <li data-value="2">Airport</li>
  <li data-value="3">Cars</li>
  <li data-value="4">Education</li>
  <li data-value="5">Entertainment</li>
  <li data-value="6">Garden</li>
  <li data-value="2">Airport</li>
  <li data-value="3">Cars</li>
  <li data-value="4">Education</li>
  <li data-value="5">Entertainment</li>
  <li data-value="6">Garden</li>
  <li data-value="2">Airport</li>
  <li data-value="3">Cars</li>
</ul>

<select name="Select_Location" data-placeholder="Select a Location">
   <option>Select Category</option>
          <option value="1">Advertising</option>
          <option value="2">Airport</option>
          <option value="3">Cars</option>
          <option value="4">Education</option>
          <option value="5">Entertainment</option>
          <option value="6">Garden</option>
          <option value="2">Airport</option>
          <option value="3">Cars</option>
          <option value="4">Education</option>
          <option value="5">Entertainment</option>
          <option value="6">Garden</option>
          <option value="2">Airport</option>
          <option value="3">Cars</option>
        </select>
      </span>

Upvotes: 0

hkutluay
hkutluay

Reputation: 6944

Use like

   $(function() {
      $('select').on('change', function() {
        alert( this.value );
        })
    });

Upvotes: 1

Satpal
Satpal

Reputation: 133403

You need to wrap your code in document-ready handler.

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

Example 

$(document).ready(function() {
    //Your code
});


$(document).ready(function() {
  //Your code
  $('select').on('change', function() {
    alert(this.value);
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Select_Location" data-placeholder="Select a Location">
  <option>Select Category</option>
  <option value="1">Advertising</option>
  <option value="2">Airport</option>
  <option value="3">Cars</option>
  <option value="4">Education</option>
  <option value="5">Entertainment</option>
  <option value="6">Garden</option>
  <option value="2">Airport</option>
  <option value="3">Cars</option>
  <option value="4">Education</option>
  <option value="5">Entertainment</option>
  <option value="6">Garden</option>
  <option value="2">Airport</option>
  <option value="3">Cars</option>
</select>

Upvotes: 3

Related Questions