Question

我有完全相同的问题： jQuery Hide / Show input when selected option is equal to

但是，当你选择多个选项时，它不起作用，当选择了特定选项时，它可以工作，但当你选择另一个选项时，它就会停止工作。

问题又是这样的：如果选择了选项4，我想显示一个div（#showme），即使选项3＆amp;选择了4个，因此在任何给定时间如果选择了选项4，则div应显示。

这是Javascript＆amp;我到目前为止的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>

感谢您的帮助

Answer 1

当进行多个选择时，$（this）.val（）将包含值的数组。通过它们迭代并检查＆＃39; 4＆＃39;。如果$（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/

Answer 2

<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>

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

2 个答案: