CODEWITHSUNDEEP
jqueryhtml
benua
benua

Reputation: 195

Target selected option with jQuery

I'd like to display an alert when user selects any option other than "choose" which is selected by default. I tried to target whether selected option has value but this doesn't work. This is what I have, don't have access to html:

if (jQuery('#select_1 option').val()) {
  jQuery('#select_1').append('<span>you selected an option</span>');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_1">
<option value>choose</option>
<option value="111">1</option>
<option value="112">2</option>
<option value="113">3</option>
</select>

Upvotes: 0

Views: 293

Answers (4)

Sreejith BS
Sreejith BS

Reputation: 1203

You can try this:

$(document).ready(function () {
    $("#select_1").change(function(){
        if( $('#select_1').val() != '' ) {
            var text = $('#select_1 :selected').text();
            var value = $('#select_1 :selected').val();
            $('#appendDiv').append("<br><span>You selected an option with text:" + text + " and value: " + value + "</span>");
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_1">
    <option value="">-- Choose --</option>
    <option value="111">1</option>
    <option value="112">2</option>
    <option value="113">3</option>
</select>
<div id="appendDiv"> </div>

Upvotes: 0

Seb Cooper
Seb Cooper

Reputation: 574

The following works. I have used $(select).val() rather than using val() on the option elements.

$('#select_1').on('change', function(){
  if($(this).val().trim() === '' ){
    alert('Please select a value!');
   } else {
    alert('You selected value:' + $(this).val());
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_1">
    <option value>choose</option>
    <option value="111">1</option>
    <option value="112">2</option>
    <option value="113">3</option>
</select>

Upvotes: 0

Barmar
Barmar

Reputation: 782005

You're not selecting the selected option, you're selecting all the options. Then .val() returns the value of the first one.

Instead of getting the value of the option, get the value of the <select>, which is the value of the selected option.

$("#select_1").change(function() {
  if (this.value) {
    $("#output").append('<span>you selected an option</span>');
  } else {
    $("#output").empty();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_1">
    <option value>choose</option>
    <option value="111">1</option>
    <option value="112">2</option>
    <option value="113">3</option>
</select>
<div id="output"></div>

Also, you shouldn't append the message to #select_1. The contents of a <select> should only be <option> and <optgroup>.

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337646

To achieve this you should hook to the change event of the select and check the selected value.

Also note that you cannot append() any elements other than option to a select. It would be better to have the span in the DOM on load, but hidden. You can then toggle() it based on the selected value, something like this:

$('#select_1').change(function() {
  $('#alert').toggle(this.value !== '');
});
#alert { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_1">
  <option value="">choose</option>
  <option value="111">1</option>
  <option value="112">2</option>
  <option value="113">3</option>
</select>

<span id="alert">you selected an option</span>

Upvotes: 1

Related Questions