»
Tiếng AnhTiếng PhápTiếng Việt

In - renderSelectOptions - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Biểu mẫu » renderSelectOptions
URL: https://www.javascriptbank.com/renderselectoptions-process-data-selection.html

renderSelectOptions © JavaScriptBank.comTê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



JavaScript
<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>


HTML
<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>