Pertanyaan Javascript setara dengan Jquery hide and show [duplikat]


Pertanyaan ini sudah memiliki jawaban di sini:

Saya memiliki menyembunyikan dan menampilkan kode Jquery sederhana dan saya ingin bertanya apakah ada yang setara dengan javascript? Ini kode saya.

JQUERY:

$(document).ready(function(){
$("#myButton").hide();
   $("#1").click(function(){
      $("#myButton").show();
         $("#myButton").click(function(){
         $("#myButton").hide();
        });
   });
});

HTML:

<select>
<option id="1">Science</option>
</select>
<input type="button" value="Click" id="myButton"/>

Saya mengikuti beberapa kode di komentar di bawah tetapi tidak berfungsi:

javascript:

<script>
    document.getElementById('myButton').style.display = 'none';
    function selectOptionsupdated(select){
    document.getElementById('myButton').style.display = 'block'; 
    }
</script>

html:

<select onSelect="selectOptionsupdated(this)">
<option id="1">Science</option>
</select>
<input type="button" value="Click" id="myButton"/>

Yang saya inginkan adalah pada awalnya tombolnya tersembunyi, dan ketika saya mengklik <option> tag "Science" tombol muncul dan ketika saya mengklik tombol, tombol tersembunyi setelah diklik. Dan bagaimana jika ada lebih banyak lagi <option> tag? Maaf saya masih pemula. Setiap bantuan akan dihargai.


17
2017-10-07 10:31


asal


Jawaban:


ini sederhana

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

tambah sebuah onSelect="selectOptionsupdated(this) di pilih Anda

kemudian

function selectOptionsupdated(select){
//do your stuff here  
}

24
2017-10-07 10:35



var myButton = document.getElementById('myButton');

//hide
myButton.style.display = 'none';

//show
myButton.style.display = 'block';

Memperbarui untuk tag pilihan Anda ... coba ini

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'; 
}

2
2017-10-07 10:33



document.getElementById("button").style.visibility="visible|hidden|collapse|inherit";

0
2017-10-07 10:37