CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

Show div if option value matching - jQuery

I am trying to show a div if the value of option is matching, not able to show, please help!

NOTE: Cannot use ID or class of the div since the html is generated dynamically and it may get changed, so targeted is option value

Here is the code :

$('select').change(function() {
  if ($('option').val() == 'Clear my checklist') {
    $('.showcontent').show();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select name="guideContainer-rootPanel-checklist-guidedropdownlist___jqName" style="position: relative;" size="1" role="combobox" tabindex="0" aria-label="Drop-down List" id="guideContainer-rootPanel-checklist-guidedropdownlist___widget">
    <option id="emptyValue" role="option" value="Options" style="">Options</option>
    <option role="option" data-user-option="" value="Print my checklist">Print my checklist</option>
    <option role="option" data-user-option="" value="Email my checklist">Email my checklist</option>
    <option role="option" data-user-option="" value="Clear my checklist">Clear my checklist</option>
    <option role="option" data-user-option="" value="Sign out of my checklist">Sign out of my checklist</option>
</select>
<div class="showcontent" style="display:none;">Show content if value matching</div>

Upvotes: 2

Views: 6150

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

$('option').val() will always return the value of the first option whatever you're selecting.

You need to get the selected value using $(this).val() instead, like:

$('select').change(function(){
    if($(this).val() == 'Clear my checklist') {
        $('.showcontent').show(); 
    } 
});

Code:

$('select').change(function() {
  $('.showcontent').hide();
  if ($(this).val() == 'Clear my checklist') {
    $('.showcontent').show();
  }

  console.log($('option').val() + ' ---- ' + $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="guideContainer-rootPanel-checklist-guidedropdownlist___jqName" style="position: relative;" size="1" role="combobox" tabindex="0" aria-label="Drop-down List" id="guideContainer-rootPanel-checklist-guidedropdownlist___widget">
    <option id="emptyValue" role="option" value="Options" style="">Options</option>
    <option role="option" data-user-option="" value="Print my checklist">Print my checklist</option>
    <option role="option" data-user-option="" value="Email my checklist">Email my checklist</option>
    <option role="option" data-user-option="" value="Clear my checklist">Clear my checklist</option>
    <option role="option" data-user-option="" value="Sign out of my checklist">Sign out of my checklist</option>
</select>
<div class="showcontent" style="display:none;">Show content if value matching</div>

Upvotes: 0

Mittal Patel
Mittal Patel

Reputation: 2762

You need to use this.value.

$('select').change(function() {
  if (this.value == 'Clear my checklist') {
    $('.showcontent').show();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="guideContainer-rootPanel-checklist-guidedropdownlist___jqName" style="position: relative;" size="1" role="combobox" tabindex="0" aria-label="Drop-down List" id="guideContainer-rootPanel-checklist-guidedropdownlist___widget">
        <option id="emptyValue" role="option" value="Options" style="">Options</option>
        <option role="option" data-user-option="" value="Print my checklist">Print my checklist</option>
        <option role="option" data-user-option="" value="Email my checklist">Email my checklist</option>
        <option role="option" data-user-option="" value="Clear my checklist">Clear my checklist</option>
        <option role="option" data-user-option="" value="Sign out of my checklist">Sign out of my checklist</option>
    </select>
<div class="showcontent" style="display:none;">Show content if value matching</div>

Upvotes: -1

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

Use $(this).val() to use the value of the selected option:

$('select').change(function() {
  if ($(this).val() == 'Clear my checklist') {
    $('.showcontent').show();
  } else {
    $('.showcontent').hide();
  }
});

The $('option').val() it trying to look for the "option" element and get the value of that, and that would not work.

Demo

$('select').change(function() {
console.log($('option').val())
  if ($(this).val() == 'Clear my checklist') {
    $('.showcontent').show();
  } else {
    $('.showcontent').hide();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="guideContainer-rootPanel-checklist-guidedropdownlist___jqName" style="position: relative;" size="1" role="combobox" tabindex="0" aria-label="Drop-down List" id="guideContainer-rootPanel-checklist-guidedropdownlist___widget">
        <option id="emptyValue" role="option" value="Options" style="">Options</option>
        <option role="option" data-user-option="" value="Print my checklist">Print my checklist</option>
        <option role="option" data-user-option="" value="Email my checklist">Email my checklist</option>
        <option role="option" data-user-option="" value="Clear my checklist">Clear my checklist</option>
        <option role="option" data-user-option="" value="Sign out of my checklist">Sign out of my checklist</option>
    </select>
<div class="showcontent" style="display:none;">Show content if value matching</div>

Upvotes: 6

Related Questions