使用多重选择显示/隐藏多个Div

Question

I am trying to show or hide a series of Inputs based on the options selected from a multi-select. 我试图根据从多选中选择的选项来显示或隐藏一系列输入。

My solution is working if one option is selected but once I select a second it isn't showing until I untick my first selection. 如果选择了一个选项，我的解决方案就会起作用，但是一旦我选择了第二个选项，它就会显示出来，直到我取消我的第一个选择。

My HTML: 我的HTML：

<div class="form-group">
<label for="">Multi Select:</label>
<select name="" id="" multiple="" onchange="checkThis(this);">
    <option value="option1">fhfg</option>
    <option value="option2">fghgfhfh</option>
</select>
</div>

<div class="form-group" id="ifYesOption1" style="display: none;">
<label for="">Option 1:</label>
<select name="" id="" multiple="">
    <option value=""></option>
</select>
</div>

<div class="form-group" id="ifYesOption2" style="display: none;">
<label for="">Option 2:</label>
<select name="" id="" multiple="">
    <option value=""></option>
</select>
</div>

My JS: 我的JS：

<script>
function checkThis(showThis) {
    if(showThis.value == "option1") {
        document.getElementById("ifYesOption1").style.display = "block";
    }else {
        document.getElementById("ifYesOption1").style.display = "none";
    }

    if (showThis.value == "option2") {
        document.getElementById("ifYesOption2").style.display = "block";
    }else {
        document.getElementById("ifYesOption2").style.display = "none";
    }
}
</script>

Answer 1

Only the first selected will be returned via the value property. 通过value属性仅返回第一个选择的对象。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement

function checkThis(showThis) {
    let selectedValues = [];
    Array.prototype.forEach.call(showThis.selectedOptions, (opt) => {selectedValues.push(opt.value);});
    document.getElementById('ifYesOption1').style.display = selectedValues.indexOf('option1') > -1 ? 'block' : 'none';
    document.getElementById('ifYesOption2').style.display = selectedValues.indexOf('option2') > -1 ? 'block' : 'none';
}

https://jsfiddle.net/4vuvdu3r/ https://jsfiddle.net/4vuvdu3r/

Answer 2

Try this pure jquery solution: 试试这个纯jquery解决方案：

 $("#f").change(function(){ if($(this).val()=="option1"){ $("#ifYesOption1").toggle() } else $("#ifYesOption2").toggle() });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <label for="">Multi Select:</label> <select name="" id="f" multiple=""> <option value="option1">fhfg</option> <option value="option2">fghgfhfh</option> </select> </div> <div class="form-group" id="ifYesOption1" style="display: none;"> <label for="">Option 1:</label> <select name="" id="" multiple=""> <option value=""></option> </select> </div> <div class="form-group" id="ifYesOption2" style="display: none;"> <label for="">Option 2:</label> <select name="" id="" multiple=""> <option value=""></option> </select> </div>

Answer 3

This should work. 这应该工作。

Note that the option value="____" must be the same as div id=____ 请注意， option value="____"必须与div id=____相同

 $(function() { $('#main').on('change', function() { var values = $(this).val(); var groups = '#'+values.join(',#'); $('.form-group').hide(); /* hide all groups */ $(groups).show(); /* show selected groups */ }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-main-group"> <label for="">Multi Select:</label> <select name="" id="main" multiple=""> <option value="option1">fhfg</option> <option value="option2">fghgfhfh</option> </select> </div> <div class="form-group" id="option1" style="display: none;"> <label for="">Option 1:</label> <select name="" id="" multiple=""> <option value=""></option> </select> </div> <div class="form-group" id="option2" style="display: none;"> <label for="">Option 2:</label> <select name="" id="" multiple=""> <option value=""></option> </select> </div>

Answer 4

 <!DOCTYPE html> <html lang="en" ng-app="testApp"> <head> <meta charset="UTF-8"> <title>Test</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script> var testApp = angular.module('testApp', []); testApp.controller('testCtrl', function ($scope) { $scope.option1 = 'display: none'; $scope.option2 = 'display: none'; $scope.chooseOption = function(){ if($scope.choose == 'option1') { $scope.option1 = 'display: block'; $scope.option2 = 'display: none'; } if($scope.choose == 'option2') { $scope.option1 = 'display: none'; $scope.option2 = 'display: block'; } } }); </script> </head> <body ng-controller="testCtrl"> <div class="form-group"> <label for="">Multi Select:</label><br> <select name="" id="" ng-click="chooseOption()" ng-model="choose" multiple="""> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </div> <div class="form-group" id="ifYesOption1" style="{{option1}}"> <label for="">Option 1:</label><br> <select name="" id="" multiple=""> <option value="opt1.1">Opt1 - 1</option> <option value="opt1.2">Opt1 - 2</option> </select> </div> <div class="form-group" id="ifYesOption2" style="{{option2}}"> <label for="">Option 2:</label><br> <select name="" id="" multiple=""> <option value="opt2.1">Opt2 - 1</option> <option value="opt2.2">Opt2 - 2</option> </select> </div> </body> </html>

使用多重选择显示/隐藏多个Div

问题描述

4 个解决方案

解决方案1
1 2017-09-28 12:08:26

解决方案2
1 已采纳 2017-09-28 12:15:02

解决方案3
1 2017-09-28 12:15:43

解决方案4
1 2017-09-28 12:28:15

使用多重选择显示/隐藏多个Div

问题描述

4 个解决方案

解决方案1 1 2017-09-28 12:08:26

解决方案2 1 已采纳 2017-09-28 12:15:02

解决方案3 1 2017-09-28 12:15:43

解决方案4 1 2017-09-28 12:28:15

解决方案1
1 2017-09-28 12:08:26

解决方案2
1 已采纳 2017-09-28 12:15:02

解决方案3
1 2017-09-28 12:15:43

解决方案4
1 2017-09-28 12:28:15