<select> и его оформление.
В яве я новичок, поэтому очень прошу Вашей помощи.
Есть список <select> <option>Опция 1</option> <option>Опция 2</option> <option>Опция 3</option> </select> его надо красиво оформить, обязательное условие: без подключения jQuery. Оформление достаточно сложное, одних только HTML и CSS недостаточно для его реализации. Была идея сделать следующим образом: стандартное выпадающее по клику меню реализованное списком. <ul> <li>Опция 1</li> <li>Опция 2</li> <li>Опция 3</li> </ul> и скрытая форма, в которую отправляются данные по выбранному пункту из этого меню. Согласен, возможно это глупо, но других идей на данный момент нет. Вопрос состоит в следующем: Как закинуть в переменную javascript данные, расположенные между <li> и </li>? И было бы неплохо прочесть тут другие идеи по реализации данного проекта. Спасибо за внимание. :thanks: |
Цитата:
<script> function Go() { var val=document.getElementById('test').getElementsByTagName('li')[2].innerHTML alert(val) } </script> <ul id='test'> <li>Опция 1</li> <li>Опция 2</li> <li>Опция 3</li> </ul> <input type='button' value='Go' onclick='Go()' /> |
Я не совсем это имел ввиду.
Необходимо при клике по <li>содержимое</li> забирать в переменную содержимое именно той li'шки, на которую кликнули. |
<html> <head> <script type="text/javascript" language="javascript"> function clk(obj) { var li = obj.innerHTML; alert(li); } </script> </head> <body id="body"> <ul id="select"> <li onclick="clk(this);">Option 1</li> <li onclick="clk(this);">Option 2</li> <li onclick="clk(this);">Option 3</li> </ul> </body> </html> |
благодарю, оно самое:yes: :thanks:
если кому-то интересно, могу выложить, что вышло из select'a после оформления и как это было реализовано. |
давайте, для интереса, посмотрим....
|
Вложений: 6
Собссна, вот оно...
Немного по-нубски сделано, но все с чего-то начинают :) <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> * { margin:0px; padding:0px; font-family:Verdana !important; } .clear1 { clear:both; } .stepcontent { width:100%; height:auto; margin-top:35px; font-size:13px; } .ulli1 { display: none; } .ulli1 li { display: none; } .ulli2 { width: 405px; height:400px; overflow:auto; background-color: #f3f7fb; border-left: 1px solid #848484; border-right: 1px solid #848484; border-bottom: 1px solid #848484; z-index: 2; position: absolute; } .ulli2 li { width: 100%; height: 68px; list-style-type: none; padding-bottom:5px; } .lioption1 { padding-top: 10px; padding-bottom: 10px; padding-right: 10px; padding-left: 25px; } .lioption2 { padding-top: 10px; padding-bottom: 10px; padding-right: 10px; background:#f3e3b2; padding-left: 25px; cursor:pointer; } span.liopn { font-size: 13px; color:#0070c0; } span.liopi { font-size:13px; color:#474747; } .inpa { cursor: pointer; } .inpa2 { cursor: pointer; border: 1px solid black; width: 510px; height: 30px; position: absolute; z-index: 3; background: #ff0000; } .visp1 { background-image: url(http://javascript.ru/forum/attachment.php?attachmentid=806&stc=1&d=1305700943); background-position: right center; background-repeat: no-repeat; color: #848484; width: 400px; border: 1px solid #848484; height: 19px; padding-top: 2px; padding-left: 5px; cursor: pointer; background-color: #ffffff; } .visp2 { background-image: url(http://javascript.ru/forum/attachment.php?attachmentid=807&stc=1&d=1305700946); background-position: right center; background-repeat: no-repeat; color: #848484; width: 400px; border: 1px solid #848484; height: 19px; padding-top: 2px; padding-left: 5px; cursor: pointer; background-color: #ffffff; } .vibiz { float:left; margin-top: 10px; margin-left: 10px; color:#000000; font-size: 12px; } .vibkol { margin-top: 0px; margin-left: 454px; color:#000000; font-size: 12px; } .minus { width:21px; height:21px; background-image: url(http://javascript.ru/forum/attachment.php?attachmentid=802&stc=1&d=1305700930); border: 1px solid #848484; float:left; cursor:pointer; margin-left: 44px; } .plus { width:21px; height:21px; background-image: url(http://javascript.ru/forum/attachment.php?attachmentid=804&stc=1&d=1305700938); border: 1px solid #848484; float:left; cursor:pointer; margin-left: -1px; } .inpu1 { border:1px solid #848484; width:40px; height:19px; float:left; text-align: center; padding-top:2px; margin-left: -1px; } span.vibrat1 { margin-left: 38px; cursor: pointer; font-size: 16px; color:#0070c0; border-bottom: 1px dashed #0070c0; } </style> <script type="text/javascript"> function spi(id) { if ( document.getElementById(id).className == 'visp1' ) {document.getElementById(id).className = 'visp2';} else {document.getElementById(id).className = 'visp1';} } function showlist(id) { if (document.getElementById(id).className == 'ulli1') {document.getElementById(id).className = 'ulli2';} else {document.getElementById(id).className = 'ulli1';} } function lightpt(id) {document.getElementById(id).className = 'lioption2';} function unlightpt(id) {document.getElementById(id).className = 'lioption1';} function clk(obj) { var q = document.getElementById('shifr1').innerHTML; var w = document.getElementById('inpu'); w = q; document.getElementById('inppa').innerHTML = " " + w + " "; } function al(id) { var q = document.getElementById('inppa').innerHTML; var r = document.getElementsByName("inpu")[0].value; if (document.getElementById('inppa').innerHTML == 'Курс') {alert ("Выберите курс");} else if (r == 0) {alert ("Невозможно создать 0 студентов!");} else {alert(" Вы выбрали "+ r +" студентов по курсу " + q + " ");} } function plus(id) { var q = document.getElementById('inpu'); if (q.value < 100) { s = q.value ++; } else { s = q.value; } } function minus(id) { var q = document.getElementById('inpu'); if (q.value > 1) {s = q.value --;} else {s = q.value;} } </script> </head> <body> <div class="stepcontent"> <div class="abks"> <div class="vipmenu"> <div class="inpa" onclick="spi('inppa'); showlist('ulli');"> <div class="visp1" id="inppa">Курс</div> </div> <div id="ulli" class="ulli1"> <ul> <li> <div class="lioption1" id="lio1" OnMouseover="lightpt('lio1')" OnMouseOut="unlightpt('lio1')" OnClick="spi('inppa'); showlist('ulli'); clk(this); "> <span class="liopn"><b id="shifr1">Ключ</b>.<span id="name1">Наименование</span></span> <br /> <span class="liopi">Стоимость</span> <br /> <span class="liopi">Длительность</span> </div> </li> <li> <div class="lioption1" id="lio2" OnMouseover="lightpt('lio2')" OnMouseOut="unlightpt('lio2')" OnClick="spi('inppa'); showlist('ulli'); clk(this); "> <span class="liopn"><b id="shifr1">Ключ</b>.<span id="name1">Наименование</span></span> <br /> <span class="liopi">Стоимость</span> <br /> <span class="liopi">Длительность</span> </div> </li> <li> <div class="lioption1" id="lio3" OnMouseover="lightpt('lio3')" OnMouseOut="unlightpt('lio3')" OnClick="spi('inppa'); showlist('ulli'); clk(this); "> <span class="liopn"><b id="shifr1">Ключ</b>.<span id="name1">Наименование</span></span> <br /> <span class="liopi">Стоимость</span> <br /> <span class="liopi">Длительность</span> </div> </li> <li> <div class="lioption1" id="lio4" OnMouseover="lightpt('lio4')" OnMouseOut="unlightpt('lio4')" OnClick="spi('inppa'); showlist('ulli'); clk(this); "> <span class="liopn"><b id="shifr1">Ключ</b>.<span id="name1">Наименование</span></span> <br /> <span class="liopi">Стоимость</span> <br /> <span class="liopi">Длительность</span> </div> </li> <li> <div class="lioption1" id="lio5" OnMouseover="lightpt('lio5')" OnMouseOut="unlightpt('lio5')" OnClick="spi('inppa'); showlist('ulli'); clk(this); "> <span class="liopn"><b id="shifr1">Ключ</b>.<span id="name1">Наименование</span></span> <br /> <span class="liopi">Стоимость</span> <br /> <span class="liopi">Длительность</span> </div> </li> </ul> </div> </div> <br><br> <div class="minus" OnClick="minus('inpu');" OnMouseDown="this.style.backgroundImage='url(http://javascript.ru/forum/attachment.php?attachmentid=803&stc=1&d=1305700934)';" OnMouseUp="this.style.backgroundImage='url(http://javascript.ru/forum/attachment.php?attachmentid=802&stc=1&d=1305700930)';"></div> <input class="inpu1" id="inpu" name="inpu" type="text" value="1"> <div class="plus" OnClick="plus('inpu')" OnMouseDown="this.style.backgroundImage='url(http://javascript.ru/forum/attachment.php?attachmentid=805&stc=1&d=1305700941)';" OnMouseUp="this.style.backgroundImage='url(http://javascript.ru/forum/attachment.php?attachmentid=804&stc=1&d=1305700938)';"></div> <span class="vibrat1" OnClick="al(this)" OnMouseOver="this.style.border='none'" OnMouseOut="this.style.borderBottom='1px dashed #0070c0'">Выбрать</span> <div class="clear1"></div> </div> <br /><br /> </div> <div class="clear1"></div> </body> </html> |
Часовой пояс GMT +3, время: 09:48. |