如何通过javascript更改文本

Question

我有一个下拉菜单，其中包含4个下拉文本，点击主菜单时应该更改这些文本。如何通过java脚本完成？

例如：当我点击部门或状态时，灰色背景部分文本将更改为部门或状态

截图

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="candidates_header_btns">
  <li><a class="add_candidates" href="create-a-new-job.html"><i class="fa fa-plus"></i> New Jobs</a></li>
  <li>
    <a data-toggle="dropdown" class="date_button">Custom</a>
    <ul class="add_candidates_dropdown date_dropdown">
      <li><a href="#">Custom</a></li>
      <li><a href="#">Department</a></li>
      <li><a href="#">Status</a></li>
      <li><a href="#">Title</a></li>
    </ul>
  </li>
</ul>

var TotalDays = (from a in db.Headers
              join
              b in db.Details on a.HeaderId equals b.HeaderId
              where a.DateFiled.Value.Year == DateTime.Now.Year && a.LeaveTypeId == 5
              && a.IsCancelled != true && a.EmployeeId == empId
              select a).Distinct().Sum(a => a.TotalDays);

Answer 1

使用此

$(".date_dropdown a").on('click', function(event) {
      event.preventDefault();
      $(".date_button").html($(this).text());
});

Answer 2

您可以使用此位代码更改单击

上的文本

$('.add_candidates_dropdown li a').click(function() {
  $('.date_button').text($(this).text())
})

＆＃13;

＆＃13;

$('.add_candidates_dropdown li a').click(function() {
  $('.date_button').text($(this).text())
})

＆＃13;

.candidates_header_btns {
  padding: 0px;
}

.candidates_header_btns>li {
  display: inline-block;
  margin-right: 4px;
  margin-bottom: 20px;
  cursor: pointer;
  position: relative;
}

.add_candidates {
  background: #124c56;
  padding: 6px 18px;
  text-align: center;
  color: #fff;
}

.add_candidates:hover,
.add_candidates:focus {
  color: #e4e4e4;
}

.date_button {
  background: #8b8c8b;
  color: #fff;
  padding: 6px 15px;
}

.date_button:hover,
.date_button:focus {
  color: #e4e4e4;
}

.add_candidates_dropdown {
  background: #18505a;
  padding: 5px 15px 15px 15px;
  display: none;
  position: absolute;
  top: 40px;
  z-index: 99;
}

.date_button:hover .add_candidates_dropdown, .date_button:focus .add_candidates_dropdown {
  display: block !important;
}

.add_candidates_dropdown>li {
  display: block;
  margin-top: 10px;
}

.add_candidates_dropdown>li>a::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 15px;
  border-width: 0px 8px 8px 8px;
  border-style: solid;
  border-color: #124c56 transparent;
  display: block;
  width: 0;
}

.date_dropdown {
  padding: 0;
  display:block;
}

.date_dropdown>li {
  text-align: right;
  border-bottom: 1px solid #fff;
  min-width: 130px;
  padding-bottom: 5px;
  padding-right: 15px;
  padding-left: 15px;
}

.date_dropdown>li>a {
  color: #fff;
}

.date_dropdown>li:last-child {
  border-bottom: none;
}

.date_dropdown>li>a:hover,
.date_dropdown>li>a:focus {
  color: #eb3c29;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="candidates_header_btns">
  <li><a class="add_candidates" href="create-a-new-job.html"><i class="fa fa-plus"></i> New Jobs</a></li>
  <li>
    <a data-toggle="dropdown" class="date_button">Custom</a>
    <ul class="add_candidates_dropdown date_dropdown">
      <li><a href="#">Custom</a></li>
      <li><a href="#">Department</a></li>
      <li><a href="#">Status</a></li>
      <li><a href="#">Title</a></li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;