javascript - 使用分组按钮动态更改和重置菜单名称
问题描述
我有一个带有分组按钮的下拉列表,我想在选择时更改名称。OTHER
我编写了一个简短的脚本来更改 OTHER 按钮被选中时的 innerHTML,但如果选择了组中的另一个按钮,我还希望该按钮返回其原始名称。
const header = document.getElementById("test");
const btns = header.querySelectorAll('.btn');
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
console.log();
// Set results to value, unless it's other
// then set to the value of the selected dropdown
if($(this).attr("value")){
document.getElementById("results").textContent = $(this).attr("value")
}
});
}
$(".dropdown-item").click(function () {
const value = $(this).attr("value");
document.getElementById('btnGroupDrop1').innerHTML =
value + " <span class='caret'></span>"
document.getElementById("results").textContent = value
});
.btn-grey {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
/* Style the active class, and buttons on mouse-over */
.active, .btn-secondary:hover {
background-color: #666;
color: white;
}
<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"/>
<div id="test">
<div class="btn-group" role="group">
<button class="btn btn-grey active", type="button", value="NONE">NONE</button>
<button class="btn btn-grey", type="button", value="A">A</button>
<button class="btn btn-grey", type="button", value="B">B</button>
<button class="btn btn-grey", type="button", value="C">C</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-grey dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
OTHER <span class='caret'></span>
</button>
<div class="dropdown-menu"aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#3" value="D">D</a></li>
<li><a class="dropdown-item" href="#2" value="E">E</a></li>
<li><a class="dropdown-item" href="#2" value="F">F</a></li>
</div>
</div>
</div>
<div id="results"></div>
如果有帮助,请在此处使用 Codepen:https ://codepen.io/mayagans/pen/dyoppZK
解决方案
您只需要在按下其他按钮之一时重置innerHTML
元素btnGroupDrop1
的 :
$("#test > .btn-group > .btn").click(function () {
document.getElementById('btnGroupDrop1').innerHTML = "OTHER <span class='caret'></span>";
});
const header = document.getElementById("test");
const btns = header.querySelectorAll('.btn');
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
console.log();
// Set results to value, unless it's other
// then set to the value of the selected dropdown
if($(this).attr("value")){
document.getElementById("results").textContent = $(this).attr("value")
}
});
}
$(".dropdown-item").click(function () {
const value = $(this).attr("value");
document.getElementById('btnGroupDrop1').innerHTML =
value + " <span class='caret'></span>"
document.getElementById("results").textContent = value
});
$("#test > .btn-group > .btn").click(function () {
document.getElementById('btnGroupDrop1').innerHTML =
"OTHER <span class='caret'></span>";
});
.btn-grey {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
/* Style the active class, and buttons on mouse-over */
.active, .btn-secondary:hover {
background-color: #666;
color: white;
}
<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"/>
<div id="test">
<div class="btn-group" role="group">
<button class="btn btn-grey active", type="button", value="NONE">NONE</button>
<button class="btn btn-grey", type="button", value="A">A</button>
<button class="btn btn-grey", type="button", value="B">B</button>
<button class="btn btn-grey", type="button", value="C">C</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-grey dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
OTHER <span class='caret'></span>
</button>
<div class="dropdown-menu"aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#3" value="D">D</a></li>
<li><a class="dropdown-item" href="#2" value="E">E</a></li>
<li><a class="dropdown-item" href="#2" value="F">F</a></li>
</div>
</div>
</div>
<div id="results"></div>
推荐阅读
- python - Ubunto/Python/Apache - 打印行
- c# - Returning Type SqlDataReader even when try catch fails - getting not all paths return a value
- android - ListView 不显示项目
- python - 从时间戳中提取小时和分钟,但保持日期时间格式
- javascript - 更改输入文件的值(不工作)
- logstash - Filebeat 在读取纱线日志时有时会停止
- javascript - http Content-Security-Policy 标头在 Chrome 中触发 connect-src 违规,以在 beforeunload 事件处理程序中分配给 innerHTML
- java - 如何在 ListView 中显示来自 HashMap 的项目和子项目
- r - selectizeinput 读取列名而不是值
- html - 在 safari ios 上向上滑动时页面底部的空白区域