当按钮具有特定值时，向按钮添加类

Question

Is it possible to add a class to a button that already has a class whenever the value of the button changes?

Example:

Button Value: Europe West --> Add Class EuWest to the current button class.

So it will show <button class="buttonclass EuWest" value="Europe West">Europe West</button>

Whenever the value changes to North America then for example, the class EuWest would remove and change to NorthAmerica.

I want to do this because later on when searching Server Specific API's, I believe this is needed for something.

Underneath the current code I have.

$(document).ready(function(){
  var regionDropDown = $('.region_dropdown_section'),
      regionButton = regionDropDown.find('button'),
      regionList = regionDropDown.find('.region_dropdown_content').children();

  $(regionList).on('click', function(e){
    var region = e.target;
    regionButton.text(region.text).val(region.text);
  });
});

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
  vertical-align: baseline;
  outline: none;
}

body {
  background: url(../images/background/body_background.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.logo {
  width: 500px;
  height: 225px;
  margin: auto;
  display: block;
  margin-top: 50px;
  margin-bottom: 50px;
}

.SearchSummoners {
  margin: auto;
  width: 35%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid;

  -moz-border-image: -moz-linear-gradient(top, #006184 0%, #303142 100%);
  -webkit-border-image: -webkit-linear-gradient(top, #006184 0%, #303142 100%);
  border-image: linear-gradient(to bottom, #006184 0%, #303142 100%);
  border-image-slice: 1;
}

/* Dropdown Button */
.dropbtn {
background-color: #19A5D4;
color: white;
padding: 4px;
font-size: 12px;
border: none;
cursor: pointer;
height: 40px;
width: 100%;
}



/* Dropdown Content (Hidden by Default) */
.region_dropdown_content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    max-width: 335px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.region_dropdown_section {
  overflow: hidden;
  width: 20%;
}

/* Links inside the dropdown */
.region_dropdown_content a {
    color: black;
    text-decoration: none;
    display: inline-block;
    width: 45%;
    margin: 0;
    vertical-align: top;
    padding: 10px 0px 10px 10px;
}

/* Change color of dropdown links on hover */
.region_dropdown_content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.region_dropdown_section:hover .region_dropdown_content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.region_dropdown_section:hover .dropbtn {
    background-color: #1491BA;
}

.Searchbox_Summoners {
  margin: auto;
  display: block;
  width: 65%;
}


#SearchBox {
        margin-right: 0;
        margin-left: 0;
        width: 80%;
        background-color: white;
        height: 40px;
        float: left;
    }

        .region_dropdown_section {
            position: inherit;
            display: inline-block;
            max-width: 100% !important;
          overflow: hidden;
        }

#SearchInput{
        width: 92%;
        line-height: 40px;
        background: white;
        border: 0;
        outline: 0;
        margin: 0;
        padding: 0;
        margin-left: 20px;
    font-size: 24px;
    }

  /* Region Sprites */

.BR, .EUNE, .EUW, .JP, .KR, .LAN, .LAS, .NA, .OCEANIA, .RUS, .TURKEY{
    background: url(../images/icons/regions/regions.png) no-repeat;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  padding-right: 15px;
}

.BR{
    background-position: -2px -2px ;
    width: 26px;
    height: 28px;
}

.EUNE{
    background-position: -2px -35px ;
    width: 26px;
    height: 28px;
}

.EUW{
    background-position: -2px -70px ;
    width: 26px;
    height: 28px;
}

.JP{
    background-position: -2px -105px ;
    width: 26px;
    height: 28px;
}

.KR{
    background-position: -2px -140px ;
    width: 26px;
    height: 28px;
}

.LAN{
    background-position: -2px -175px ;
    width: 26px;
    height: 28px;
}

.LAS{
    background-position: -2px -210px ;
    width: 26px;
    height: 28px;
}

.NA{
    background-position: -2px -245px ;
    width: 26px;
    height: 28px;
}

.OCEANIA{
    background-position: -2px -280px ;
    width: 26px;
    height: 28px;
}

.RUS{
    background-position: -2px -315px ;
    width: 26px;
    height: 28px;
}

.TURKEY{
    background-position: -2px -350px ;
    width: 26px;
    height: 28px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php define('DeniedAccessFiles', TRUE); ?>

<?php include 'header.php'; ?>
<div class="logo">
    <a href="<?php echo "http://" . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; ?>"><img src="images/logo.png"></a>
</div>
  <div class="SearchSummoners">
      <div id="SearchBox">
        <form method="POST" autocomplete="off">
          <input id="SearchInput" value="Enter Summoners Name"  onfocus="if(this.value  == 'Enter Summoners Name') { this.value = ''; } " onblur="if(this.value == '') { this.value = 'Enter Summoners Name'; }"  type="text" name="SummonerName"></input>
        </form>
      </div>
      <div class="region_dropdown_section">
        <button class="dropbtn">Select Region</button>
        <div class="region_dropdown_content">
          <a href="?link=NA"><span class="NA"></span>North America</a>
          <a href="?link=EUW"><span class="EUW"></span>Europe West</a>
          <a href="?link=EUNE"><span class="EUNE"></span>Europe NE</a>
          <a href="?link=LAN"><span class="LAN"></span>LAN</a>
          <a href="?link=LAS"><span class="LAS"></span>LAS</a>
          <a href="?Link=OC"><span class="OCEANIA"></span>Oceania</a>
          <a href="?link=BR"><span class="BR"></span>Brazil</a>
          <a href="?link=KR"><span class="KR"></span>Korea</a>
          <a href="?link=JP"><span class="JP"></span>Japan</a>
          <a href="?link=TUR"><span class="TURKEY"></span>Turkey</a>
          <a href="?link=RUS"><span class="RUS"></span>Russia</a>
        </div>
      </div>
  </div>
<?php include 'footer.php'; ?>

</div>

Answer 1

To make this script work, you would need to change a few things. I would add a data field to the <a href> tags when they are clicked, the jQuery knows what to do. Then I would implement ajax so the page does not reload (otherwise you will need to do some PHP on this page to persist the setting when it reloads). See if this is what you are trying to do:

Demo: https://jsfiddle.net/rtasdses/

Form:

<form method="POST" autocomplete="off">
  <div class="SearchSummoners">
      <div id="SearchBox">
          <input id="SearchInput" placeholder="Enter the Summoner Name" name="SummonerName" />
      </div>
      <div class="region_dropdown_section">
        <button class="dropbtn">Select Region</button>
        <div class="region_dropdown_content">
          <a href="#" data-addclass="selected"><span class="NA"></span>North America</a>
          <a href="#" data-addclass="blue"><span class="EUW"></span>Europe West</a>
          <a href="#" data-addclass="pink"><span class="EUNE"></span>Europe NE</a>
          <a href="#" data-addclass="green"><span class="LAN"></span>LAN</a>
          <a href="#" data-addclass="blue"><span class="LAS"></span>LAS</a>
          <a href="#" data-addclass="selected"><span class="OCEANIA"></span>Oceania</a>
          <a href="#" data-addclass="blue"><span class="BR"></span>Brazil</a>
          <a href="#" data-addclass="pink"><span class="KR"></span>Korea</a>
          <a href="#" data-addclass="blue"><span class="JP"></span>Japan</a>
          <a href="#" data-addclass="green"><span class="TURKEY"></span>Turkey</a>
          <a href="#" data-addclass="blue"><span class="RUS"></span>Russia</a>
        </div>
      </div>
  </div>
</form>
<div id="section2"></div>

jQuery:

$(document).ready(function(){
    // Set the current class
    var currClass = false;
    // On click
    $('.region_dropdown_content > a').click(function(e){
        // Stop (just incase)
        e.preventDefault();
        // Assign current class
        var addClass    =   $(this).data('addclass');
        // Extract the text from the a tag
        var thisTxt     =   $(this).text();
        // If not empty, remove it
        if(currClass) {
            $('.dropbtn').removeClass(currClass);
            $('.SearchSummoners').removeClass(currClass);
        }
        // Now assign the current class to save
        currClass   =   addClass;
        // Add the extracted <a> text into the button tag to change name
        $('.dropbtn').addClass(addClass).text(thisTxt);
        // Add the class to the button
        $('.SearchSummoners').addClass(addClass);
        // this will send your request to whatever page
        // that will run your search
        $.ajax({
            // Url of the page that searches
            url:'/url/to/ajax/dispatcher.php',
            // This will submit to the above page using post
            data: {
                "search": addClass,
                "term": $("#SearchInput").val()
            },
            type: 'post',
            // This will place the response (html possibly) into a container
            success: function(response) {
                // Put html back into placeholder
                $('#section2').html(response);
            }
        });
    });
});

CSS (I added just this part to the bottom to demonstrate):

.selected {
    background-color: orange;
}
.blue  {
    background-color: red;
}
.pink  {
    background-color: pink;
}
.green  {
    background-color: green;
}