Question

我试图根据从多选中选择的选项显示或隐藏一系列输入。

如果选择了一个选项，我的解决方案正在运行，但是一旦我选择了一个选项，它就会在我取消第一个选择之前显示。

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

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

仅通过value属性返回所选的第一个。

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/

Answer 2

试试这个纯粹的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

这应该有用。

请注意，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 个答案: