Cara Mengatur Kontent dari Select Option

yang dimaksud dari cara mengatur kontent dari Select Option disini adalah, kita bisa mengatur setiap kontent dengan sebuah select option, dimana biasanya kita setting itu semua pada inputan, kali ini kita akan mencoba dari tag select option ya, caranya hampir sama, cuma tampilannya saja yang berbeda, oke bagaimana cara membuatnya simak terus ya.

Cara mengatur kontent dari Select Option cukup mudah karena disini kita akan menggunakan jqueryui lagi, jadi jangan sampai bosen ya teman-teman karena disini kita masih membahas seputar select option, dan disini untuk kasusnya akan ada sebuah select option yang satu untuk mengatur widthnya dan yang satu untuk warnannya, seperti itu, oke langsung kita coba ya, silahkan teman-teman copy code di bawah ini:

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cara Mengatur Kontent dari Select Option</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
    fieldset {
      border: 0;
      margin-left: 300px;
    }
    label {
      display: block;
      margin: 20px 0 0 0;
    }
 
    #circle {
      float: left;
      background: yellow;
      border-radius: 50%;
      width: 150px;
      height: 150px;
    }
  </style>
</head>
<body>
 
<div class="demo">
<form action="#">
  <div id="circle"></div>
  <fieldset>
    <label for="radius">Circle radius</label>
    <select name="radius" id="radius">
      <option value="50">50px</option>
      <option value="100">100px</option>
      <option value="150" selected="selected">150px</option>
      <option value="200">200px</option>
      <option value="250">250px</option>
    </select>
 
    <label for="color">Circle color</label>
    <select name="color" id="color">
      <option value="black">Black</option>
      <option value="red">Red</option>
      <option value="yellow" selected="selected">Yellow</option>
      <option value="blue">Blue</option>
      <option value="green">Green</option>
    </select>
  </fieldset>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var circle = $( "#circle" );
 
    $( "#radius" ).selectmenu({
      change: function( event, data ) {
        circle.css({
          width: data.item.value,
          height: data.item.value
        });
      }
     });
 
    $( "#color" ).selectmenu({
       change: function( event, data ) {
         circle.css( "background", data.item.value );
       }
     });
  });
  </script>
</body>
</html>

<head>

<title>Cara Mengatur Kontent dari Select Option</title>

<style>

fieldset {

border: 0;

margin-left: 300px;

}

label {

display: block;

margin: 20px 0 0 0;

}

#circle {

float: left;

background: yellow;

border-radius: 50%;

width: 150px;

height: 150px;

}

</style>

</head>

<body>

<label for="radius">Circle radius</label>

</select>

<label for="color">Circle color</label>

<option value="black">Black</option>

<option value="yellow" selected="selected">Yellow</option>

<option value="green">Green</option>

</select>

</fieldset>

</form>

</div>

$( function() {

var circle = $( "#circle" );

$( "#radius" ).selectmenu({

change: function( event, data ) {

circle.css({

width: data.item.value,

height: data.item.value

});

}

});

$( "#color" ).selectmenu({

change: function( event, data ) {

circle.css( "background", data.item.value );

}

});

</script>

</body>

</html>

Cukup panjang karena disini sendiri seperti biasa karena kita masih menggunakan html css untuk select optionya jadi kita harus satu persatu, oke seperti apa jadinya, seperti ini:

silahkan teman-teman coba ganti sendiri untuk melihat hasilnya ketika kita mengganti-ganti selectnya, dan saya rasa cukup sampai disini belajar kita tentang Cara mengatur kontent dari Select Option semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.

Facebook DUMET School

Categories