显示/隐藏多个div与多选

我试图显示或隐藏基于从多选择选择的选项一系列的输入。如果在选择一个选项，但显示/隐藏多个div与多选

我的解决办法是工作，一旦我选择第二个它没有显示，直到我勾去掉我的第一选择。

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

来源

2017-09-28 PHPNewbie

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

来源

2017-09-28 12:15:02 SilverSurfer

只有选择的第一将通过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/

来源

2017-09-28 12:08:26

这应该工作。

注意，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>

来源

2017-09-28 12:15:43 LinkinTED

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

来源

2017-09-28 12:28:15

显示/隐藏多个div与多选

回答

相关问题