Phiên bản đầy đủ: jsB@nk » Biểu mẫu » renderSelectOptions
URL: https://www.javascriptbank.com/renderselectoptions-process-data-selection.html
Tên của hiệu ứng được tác giả đặt thành một hàm, chức năng là lọc tất cả các giá trị của một danh sách chọn và hiển thị nó ra bên ngoài, rất hữu ích nếu bạn cần phải sao chép một giá trị nào của nó.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » renderSelectOptions
URL: https://www.javascriptbank.com/renderselectoptions-process-data-selection.html
<script type="text/javascript"><!--// Created by: Wesley Riley :: http://picasaweb.google.com/rileywesleyfunction renderSelectOptions() {var containerStyle = 'border:1px solid black;width:200px;margin-bottom:5px;font-family:Calibri;';var headingStyle = 'margin:0px;padding:3px;text-align:center;background-color:SteelBlue;color:white;';var oddDetailStyle = 'display:block;border-top:1px solid black;background-color:#e9e9e9;padding-left:3px;';var evenDetailStyle = 'display:block;border-top:1px solid black;background-color:LightSteelBlue;padding-left:3px;';var selectArray = document.getElementsByTagName('select');var theHtml = '';var currentStyle = 'evenDetailStyle';for(i=0;i<selectArray.length;i++) {theHtml += '<div id="div_' + selectArray[i].name + '" style="' + containerStyle + '"><h4 style="' + headingStyle + '">' + selectArray[i].name + '</h4>';var optionArray = selectArray[i].getElementsByTagName('option');for(n=0;n<optionArray.length;n++) { if(currentStyle == 'evenDetailStyle') currentStyle = 'oddDetailStyle'; else currentStyle = 'evenDetailStyle'; theHtml += '<span style="' + eval(currentStyle) + '">' + optionArray[n].innerHTML + '</span>';} theHtml += '</div>';}document.write(theHtml);}//--></script><p><strong>Music Type</strong><br><select id="selectType" name="musicType"> <option value="blues">Blues</option> <option value="rock">Rock</option> <option value="rocknroll">Rock 'n Roll</option> <option value="meatl">Metal</option> <option value="classical">Classical</option> <option value="bluegrass">Bluegrass</option> <option value="trance">Trance</option> <option value="jazz">Jazz</option></select></p> <p><strong>Instrument Type</strong><br><select id="selectInstrument" name="instruType"> <option value="guitar">Guitar</option> <option value="bass">Bass</option> <option value="drums">Drums</option> <option value="harmonica">Harmonica</option> <option value="violin">Violin</option> <option value="cello">Cello</option> <option value="organ">Organ</option> <option value="sax">Saxophone</option></select></p><b>All items above listed</b><br /><script type="text/javascript"> renderSelectOptions()</script>