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

使用$('select').change(function() { if ($(this).val() == 'Clear my checklist') { $('.showcontent').show(); } else { $('.showcontent').hide(); } });来使用所选选项的值：

$('option').val()

$('select').change(function() { console.log($('option').val()) if ($(this).val() == 'Clear my checklist') { $('.showcontent').show(); } else { $('.showcontent').hide(); } });它试图寻找＆＃34;选项＆＃34;元素并获得它的价值，这是行不通的。

<强>演示

＆＃13;

<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>

＆＃13;

SELECT TOP 1 p.ProjectNodeGUID, p.ProjectNodeName FROM
(
    SELECT ProjectNodeGUID, ProjectNodeName, 1 AS RowRank FROM GetProjectNodeInfoFromReportFolder(@ReportPath)
    UNION
    SELECT '00000000-0000-0000-0000-000000000000' AS ProjectNodeGUID, 'missing' AS ProjectNodeName, 0 AS RowRank
) p ORDER BY p.RowRank DESC

＆＃13;

Answer 2

无论您选择什么，
$('option').val()都将始终返回第一个选项的值。

您需要使用$(this).val()获取所选值，例如：

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

代码：

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

Answer 3

您需要使用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>

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

3 个答案: