如何使用javascript显示特定下拉选择的消息

How do I show a message for a specific dropdown selection using javascript?

本文关键字：选择 消息 何使用 javascript 显示      更新时间：2023-09-26

当有人从HTML下拉列表中进行特定选择时，我想显示一条消息。到目前为止我有这个:

<select name="configoption[56]" onchange="recalctotals()">
<option value="235"">USA</option>
<option value="206">Europe</option>
</select>
<span class="message">You selected USA!</span>

和脚本:

$(document).ready(function() {
    $('#configoption[56]').change(function() {
        var selectedValue = $('#configoption[56]').find(":selected").text();
        if ( selectedValue == '235' ) {
            $('.message').show();
        } else {
            $('.message').hide();
        }
    });
});

以上似乎对我不起作用，有什么建议吗?我也希望能够显示多个选定值的消息。

您的.change函数是专门绑定到具有id="configoption[56]"的元素的，因此只需在select元素中添加id，如下所示

<select name="configoption[56]"  id="configoption[56]" onchange="recalctotals()">
   //Options
</select>

根据@ t.j.。克劳德关于无效selector的建议，我想对id做一点修改。您可以使用configoption56作为id，并将select.change写入如下:

<select name="configoption[56]"  id="configoption56" onchange="recalctotals()">
       <!--Options-->
</select>

.change 

$('#configoption56').change(function() {
  //other codes
});

$('#configoption[56]')正在寻找具有 id 的元素，而不是 name configoption[56](或者它将是，但选择器无效，您必须转义这些括号)。

使用名称:

$('select[name="configoption[56]"]')...

单独地，您可以只使用val，您不必使用find来获得所选选项。您还可以使用toggle来显示/隐藏:

$(document).ready(function() {
    $('select[name="configoption[56]"]').change(function() {
        $('.message').toggle($(this).val() == '235');
    });
});

关于基于||和两个值的切换的评论:

$(document).ready(function() {
    $('select[name="configoption[56]"]').change(function() {
        var value = $(this).val();
        $('.message').toggle(value == '235' || value == '123');
    });
});

我应该这样做:http://jsfiddle.net/nmn17cr6/

HTML: 

<select name="configoption[56]" id="configoption" onchange="recalctotals()">
<option value="1">Dummy</option>
<option value="235">USA</option>
<option value="206">Europe</option>
</select>
<span class="message">You selected USA!</span>
CSS: 

.message {
    display:none;
}
jQuery: 

$(document).ready(function() {
    $('#configoption').change(function() {
        var selectedValue = $(this).val();
        if ( selectedValue == '235' ) {
            $('.message').show();
        } else {
            $('.message').hide();
        }
    });
});

您的方法需要稍作修改。你只需要做这些改变

$(document).ready(function() {
$("select[name=configoption[56]]").change(function() { // change jquery selector for name
    var selectedValue = $('#configoption[56]').val(); // and val to get the value
    if ( selectedValue == '235' ) {
        $('.message').show();
    } else {
        $('.message').hide();
    }
});
});

和相同的jQuery代码。下面必须是

  <select name="configoption[56]" >
  // onchange="recalctotals()"> was not required
相关文章：