只有一个值是等于,并在多个选择中选择
我有相同的问题,因为这工程,但是当你选择旁边的另一个选项停止工作。只有一个值是等于,并在多个选择中选择
问题再次是这样的:如果选择了选项4,我想显示一个div(#showme),即使选择了选项3 & 4,我也想工作,所以在任何给定的时间,如果选项4是选择div应显示。
这是JavaScript & HTML我到目前为止有:(请注意,我有一个以上的选择以这种形式)
$('select[multiple]').each(function() {
\t $(this).change(function() {
\t \t obj = '#' + $(this).attr('id') + '_desc';
\t \t if($(this).val() == "4") {
\t \t \t $(obj).parent().parent().parent().removeClass('hide');
\t \t \t $(obj).css('display','block');
\t \t }
\t \t else {
\t \t \t $(obj).parent().parent().parent().addClass('hide');
\t \t \t $(obj).css('display','none');
\t \t }
\t });
});
<div class="row">
\t <div class="col-sm-12">
\t \t <div class="form-group">
\t \t \t <label for="feedback_q1">Hello?</label>
\t \t \t <select class="form-control selectpicker show-tick" name="feedback_q1[]" id="feedback_q1" multiple="multiple" title="Choose...">
\t \t \t \t <option value="1">1</option>
\t \t \t \t <option value="2">2</option>
\t \t \t \t <option value="3">3</option>
\t \t \t \t <option value="4">4</option>
\t \t \t </select>
\t \t </div>
\t </div>
</div>
<div class="row hide">
<div class="col-sm-12">
\t <div class="form-group">
\t \t <label for="feedback_q1_desc">desc <span class="glyphicon glyphicon-pencil"></span></label>
\t \t <textarea name="feedback_q1_desc" id="feedback_q1_desc" class="form-control" data-toggle="tooltip" data-placement="top" title="desc" rows="2"></textarea>
\t </div>
</div>
</div>
感谢您的帮助
当做出多个选择时,$(this).val()将包含一个值的数组。遍历它们并检查'4'。如果$(this).val()为null,那么没有选择任何东西。
下面的示例完全符合您的需求,包括在评论和聊天中进行广泛交流后的更改,包括处理文档加载时预先选择的最近处理值的请求。
此外,您错过了引导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>
的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));
});
});
});
评论不适合扩展讨论;这个对话已经[转移到聊天](http://chat.*.com/rooms/73775/discussion-on-answer-by-benjamin-ray-only-one-value-is-equal-to-and-选择式)。 – Taryn 2015-03-25 13:53:02
谢谢bluefeet,我之前想去聊天,但是我没有足够的声望点:P 不管怎样,Benjamin Ray的解决方案非常完美,谢谢B.R我真的很感谢您的帮助,您真是太棒了! – odedta 2015-03-25 14:33:14
我还有一个问题:这段代码只能工作在选择被改变的时候,我怎么能使它在页面加载时也工作,并且字段已经填充了选定的值“4”?我尝试使用.ready(),但我不断收到错误:/ – odedta 2015-03-26 11:59:15
http://jsfiddle.net/arunpjohny/gmp1675r/2/ – 2015-03-25 12:06:59