ซึ่งทั้งนี้ในบางครั้งนอกจากการใช้งาน css หรือ html เข้ามาใช้งานแล้ว ก็ยังจะมีในส่วนที่สามารถเพิ่มลูกเล่นต่างๆในกับหน้าเว็บไซต์ ได้อีกโดยการนำ javascript jquery หรือ ajax เข้ามาทำงานหรือกับ html เพื่อเพิ่มความสะดวกหรือเพิ่มความน่าสนใจให้กับผู้ที่เข้ามาใช้งาน และทั้งนี้บางครั่งยังจะช่วยลดขั้นตอนการพัฒนา coding ลงได้
ตัวอย่าง การนำค่า จาก attribute ที่อยู่ใน element หนึ่ง ส่งไปให้กับ attribute ที่อยู่ในอีก element หนึ่ง
1.
โค้ด: เลือกทั้งหมด
<select class="selectpicker" id="name_player" name="">
<?php while ($r_play = mysqli_fetch_assoc($rstplay)) { // ดึงข้อมูลมาจากการ Query จากฐานข้อมูล (สามารถปรับเปลี่ยนได้ตามการใช้งาน)
<option value="<?php echo $r_play['play_id']; ?>" data-thumbnail="player_image/<?php echo $r_play['play_img'];?>" >
</option>
<?php } ?>
</select>
2.สร้าง tag ขึ้นมา เพื่อใช้สำหรับระบุตำแหน่งของ อีก attribute หนึ่งที่อยู่ต่าง element โดยจะระบุอยู่ที่ value
โค้ด: เลือกทั้งหมด
<input type="hidden" id="blockid" value="po_10">
3.สร้างปุ่มขึ้นมาเพื่อทำการกดยืนยัน สำหรับการส่งค่า
โค้ด: เลือกทั้งหมด
<div class="modal-footer">
<a class="btn btn-primary submita" >Submit</a>
<!-- <button type="submit" class="btn btn-primary" data-dismiss="modal">Submit</button> -->
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<script>
------
</script>
5.สร้างฟังชั่น javascript ดังนี้
โค้ด: เลือกทั้งหมด
$('.submita').click(function(){
var selvalue = $('.selectpicker').val();
var blockid = $('#blockid').val();
var img = $('.selectpicker option:selected').attr('data-thumbnail');
var img_show = '<img src="./'+img+'" alt="Smiley face" height="42" width="42"><br>'
$('#'+blockid+' .setplayer').val(selvalue);
$('#'+blockid+' .showplayer').html(img_show);
$('#myModal').modal('hide');
});