只有一个值等于并在多选中选择

only one value is equal to and selected in multiple select

本文关键字：选择 有一个      更新时间：2023-09-26

我有一个与此完全相同的问题：当选择的选项等于时，jQuery隐藏/显示输入

然而，当您转到多选时，它不起作用，当选择特定选项时，它起作用，但当您选择旁边的另一个选项时，就会停止工作。

问题是：如果选择了选项4，我想显示div（#showme），即使选择了选项3&4，所以在任何给定的时间，如果选择了选项4，div应该显示。

这是Javascript&到目前为止，我有HTML：（请注意，我在这个表格中有不止一个选择）

$('select[multiple]').each(function() {
	$(this).change(function() {
		obj = '#' + $(this).attr('id') + '_desc';
		if($(this).val() == "4") {
			$(obj).parent().parent().parent().removeClass('hide');
			$(obj).css('display','block');
		}
		else {
			$(obj).parent().parent().parent().addClass('hide');
			$(obj).css('display','none');
		}
	});
});
<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">2</option>
				<option value="3">3</option>
				<option value="4">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="desc" rows="2"></textarea>
	</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://jsfiddle.net/BenjaminRay/7ckp7epf/

<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>
相关文章：