doulao1966
doulao1966
2016-08-03 13:25

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

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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

4条回答

  • duanba3707 duanba3707 5年前

    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>
    
    点赞 评论 复制链接分享
  • douhunkuang8955 douhunkuang8955 5年前

    If you are using jquery

    You can give you anchors a class.

        <div class="region_dropdown_section">
          <button class="dropbtn">Select Region</button>
          <div class="region_dropdown_content">
            <a class="region" href="#">North America</a>
            <a class="region" href="#">Europe West</a>
            <a class="region" href="#">Europe NE</a>
            <a class="region" href="#">Korea</a>
          </div>
        </div>
    

    If one of them is clicked on. Change the text of the button to the value of the anchor tag.

    $('.region').click(function(){
      $('.dropbtn').html(this.text);
    }); 
    
    点赞 评论 复制链接分享
  • doushan2224 doushan2224 5年前
    $('body').on('click',".region_dropdown_content a", function()
    {
     var text = $(this).text();
     $(".dropbtn").text("");
      $(".dropbtn").text(text);
       $('#SearchInput').val(text);
     }); 
    
    点赞 评论 复制链接分享
  • duanfang2708 duanfang2708 5年前

    A solution could be:

    for each anchor under the div with class region_dropdown_content attach the click event handler. Inside this handler change the value of your field according to the user selection.

    The solution can be implemented in jQuery as well as in javascript.

    The snippet:

    $(function () {
      $('div.region_dropdown_content a').on('click', function(e) {
        //$('#SearchInput').val(this.textContent);
      });
    });
    
    
    // in javascript
    
    window.onload = function() {
      document.querySelectorAll('div.region_dropdown_content a').forEach(function(ele, index) {
        ele.addEventListener('click', function(e) {
          document.getElementById('SearchInput').value = this.textContent;
        });
      })
    };
    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;
    }
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    
    <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>

    </div>
    
    点赞 评论 复制链接分享

相关推荐