javascript - 如果选项值匹配则显示 div - jQuery

Question

如果选项的值匹配，我正在尝试显示一个 div，但无法显示，请帮助!

注意: 不能使用 div 的 ID 或类，因为 html 是动态生成的并且它可能会更改，因此目标是选项值

代码如下:

$('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>

Answer 1

使用$(this).val()来使用所选选项的值:

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

$('option').val() 它试图寻找“option”元素并获取它的值，但这是行不通的。

演示

$('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>