时间戳

首页 > 解决方案 > 通过选择两个相应的选择字段未生成动态链接

javascript - 通过选择两个相应的选择字段未生成动态链接

问题描述

我有两个选择字段，其中第二个是根据第一个选择字段中选择的值自动填充的。

从第二个选择字段中选择一个值后，将显示一个隐藏的链接。

javascript 有两个部分，一个用于填充第二个选择，一个用于 .hide 或 .show 隐藏内容的 jquery

一切正常，没有任何错误，但第二个 jquery 部分不起作用。

并且 jquery 版本使用 1.4.1

下面是小提琴的链接 https://jsfiddle.net/neo1101/7qo5br6n/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Select Box</title>
<style>
    .immigration-countries-links{
        padding: 20px;
        margin-top: 20px;
        display:none;
    }
</style>
<script src="https://code.jquery.com/jquery-1.4.1.min.js"></script>
<script language="JavaScript">
function getOptions(beertype) {
    var list;
    var listValue;
    if (beertype == "Select Region") {
        list = new Array("Select Country");
        listValue = new Array("Select Country");
    }
    if (beertype == "Asia") {
        list = new Array("China","Hong kong","India","Indonesia","Japan","Malaysia","Maldives","Philippines","Singapore","South,Korea","Sri Lanka","Taiwan","Thailand","Vietnam");
        listValue = new Array("china","hong-kong","india","indonesia","japan","malaysia","maldives","philippines","singapore","south-korea","sri-lanka","taiwan","thailand","vietnam");
    }
    if (beertype == "Africa") {
        list = new Array("Mauritius","South Africa");
        listValue = new Array("Mauritius","south-africa");
    }
    if (beertype == "European Union") {
        list = new Array("Austria","Belgium","Bulgaria","Croatia","Cyprus","Denmark","Estonia","Finland","France","Germany","Greece","Hungary","Ireland","Italy","Latvia","Lithuania","Luxembourg","Malta","Netherlands","Poland","Portugal","Romania","Slovakia","Slovenia","Spain","Sweden","United Kingdom");
        listValue = new Array("austria","belgium","bulgaria","croatia","cyprus","denmark","estonia","finland","france","germany","greece","hungary","ireland","italy","latvia","lithuania","luxembourg","malta","netherlands","poland","portugal","romania","slovakia","slovenia","spain","sweden","united-kingdom");
    }
    if (beertype == "Europe") {
        list = new Array("Albania","Armenia","Azerbaijan","Belarus","Bosnia and Herzegovina","Czech Republic","Georgia","Iceland","Kazakhstan","Kyrgyzstan","Liechtenstein","Macedonia","Moldova","Monaco","Montenegro","Norway","Russia","San Marino","Serbia","Switzerland","Tajikistan","Turkey","Ukraine");
        listValue = new Array("albania","armenia","azerbaijan","belarus","bosnia-and-herzegovina","czech-republic","georgia","iceland","kazakhstan","kyrgyzstan","liechtenstein","macedonia","moldova","monaco","montenegro","norway","russia","san-marino","serbia","switzerland","tajikistan","turkey","ukraine");
    }
    if (beertype == "Caribbean") {
        list = new Array("Antigua and Barbuda","Bahamas","Belize","BVI","Cayman Island","Costa Rica","Cuba","Dominica","Dominican Republic","Grenada","Guatemala","Panama","Puerto Rico","Saint Kitts and Nevis Saint Lucia");
        listValue = new Array("antigua-and-barbuda","bahamas","belize","bvi","cayman-island","costa-rica","cuba","dominica","dominican-republic","grenada","guatemala","panama","puerto rico","saint-kitts-and-nevis-saint-lucia");
    }
    if (beertype == "North America") {
        list = new Array("Canada","Mexico","United States");
        listValue = new Array("canada","mexico","united-states");
    }
    if (beertype == "South America") {
        list = new Array("Argentina","Bolivia","Brazil","Chile","Ecuador","Paraguay","Uruguay","Venezuela");
        listValue = new Array("argentina","bolivia","brazil","chile","ecuador","paraguay","uruguay","venezuela");
    }
    if (beertype == "Australian And Oceanic") {
        list = new Array("Australia","Fiji","Marshall Islands","Micronesia","New Zealand","Papua New Guinea","Seychelles","Vanuatu");
        listValue = new Array("australia","fiji","marshall-islands","micronesia","new-zealand","papua-new-guinea","seychelles","vanuatu");
    }
    if (beertype == "Middle East") {
        list = new Array("Bahrain","Kuwait","Qatar","Saudi Arabia","United Arab Emirates","Iran");
        listValue = new Array("bahrain","kuwait","qatar","saudi-arabia","united-arab-emirates","iran");
    }
    for (var i = 0; i < document.OptionMaker.BeerType.length; i++) { //Clear the 2nd menu
        document.OptionMaker.Brand.options[i] = null;
    }
    for (var i = 0; i < list.length; i++) { //Repopulate 2nd menu
        document.OptionMaker.Brand.options[i] = new Option(list[i],listValue[i],0,0);
    }
}
</script>

