问题描述
当某人从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();
}
});
});
以上似乎不适用于我，有什么建议吗？ 我还希望能够在多个选定值上显示该消息。
1楼
$('#configoption[56]')正在寻找一个具有id而不是name ， configoption[56]的元素（或者应该是，但是选择器无效，您必须转义那些括号）。
使用名称：
$('select[name="configoption[56]"]')...
另外，您可以只使用 ，而不必使用find获得所选选项。
您还可以将用于显示/隐藏：
$(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');
});
});
2楼
好吧，您的.change函数专门绑定到具有id="configoption[56]"的元素，因此只需将id添加到您的select元素中，如下所示
<select name="configoption[56]" id="configoption[56]" onchange="recalctotals()">
//Options
</select>
UPDATE
按照@TJCrowder关于无效selector的建议，我想对id进行一点更改。
您可以使用configoption56作为id并编写您的select.change ，如下所示：
<select name="configoption[56]" id="configoption56" onchange="recalctotals()">
<!--Options-->
</select>
.change
$('#configoption56').change(function() {
//other codes
});
3楼
我应该这样做： :
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();
}
});
});
4楼
您的方法需要一些修改。 您要做的所有这些更改
$(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