单击下拉列表中的属性时更改按钮的文本？

Question

I have a dropdown button, when entering the webpage the button says "Select Region". If you hover over that button you get different regions.

The main value of the button needs to change when they click the region they want.

Also I want the button to be within the search bar on the right side, but it's always placing it underneath it like you can see in the example. I've tried a lot of different options, but I cannot get this fixed.

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 img{
  margin-left: auto;
  margin-right: 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: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.region_dropdown_section {
    position: relative;
    display: inline-block;
}

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

/* Links inside the dropdown */
.region_dropdown_content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* 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: #3e8e41;
}

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

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

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

<?php define('DeniedAccessFiles', TRUE); ?>

<?php include 'header.php'; ?>
<div class="logo">
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97225&w=500&h=225">
</div>
  <div class="SearchSummoners">
    <div id="SearchBox">
      <form method="POST">
        <input id="SearchInput" value="Enter the Summoner Name"  onfocus="if(this.value  == 'Enter the Summoner Name') { this.value = ''; } " onblur="if(this.value == '') { this.value = 'Enter the Summoner 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="#">North America</a>
        <a href="#">Europe West</a>
        <a href="#">Europe NE</a>
        <a href="#">Korea</a>
      </div>
    </div>
  </div>
<?php include 'footer.php'; ?>

</div>

Answer 1

add to links click trigger and onclick change button text...

UPDATE: fixed empty button text

$(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 img{
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-top: 50px;
  margin-bottom: 50px;
}

.SearchSummoners {
  margin: auto;
  width: 55%;
  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: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.region_dropdown_section {
    display: inline-block;
  width: calc(20% - 10px);
}

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

/* Links inside the dropdown */
.region_dropdown_content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* 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: #3e8e41;
}

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

#SearchBox{
  display: inline-block;
        margin-right: 10%;
        margin-left:  10%;
        width: 50%;
        background-color: white;
        height: 40px;;
    }

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

<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">
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97225&w=500&h=225">
</div>
  <div class="SearchSummoners">
    <div id="SearchBox">
      <form method="POST">
        <input id="SearchInput" value="Enter the Summoner Name"  onfocus="if(this.value  == 'Enter the Summoner Name') { this.value = ''; } " onblur="if(this.value == '') { this.value = 'Enter the Summoner 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="#">North America</a>
        <a href="#">Europe West</a>
        <a href="#">Europe NE</a>
        <a href="#">Korea</a>
      </div>
    </div>
  </div>
<?php include 'footer.php'; ?>

</div>