顯示/隱藏多個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與多選

回答

相關問題