29

I have a simple hide and show jQuery code and I want to ask if there is equivalent of this to JavaScript? Here's my code.

$(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" />

I have followed some codes from the comments below but they are not working:

<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" />

What I want is at first the button is hidden, and when I click the <option> tag "Science" the button appears and when I click the button, the button is hidden after it is being clicked. And what if there are more <option> tags?

4

3 回答 3

42

这很简单

document.getElementById('myElement').style.display = 'block'; // show
document.getElementById('myElement').style.display = 'none'; // hide

onSelect="selectOptionsupdated(this)在您的选择中添加一个

然后

function selectOptionsupdated(select){
//do your stuff here  
}
于 2013-10-07T10:35:02.897 回答
3 
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'; 
}
于 2013-10-07T10:33:44.557 回答
0 
document.getElementById("button").style.visibility="visible|hidden|collapse|inherit";
于 2013-10-07T10:37:20.793 回答