</head>
<body>
<form name="OptionMaker">
  <select name="BeerType" onchange="getOptions(this.value)">
  <option value="">Select Region</option>
    <option value="Asia">Asia</option>
    <option value="Africa">Africa</option>
    <option value="Europe">Europe</option>
    <option value="European Union">European Union</option>
    <option value="Caribbean">Caribbean</option>
    <option value="North America">North America</option>
    <option value="South America">South America</option>
    <option value="Australian And Oceanic">Australian And Oceanic</option>
    <option value="Middle East">Middle East</option>
  </select>
 <select name="Brand" class="">
 <option value="">Select Country</option>
  </select>

<a href="immigration/immigration-albania/" class="immigration-countries-links btn-country-link albania">Albania</a> 
<a href="immigration/immigration-antigua-and-barbuda/" class="immigration-countries-links btn-country-link antigua-and-Barbuda">Antigua and Barbuda</a> 
<a href="immigration/immigration-antigua-and-barbuda/" class="immigration-countries-links btn-country-link argentina">Argentina</a> 
<a href="immigration/immigration-armenia/" class="immigration-countries-links btn-country-link armenia">Armenia</a> 
<a href="immigration/immigration-australia/" class="immigration-countries-links btn-country-link australia">Australia</a> 
<a href="immigration/immigration-austria/" class="immigration-countries-links btn-country-link austria">Austria</a> 
<a href="immigration/immigration-azerbaijan/" class="immigration-countries-links btn-country-link azerbaijan">Azerbaijan</a> 
<a href="immigration/immigration-bahamas/" class="immigration-countries-links btn-country-link bahamas">Bahamas</a> 
<a href="immigration/immigration-bahrain/" class="immigration-countries-links btn-country-link bahrain">Bahrain</a> 
<a href="immigration/immigration-belarus/" class="immigration-countries-links btn-country-link Belarus">Belarus</a> 
<a href="immigration/immigration-belgium/" class="immigration-countries-links btn-country-link belgium">Belgium</a> 
<a href="immigration/immigration-belize/" class="immigration-countries-links btn-country-link belize">Belize</a> 
<a href="immigration/immigration-bolivia/" class="immigration-countries-links btn-country-link Bolivia">Bolivia</a> 
<a href="immigration/immigration-bosnia-and-herzegovina/" class="immigration-countries-links btn-country-link bosnia-and-herzegovina">Bosnia and Herzegovina</a> 
<a href="immigration/immigration-brazil/" class="immigration-countries-links btn-country-link brazil">Brazil</a> 
<a href="immigration/immigration-bulgaria/" class="immigration-countries-links btn-country-link bulgaria"></a> 
<a href="immigration/immigration-bvi/" class="immigration-countries-links btn-country-link">BVI</a> 
<a href="immigration/immigration-canada/" class="immigration-countries-links btn-country-link">Canada</a> 
<a href="immigration/immigration-cayman-island/" class="immigration-countries-links btn-country-link cayman-island">Cayman Island</a> 
<a href="immigration/immigration-chile/" class="immigration-countries-links btn-country-link chile">Chile</a> 
<a href="immigration/immigration-china/" class="immigration-countries-links btn-country-link china">China</a> 
<a href="immigration/immigration-costa-rica/" class="immigration-countries-links btn-country-link costa-rica">Costa Rica</a> 
<a href="immigration/immigration-croatia/" class="immigration-countries-links btn-country-link croatia">Croatia</a> 
<a href="immigration/immigration-cuba/" class="immigration-countries-links btn-country-link cuba">Cuba</a> 
<a href="immigration/immigration-cyprus/" class="immigration-countries-links btn-country-link cyprus">Cyprus</a> 
<a href="immigration/immigration-czech-republic/" class="immigration-countries-links btn-country-link czech-republic">Czech Republic</a> 
<a href="immigration/immigration-denmark/" class="immigration-countries-links btn-country-link denmark">Denmark</a> 
<a href="immigration/immigration-dominica/" class="immigration-countries-links btn-country-link dominica">Dominica</a> 
<a href="immigration/immigration-dominican-republic/" class="immigration-countries-links btn-country-link dominican-republic">Dominican Republic</a> 
<a href="immigration/immigration-ecuador/" class="immigration-countries-links btn-country-link ecuador">Ecuador</a> 
<a href="immigration/immigration-estonia/" class="immigration-countries-links btn-country-link estonia">Estonia</a> 
<a href="immigration/immigration-fiji/" class="immigration-countries-links btn-country-link fiji">Fiji</a> 
<a href="immigration/immigration-finland/" class="immigration-countries-links btn-country-link finland">Finland</a> 
<a href="immigration/immigration-france/" class="immigration-countries-links btn-country-link france">France</a> 
<a href="immigration/immigration-georgia/" class="immigration-countries-links btn-country-link georgia">Georgia</a> 
<a href="immigration/immigration-germany/" class="immigration-countries-links btn-country-link germany">Germany</a> 
<a href="immigration/immigration-greece/" class="immigration-countries-links btn-country-link greece">Greece</a> 
<a href="immigration/immigration-grenada/" class="immigration-countries-links btn-country-link grenada">Grenada</a> 
<a href="immigration/immigration-guatemala/" class="immigration-countries-links btn-country-link guatemala">Guatemala</a> 
<a href="immigration/immigration-hong-kong/" class="immigration-countries-links btn-country-link hong-kong">Hong Kong</a> 
<a href="immigration/immigration-hungary/" class="immigration-countries-links btn-country-link hungary">Hungary</a> 
<a href="immigration/immigration-iceland/" class="immigration-countries-links btn-country-link iceland">Iceland</a> 
<a href="immigration/immigration-india/" class="immigration-countries-links btn-country-link india">India</a> 
<a href="immigration/immigration-indonesia/" class="immigration-countries-links btn-country-link indonesia">Indonesia</a> 
<a href="immigration/immigration-ireland/" class="immigration-countries-links btn-country-link ireland">Ireland</a> 
<a href="immigration/immigration-italy/" class="immigration-countries-links btn-country-link italy">Italy</a> 
<a href="immigration/immigration-japan/" class="immigration-countries-links btn-country-link japan">Japan</a> 
<a href="immigration/immigration-kazakhstan/" class="immigration-countries-links btn-country-link kazakhstan">Kazakhstan</a> 
<a href="immigration/immigration-kuwait/" class="immigration-countries-links btn-country-link kuwait">Kuwait</a> 
<a href="immigration/immigration-kyrgyzstan/" class="immigration-countries-links btn-country-link kyrgyzstan">Kyrgyzstan</a> 
<a href="immigration/immigration-latvia/" class="immigration-countries-links btn-country-link latvia">Latvia</a> 
<a href="immigration/immigration-liechtenstein/" class="immigration-countries-links btn-country-link liechtenstein">Liechtenstein</a> 
<a href="immigration/immigration-lithuania/" class="immigration-countries-links btn-country-link lithuania">Lithuania</a> 
<a href="immigration/immigration-luxembourg/" class="immigration-countries-links btn-country-link luxembourg">Luxembourg</a> 
<a href="immigration/immigration-macedonia/" class="immigration-countries-links btn-country-link macedonia">Macedonia</a> 
<a href="immigration/immigration-malaysia/" class="immigration-countries-links btn-country-link malaysia">Malaysia</a> 
<a href="immigration/immigration-maldives/" class="immigration-countries-links btn-country-link maldives">Maldives</a> 
<a href="immigration/immigration-malta/" class="immigration-countries-links btn-country-link malta">Malta</a> 
<a href="immigration/immigration-marshall-islands/" class="immigration-countries-links btn-country-link marshall-islands">Marshall Islands</a> 
<a href="immigration/immigration-mauritius/" class="immigration-countries-links btn-country-link mauritius">Mauritius</a> 
<a href="immigration/immigration-mexico/" class="immigration-countries-links btn-country-link meixco">Mexico</a> 
<a href="immigration/immigration-micronesia/" class="immigration-countries-links btn-country-link micronesia">Micronesia</a> 
<a href="immigration/immigration-moldova/" class="immigration-countries-links btn-country-link moldova">Moldova</a> 
<a href="immigration/immigration-monaco/" class="immigration-countries-links btn-country-link monaco">Monaco</a> 
<a href="immigration/immigration-montenegro/" class="immigration-countries-links btn-country-link montenegro">Montenegro</a> 
<a href="immigration/immigration-netherlands/" class="immigration-countries-links btn-country-link netherlands">Netherlands</a> 
<a href="immigration/immigration-new-zealand/" class="immigration-countries-links btn-country-link new-zealand">New Zealand</a> 
<a href="immigration/immigration-norway/" class="immigration-countries-links btn-country-link norway">Norway</a> 
<a href="immigration/immigration-panama/" class="immigration-countries-links btn-country-link panama">Panama</a> 
<a href="immigration/immigration-papua-new-guinea/" class="immigration-countries-links btn-country-link papua-new-guinea">Papua New Guinea</a> 
<a href="immigration/immigration-paraguay/" class="immigration-countries-links btn-country-link paraguay">Paraguay</a> 
<a href="immigration/immigration-philippines/" class="immigration-countries-links btn-country-link philippines">Philippines</a> 
<a href="immigration/immigration-poland/" class="immigration-countries-links btn-country-link poland">Poland</a> 
<a href="immigration/immigration-portugal/" class="immigration-countries-links btn-country-link portugal">Portugal</a> 
<a href="immigration/immigration-puerto-rico/" class="immigration-countries-links btn-country-link puerto-rico">Puerto Rico</a> 
<a href="immigration/immigration-qatar/" class="immigration-countries-links btn-country-link qatar">Qatar</a> 
<a href="immigration/immigration-romania/" class="immigration-countries-links btn-country-link romania">Romania</a> 
<a href="immigration/immigration-russia/" class="immigration-countries-links btn-country-link russia">Russia</a> 
<a href="immigration/immigration-saint-kitts-and-nevis/" class="immigration-countries-links btn-country-link saint-kitts-and-nevis">Saint Kitts and Nevis</a> 
<a href="immigration/immigration-saint-lucia/" class="immigration-countries-links btn-country-link saint-lucia">Saint Lucia</a> 
<a href="immigration/immigration-san-marino/" class="immigration-countries-links btn-country-link san-marino">San Marino</a> 
<a href="immigration/immigration-saudi-arabia/" class="immigration-countries-links btn-country-link saudi-arabia">Saudi Arabia</a> 
<a href="immigration/immigration-serbia/" class="immigration-countries-links btn-country-link serbia">Serbia</a> 
<a href="immigration/immigration-seychelles/" class="immigration-countries-links btn-country-link seychelles">Seychelles</a> 
<a href="immigration/immigration-singapore/" class="immigration-countries-links btn-country-link singapore">Singapore</a> 
<a href="immigration/immigration-slovakia/" class="immigration-countries-links btn-country-link slovakia">Slovakia</a> 
<a href="immigration/immigration-slovenia/" class="immigration-countries-links btn-country-link slovenia">Slovenia</a> 
<a href="immigration/immigration-south-africa/" class="immigration-countries-links btn-country-link south-africa">South Africa</a> 
<a href="immigration/immigration-south-korea/" class="immigration-countries-links btn-country-link south-korea">South Korea</a> 
<a href="immigration/immigration-spain/" class="immigration-countries-links btn-country-link spain">Spain</a> 
<a href="immigration/immigration-sri-lanka/" class="immigration-countries-links btn-country-link sri-lanka">Sri Lanka</a> 
<a href="immigration/immigration-sweden/" class="immigration-countries-links btn-country-link sweden">Sweden</a> 
<a href="immigration/immigration-switzerland/" class="immigration-countries-links btn-country-link switzerland">Switzerland</a> 
<a href="immigration/immigration-taiwan/" class="immigration-countries-links btn-country-link taiwan">Taiwan</a> 
<a href="immigration/immigration-tajikistan/" class="immigration-countries-links btn-country-link tajikistan">Tajikistan</a> 
<a href="immigration/immigration-thailand/" class="immigration-countries-links btn-country-link thailand">Thailand</a> 
<a href="immigration/immigration-turkey/" class="immigration-countries-links btn-country-link turkey">Turkey</a> 
<a href="immigration/immigration-ukraine/" class="immigration-countries-links btn-country-link ukraine">Ukraine</a> 
<a href="immigration/immigration-united-arab-emirates/" class="immigration-countries-links btn-country-link united-arab-emirates">United Arab Emirates</a> 
<a href="immigration/immigration-united-kingdom/" class="immigration-countries-links btn-country-link united-kingdom">United Kingdom</a> 
<a href="immigration/immigration-united-states/" class="immigration-countries-links btn-country-link united-states">United States</a> 
<a href="immigration/immigration-uruguay/" class="immigration-countries-links btn-country-link uruguay">Uruguay</a> 
<a href="immigration/immigration-vanuatu/" class="immigration-countries-links btn-country-link vanuatu">Vanuatu</a> 
<a href="immigration/immigration-venezuela/" class="immigration-countries-links btn-country-link venezuela">Venezuela</a> 
<a href="immigration/immigration-vietnam/" class="immigration-countries-links btn-country-link vietnam">Vietnam</a> 
<a href="immigration/immigration-iran/" class="immigration-countries-links btn-country-link iran">Iran</a> 
<script>
$(document).ready(function(){
    $(".immigration-countries-links").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".immigration-countries-links").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".immigration-countries-links").hide();
            }
        });
    }).change();
});
</script>
</form></body>
</html>

