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=".11.1/jquery.min.js"></script>

<select name="guideContainer-rootPanel-checklist-guidedropdownlist___jqName" style="position: relative;" size="1" role="bobox" 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>

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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select name="guideContainer-rootPanel-checklist-guidedropdownlist___jqName" style="position: relative;" size="1" role="bobox" 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>

• javascript
• jquery
• html
• css

3 Answers 3

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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="guideContainer-rootPanel-checklist-guidedropdownlist___jqName" style="position: relative;" size="1" role="bobox" 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>

$('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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="guideContainer-rootPanel-checklist-guidedropdownlist___jqName" style="position: relative;" size="1" role="bobox" 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>

You need to use this.value.

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

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="guideContainer-rootPanel-checklist-guidedropdownlist___jqName" style="position: relative;" size="1" role="bobox" 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>