我有一个简单的隐藏和显示jQuery代码,我想问一下是否有等效于JavaScript?这是我的代码。
$(document).ready(function() {
$("#myButton").hide();
$("#1").click(function() {
$("#myButton").show();
$("#myButton").click(function() {
$("#myButton").hide();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option id="1">Science</option>
</select>
<input type="button" value="Click" id="myButton" />
我遵循了下面评论中的一些代码,但它们不起作用:
<script>
document.getElementById('myButton').style.display = 'none';
function selectOptionsupdated(select) {
document.getElementById('myButton').style.display = 'block';
}
</script>
<select onSelect="selectOptionsupdated(this)">
<option id="1">Science</option>
</select>
<input type="button" value="Click" id="myButton" />
我想要的是首先按钮是隐藏的,当我单击<option>
标签"科学"时,按钮会出现,当我单击按钮时,按钮在单击后被隐藏。如果有更多的<option>
标签怎么办?
这
很简单
document.getElementById('myElement').style.display = 'block'; // show
document.getElementById('myElement').style.display = 'none'; // hide
在选择中添加onSelect="selectOptionsupdated(this)
然后
function selectOptionsupdated(select){
//do your stuff here
}
var myButton = document.getElementById('myButton');
//hide
myButton.style.display = 'none';
//show
myButton.style.display = 'block';
更新为您的选择标签..试试这个
.html
<select id="list">
<option id="1">Science</option>
</select>
.js
var list = document.getElementById('select');
list.addEventListener('change', listSelect, false);
function listSelect(){
var selected = list.options[list.selectedIndex].value;//Selected option value //hide
myButton.style.display = 'none';
//show
myButton.style.display = 'block';
}
document.getElementById("button").style.visibility="visible|hidden|collapse|inherit";