任何帮助将不胜感激

标签： javascriptjqueryhtml

解决方案

这是已接受答案的替代版本。它使用 jQuery 和 on change 事件监听器。为了便于阅读，我还将列表转换为 JS 对象。

const optionList = {
    "Select Region": {
    list: [
            "Select Country"
        ],
    listValue: [
            "Select Country"
        ]
    },
    "Asia": {
    list: [
            "China",
            "Hong kong",
            "India",
            "Indonesia",
            "Japan",
            "Malaysia",
            "Maldives",
            "Philippines",
            "Singapore",
            "South,Korea",
            "Sri Lanka",
            "Taiwan",
            "Thailand",
            "Vietnam"
        ],
    listValue: [
            "china",
            "hong-kong",
            "india",
            "indonesia",
            "japan",
            "malaysia",
            "maldives",
            "philippines",
            "singapore",
            "south-korea",
            "sri-lanka",
            "taiwan",
            "thailand",
            "vietnam"
        ]
    },
    "Africa": {
    list: [
            "Mauritius",
            "South Africa"
        ],
    listValue: [
            "Mauritius",
            "south-africa"
        ]
    },
    "European Union": {
    list: [
            "Austria",
            "Belgium",
            "Bulgaria",
            "Croatia",
            "Cyprus",
            "Denmark",
            "Estonia",
            "Finland",
            "France",
            "Germany",
            "Greece",
            "Hungary",
            "Ireland",
            "Italy",
            "Latvia",
            "Lithuania",
            "Luxembourg",
            "Malta",
            "Netherlands",
            "Poland",
            "Portugal",
            "Romania",
            "Slovakia",
            "Slovenia",
            "Spain",
            "Sweden",
            "United Kingdom"
        ],
    listValue: [
            "austria",
            "belgium",
            "bulgaria",
            "croatia",
            "cyprus",
            "denmark",
            "estonia",
            "finland",
            "france",
            "germany",
            "greece",
            "hungary",
            "ireland",
            "italy",
            "latvia",
            "lithuania",
            "luxembourg",
            "malta",
            "netherlands",
            "poland",
            "portugal",
            "romania",
            "slovakia",
            "slovenia",
            "spain",
            "sweden",
            "united-kingdom"
        ]
    },
    "Europe": {
    list: [
            "Albania",
            "Armenia",
            "Azerbaijan",
            "Belarus",
            "Bosnia and Herzegovina",
            "Czech Republic",
            "Georgia",
            "Iceland",
            "Kazakhstan",
            "Kyrgyzstan",
            "Liechtenstein",
            "Macedonia",
            "Moldova",
            "Monaco",
            "Montenegro",
            "Norway",
            "Russia",
            "San Marino",
            "Serbia",
            "Switzerland",
            "Tajikistan",
            "Turkey",
            "Ukraine"
        ],
    listValue: [
            "albania",
            "armenia",
            "azerbaijan",
            "belarus",
            "bosnia-and-herzegovina",
            "czech-republic",
            "georgia",
            "iceland",
            "kazakhstan",
            "kyrgyzstan",
            "liechtenstein",
            "macedonia",
            "moldova",
            "monaco",
            "montenegro",
            "norway",
            "russia",
            "san-marino",
            "serbia",
            "switzerland",
            "tajikistan",
            "turkey",
            "ukraine"
        ]
    },
    "Caribbean": {
    list: [
            "Antigua and Barbuda",
            "Bahamas",
            "Belize",
            "BVI",
            "Cayman Island",
            "Costa Rica",
            "Cuba",
            "Dominica",
            "Dominican Republic",
            "Grenada",
            "Guatemala",
            "Panama",
            "Puerto Rico",
            "Saint Kitts and Nevis Saint Lucia"
        ],
    listValue: [
            "antigua-and-barbuda",
            "bahamas",
            "belize",
            "bvi",
            "cayman-island",
            "costa-rica",
            "cuba",
            "dominica",
            "dominican-republic",
            "grenada",
            "guatemala",
            "panama",
            "puerto rico",
            "saint-kitts-and-nevis-saint-lucia"
        ]
    },
    "North America": {
    list: [
            "Canada",
            "Mexico",
            "United States"
        ],
    listValue: [
            "canada",
            "mexico",
            "united-states"
        ]
    },
    "South America": {
    list: [
            "Argentina",
            "Bolivia",
            "Brazil",
            "Chile",
            "Ecuador",
            "Paraguay",
            "Uruguay",
            "Venezuela"
        ],
    listValue: [
            "argentina",
            "bolivia",
            "brazil",
            "chile",
            "ecuador",
            "paraguay",
            "uruguay",
            "venezuela"
        ]
    },
    "Australian and Oceanic": {
    list: [
            "Australia",
            "Fiji",
            "Marshall Islands",
            "Micronesia",
            "New Zealand",
            "Papua New Guinea",
            "Seychelles",
            "Vanuatu"
        ],
    listValue: [
            "australia",
            "fiji",
            "marshall-islands",
            "micronesia",
            "new-zealand",
            "papua-new-guinea",
            "seychelles",
            "vanuatu"
        ]
    },
    "Middle East": {
    list: [
            "Bahrain",
            "Kuwait",
            "Qatar",
            "Saudi Arabia",
            "United Arab Emirates",
            "Iran"
        ],
    listValue: [
            "bahrain",
            "kuwait",
            "qatar",
            "saudi-arabia",
            "united-arab-emirates",
            "iran"
        ]
    }
};

