Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js?ver=5.5.3' id='bootstrap1-js'></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
​
​
​
​
</head>
<body>
  <form class="form-inline" role="search" method="GET" id="searchform" action="#" autocomplete="off"> 
        
<select class="form-control select2-sponsor" name="sponsor" id="sponsor">
    <option value="">Select</option>
        <option value="25">Manchester United</option>
        <option value="16">Nike</option>
        <option value="14">Shell</option>
        <option value="10">Chevrolet</option>
        <option value="11">Adidas</option>
        <option value="8">Coca-Cola</option>
    </select>
​
        
<select class="form-control select2-nationality" name="nationality[]" id="nationality" multiple="multiple">
    <option value="">Select</option>
        <option value="2">GB</option>
        <option value="19">Netherlands</option>
        <option value="3">US</option>
    </select>
​
        
<select class="form-control select2-sector" name="sector[]" id="sector" multiple="multiple">
    <option value="">Select</option>
        <option value="18">Oil</option>
        <option value="14">Soft Drinks</option>
        <option value="5">Sport</option>
        <option value="4">TV</option>
    </select>
​
        
<select class="form-control select2-team_sponsored" name="team_sponsored[]" id="team_sponsored" multiple="multiple">
    <option value="">Select</option>
        <option value="12">Barcelona</option>
        <option value="10">Ducati</option>
        <option value="20">Ferrari</option>
        <option value="13">Inter Milan</option>
        <option value="8">Manchester United</option>
        <option value="23">Nike</option>
        <option value="16">Pittsburgh Penguins</option>
        <option value="15">Real Madrid</option>
        <option value="24">Santander</option>
        <option value="22">Shell</option>
    </select>
​
        
<select class="form-control select2-sport" name="sport[]" id="sport" multiple="multiple">
    <option value="">Select</option>
        <option value="9">Football</option>
        <option value="17">Ice Hockey</option>
        <option value="21">Motorcycling</option>
        <option value="11">Motorsport</option>
    </select>
<input type="submit" id="submit" name="submit" value="Search" class="btn btn-primary" />
</form>
​
<script>  
​
$( document ).ready( function () {
    
​
​
​
    // variable for select option value:
    var sponsorValue = $("#sponsor").val();
    
    // set all drop downs as active if the first one is not used
    if (sponsorValue == "0") {
        $("#nationality").prop("disabled", false);
        $("#sector").prop("disabled", false);
        $("#team_sponsored").prop("disabled", false);
        $("#sport").prop("disabled", false);        
    }
    
    // enable all drop downs if the first one is not used
    $("#sponsor").change(function () {
        if ($(this).val() == "") {
            
            //alert('1 sponsorValue: '+$(this).val());
            
            $("#nationality").prop("disabled", false);
            $("#sector").prop("disabled", false);   
            $("#team_sponsored").prop("disabled", false);
            $("#sport").prop("disabled", false);    
            
        } else {
​
            //alert('2 sponsorValue: '+$(this).val());
             
            // first drop down in use, so disable and reset the others
            $("#nationality").prop("disabled", true);
            $("#nationality")[0].selectedIndex = 0;
            
            $("#sector").prop("disabled", true);
            $("#sector")[0].selectedIndex = 0;  
            
            $("#team_sponsored").prop("disabled", true);
            $("#team_sponsored")[0].selectedIndex = 0;
            
            $("#sport").prop("disabled", true);
            $("#sport")[0].selectedIndex = 0;               
​
        }
    });
​
    
    
    
    //initialise select2 single 
    $(".select2-sponsor").select2({
        placeholder: "Sponsor",
        allowClear: true
    });  
    
    //initialise select2 multi
    $(".select2-nationality").select2({
        placeholder: "Nationality"
    }); 
    
    $(".select2-sector").select2({
        placeholder: "Sector"
    }); 
    
    $(".select2-team_sponsored").select2({
        placeholder: "Teams Sponsored"
    }); 
    
    $(".select2-sport").select2({
        placeholder: "Sport"
    });         
    
});
  </script>
  
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers