0 0
Read Time3 Minute, 10 Second

Hello,, kali ini kita akan membahas combobox yang jika dipilih salah satu opsinya akan menambahkan class dan remove class css pada suatu element.

  1.  Pertama panggil jquery
    <script   src=”https://code.jquery.com/jquery-3.1.0.min.js” integrity=”sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=” crossorigin=”anonymous”></script>
  2. Pasang js ini untuk action nya
    <script>
    $(document).ready(function(){
    $(‘#comboid’).change(function() {
    if(this.value == 1){
    $(‘#sayang1’).removeClass(‘dis-none’).addClass(‘dis-block’);
    $(‘#sayang2’).removeClass(‘dis-block’).addClass(‘dis-none’);
    $(‘#sayang3’).removeClass(‘dis-block’).addClass(‘dis-none’);} else if(this.value == 2){
    $(‘#sayang1’).removeClass(‘dis-block’).addClass(‘dis-none’);
    $(‘#sayang2’).removeClass(‘dis-none’).addClass(‘dis-block’);
    $(‘#sayang3’).removeClass(‘dis-block’).addClass(‘dis-none’);} else if(this.value == 3){
    $(‘#sayang1’).removeClass(‘dis-block’).addClass(‘dis-none’);
    $(‘#sayang2’).removeClass(‘dis-block’).addClass(‘dis-none’);
    $(‘#sayang3’).removeClass(‘dis-none’).addClass(‘dis-block’);
    }
    });
    });
    </script>
  3. Pasang style css yang nanti akan kita manipulasi
    <style>
    .dis-block{display: block;}
    .dis-none{display: none!important;}
    #sayang1{background-color: green;}
    #sayang2{background-color: yellow;}
    #sayang3{background-color: red;}
    </style>
  4. Taruh script combobox serta div nya, contohnya
    <select style=”width: 100%; color: #000;” id=”comboid”>
    <option value=””>–Pilih–</option>
    <option value=”1″>Opsi 1</option>
    <option value=”2″>Opsi 2</option>
    <option value=”3″>Opsi 3</option>
    </select><br>
    <br>
    <div id=”sayang1″ class=”dis-block”>Anda Memilih Opsi 1 Default (Satu-satu aku sayang Ibu)</div>
    <div id=”sayang2″ class=”dis-none”>Anda Memilih Opsi 2 (Dua-dua juga sayang Ayah)</div>
    <div id=”sayang3″ class=”dis-none”>Anda Memilih Opsi 3 (Tiga-tiga sayang adik kakak)</div>
    </body>
  5. Selesai

Buat yang malas baca,, ini tinggal copas script utuhnya

<script src=”https://code.jquery.com/jquery-3.1.0.min.js” integrity=”sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=” crossorigin=”anonymous”></script>
<script>
$(document).ready(function(){
$(‘#comboid’).change(function() {
if(this.value == 1){
$(‘#sayang1’).removeClass(‘dis-none’).addClass(‘dis-block’);
$(‘#sayang2’).removeClass(‘dis-block’).addClass(‘dis-none’);
$(‘#sayang3’).removeClass(‘dis-block’).addClass(‘dis-none’);

} else if(this.value == 2){
$(‘#sayang1’).removeClass(‘dis-block’).addClass(‘dis-none’);
$(‘#sayang2’).removeClass(‘dis-none’).addClass(‘dis-block’);
$(‘#sayang3’).removeClass(‘dis-block’).addClass(‘dis-none’);

} else if(this.value == 3){
$(‘#sayang1’).removeClass(‘dis-block’).addClass(‘dis-none’);
$(‘#sayang2’).removeClass(‘dis-block’).addClass(‘dis-none’);
$(‘#sayang3’).removeClass(‘dis-none’).addClass(‘dis-block’);
}
});
});
</script>

<style>
.dis-block{display: block;}
.dis-none{display: none!important;}
#sayang1{background-color: green;}
#sayang2{background-color: yellow;}
#sayang3{background-color: red;}
</style>

<body>
<select style=”width: 100%; color: #000;” id=”comboid”>
<option value=””>–Pilih–</option>
<option value=”1″>Opsi 1</option>
<option value=”2″>Opsi 2</option>
<option value=”3″>Opsi 3</option>
</select>

<br>
<br>
<div id=”sayang1″ class=”dis-block”>Anda Memilih Opsi 1 Default (Satu-satu aku sayang Ibu)</div>
<div id=”sayang2″ class=”dis-none”>Anda Memilih Opsi 2 (Dua-dua juga sayang Ayah)</div>
<div id=”sayang3″ class=”dis-none”>Anda Memilih Opsi 3 (Tiga-tiga sayang adik kakak)</div>
</body>

Simpan sebagai file .html lalu jalankan dibrowser. modifikasi bisa dilakukan sesuai kebuutuhan. ini hanya dasarnya saja ya. 🙂

Untuk contoh online nya bisa dilihat di :
https://jsfiddle.net/rhomyou/xt5oe8y7/

Semoga bermanfaat.

About Post Author

TahuBanyak

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %
Next post Jquery : Click Method

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Leave a Reply

Your email address will not be published. Required fields are marked *