Javascript 只有一个值等于并在多个选择中选择
我的问题与此完全相同： 但是，当您转到“多重选择”时，该选项不起作用，当选定特定选项时，该选项起作用，但当您选择旁边的另一个选项时，该选项将停止工作 问题是：如果选择了选项4，我想显示一个div（#showme），即使选择了选项3和4，我也想工作，因此在任何给定时间，如果选择了选项4，div应该显示 这是我到目前为止拥有的Javascript和HTML：（请注意，我在这个表单中有多个select）Javascript 只有一个值等于并在多个选择中选择,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我的问题与此完全相同： 但是，当您转到“多重选择”时，该选项不起作用，当选定特定选项时，该选项起作用，但当您选择旁边的另一个选项时，该选项将停止工作 问题是：如果选择了选项4，我想显示一个div（#showme），即使选择了选项3和4，我也想工作，因此在任何给定时间，如果选择了选项4，div应该显示 这是我到目前为止拥有的Javascript和HTML：（请注意，我在这个表单中有多个select） $（'select[multiple]'）。每个（函数（）{ $（this）.change（f
$（'select[multiple]'）。每个（函数（）{
$（this）.change（function（）{
obj='#'+$（this.attr（'id'）+'_desc'；
如果（$（this.val（）=“4”）{
$（obj）.parent（）.parent（）.parent（）.removeClass（'hide'）；
$（obj）.css（'display'，'block'）；
}
否则{
$（obj）.parent（）.parent（）.parent（）.addClass（'hide'）；
$（obj.css（'display'，'none'）；
}
});
});
你好
1.
2.
3.
4.
描述
当进行多个选择时，$（this）.val（）将包含一个值数组。迭代它们并检查“4”。如果$（this）.val（）为空，则未选择任何内容
下面的示例正是您想要的，包括我们在评论和聊天中广泛交换后所做的更改，包括您最近请求在加载文档时处理预先选择的值
此外，您缺少引导JavaScript文件，并且您已经包含的文件的顺序和位置错误。下面的示例包括所有顺序和位置正确的.js和.css文件
HTML
<!-- These should be in head -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet" />
<!-- Body content -->
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="feedback_q1">Hello?</label>
<select class="form-control selectpicker show-tick" name="feedback_q1[]" id="feedback_q1" multiple="multiple" title="Choose...">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4" selected>4</option>
</select>
</div>
</div>
</div>
<div class="row hide">
<div class="col-sm-12">
<div class="form-group">
<label for="feedback_q1_desc">desc <span class="glyphicon glyphicon-pencil"></span>
</label>
<textarea name="feedback_q1_desc" id="feedback_q1_desc" class="form-control" data-toggle="tooltip" data-placement="top" title="אנא פרט" rows="2"></textarea>
</div>
</div>
</div>
<!-- These should be at the end of <body> -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
你好
1.
2.
3.
4.
描述
JavaScript
// Check a select for a specific value and show/hide div based on selection
// Select will come in as a jQuery object
function checkSelect(control) {
// Build selector for associated description field
var selector = '#' + control.attr('id') + '_desc';
// Handle scenario where nothing is selected
if (control.val() == null) {
$(selector).parent().parent().parent().addClass('hide');
$(selector).css('display', 'none');
return;
}
// Get array containing selected values
var vals = control.val();
// Handle scenario where something is selected
for (i = 0; i < vals.length; i++) {
if (control.val()[i] == "4") {
$(selector).parent().parent().parent().removeClass('hide');
$(selector).css('display', 'block');
return; // Stop checking as we know the value we want is selected
} else {
$(selector).parent().parent().parent().addClass('hide');
$(selector).css('display', 'none');
}
}
}
// This runs when the DOM is ready
$(function () {
// Bind selectpicker
$('.selectpicker').selectpicker();
// Iterate through all multiple selects
$('select[multiple]').each(function () {
// Check for pre-selected values when page first loads
checkSelect($(this));
// Bind to change event so that values are checked after something is changed
$(this).change(function () {
checkSelect($(this));
});
});
});
//检查select中的特定值，并根据选择显示/隐藏div
//Select将作为jQuery对象进入
功能检查选择（控制）{
//关联描述字段的生成选择器
变量选择器='#'+control.attr（'id'）+'u desc'；
//处理未选择任何内容的场景
if（control.val（）==null）{
$（选择器）.parent（）.parent（）.parent（）.addClass（'hide'）；
$（选择器）.css（'display'，'none'）；
返回；
}
//获取包含选定值的数组
var vals=control.val（）；
//处理选择某物的场景
对于（i=0；i
演示版（第三版）：
@foreach（在ViewBag.Status中选择ListItem项）
{
如果（item.Selected==false）
{
@项目.案文
}
其他的
{
@项目.案文
}
}
评论不用于扩展讨论；这段对话已经结束。谢谢蓝脚，我以前想去聊天，但我没有足够的声望点：P无论如何，本杰明·雷的解决方案非常有效，谢谢B.R我真的很感谢你的帮助，你太棒了！我还有另一个问题：这个代码只在选择被更改时起作用，当页面被加载并且字段已经被选择的值“4”填充时，我如何使它也起作用？我尝试使用.ready（），但不断出现错误：/I我已更新答案，以包含对预选值的处理。检查所选值的代码已移动到其自己的函数，该函数现在在document.ready上以及选择更改时调用。欢迎使用SO。谢谢你的贡献。因此，不鼓励使用仅代码转储。考虑<代码>编辑<代码>以突出重要的位，并解释它们如何解决OP的问题。随着时间的推移，高质量的答案会得到更多的支持，因为未来的访问者会从你的帖子中学到一些他们可以应用到自己代码库中的东西。此外，请编辑以在您发布的代码中使用合理和一致的缩进，以提高本网站在各种设备上的可读性。
<div class="form-group">
<select class="form-control selectpicker show-tick" name="Status" id="Status" multiple="multiple" title="Choose...">
@foreach (SelectListItem item in ViewBag.Status)
{
if (item.Selected == false)
{
<option value="@item.Value">@item.Text</option>
}
else
{
<option value="@item.Value" selected>@item.Text</option>
}
}
</select>
</div>