问题描述
我希望将select的默认值设置为month 。 此外，在选择加载时，应该以文本而不是过滤器的形式显示月份 。 如何实现？？？ 任何帮助都会做的很好。
以下是我到目前为止编写的代码片段。
function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } }
.dropbtn { background-color: #3498DB; position: relative; margin: 0 20px; color: white; padding: 3px 10px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #2980B9; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 130px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #ddd} .dropdown:hover .dropdown-content {display: block;} .show {display:block;}
<div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Filter </button> <div id="myDropdown" class="dropdown-content"> <a href="#">Day</a> <a href="#">Week</a> <a href="#">Month</a> </div>
请让我知道我如何做到这一点
1楼
ellipsis
2
已采纳
2019-02-21 10:25:39
尝试这个。 您可以在链接上应用点击事件，点击后可以设置过滤器的值
$(document).ready(function(){ $(".dropbtn").html($(".default").text()) }) function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } $("#myDropdown").children('a').click(function(){ $('.dropbtn').html($(this).text()) })
.dropbtn { background-color: #3498DB; position: relative; margin: 0 20px; color: white; padding: 3px 10px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #2980B9; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 130px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #ddd} .dropdown:hover .dropdown-content {display: block;} .show {display:block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Filter </button> <div id="myDropdown" class="dropdown-content"> <a href="#">Day</a> <a href="#">Week</a> <a href="#" class="default">Month</a> </div>
2楼
Jerrin Thomas
1
2019-02-21 10:56:57
HTML5通过使用select标记使此操作更加容易。
selected选项将指定页面加载时默认情况下必须选择的选项。
<select>
<option value="Day">Day</option>
<option value="Week">Week</option>
<option value="Month" selected >Month</option>
<select>
3楼
JamesS
0
2019-02-21 10:33:52
而不是该div类。 创建一个下拉列表，如下所示。
<select>
<option value="Day">Day</option>
<!--etc-->
</select>
要使用此默认值，您只需添加以下内容
<option value="Day" selected="selected">Day</option>