$("select[name='Brand']").change(function() {
  $("#linkBox").html(
    `<a 
        href="https://www.millionmakers.com/immigration/immigration-${$('select[name="Brand"]').val()}/"
        class="immigration-countries-links btn-country-link ${$('select[name="Brand"]').val()}">
            ${$('select[name="Brand"] option:selected').text()}
        </a>`
  );
});

$("select[name='BeerType']").change(function() {
  const beertype = $("select[name='BeerType']").val();
  let list = optionList[beertype].list;
  let listValue = optionList[beertype].listValue;

  const BrandBox = $("select[name='Brand']");
  const linkBox = $("#linkbox");

  // Using jQuery, empty the select box
  BrandBox.empty();

  // Prepare options
  let options = '';
  for (let i = 0; i < list.length; i++) {
    options += `<option value="${listValue[i]}">${list[i]}</option>`;
    }
    // Add options to Brand box
  BrandBox.append(options);
});
.immigration-countries-links {
  padding: 20px;
  margin-top: 20px;
  color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery Show Hide Elements Using Select Box</title>

</head>

<body>
  <form name="OptionMaker">
    <select name="BeerType">
      <option value="">Select Region</option>
      <option value="Asia">Asia</option>
      <option value="Africa">Africa</option>
      <option value="Europe">Europe</option>
      <option value="European Union">European Union</option>
      <option value="Caribbean">Caribbean</option>
      <option value="North America">North America</option>
      <option value="South America">South America</option>
      <option value="Australian And Oceanic">Australian And Oceanic</option>
      <option value="Middle East">Middle East</option>
    </select>
    <select name="Brand" class="">
      <option value="">Select Country</option>
    </select>

    <span id="linkBox"></span>
  </form>
</body>

</html>

推荐阅读