Форум

Viral · #1 (**permalink**) 27.04.2011, 13:07

В яве я новичок, поэтому очень прошу Вашей помощи.

Есть список

<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>?
И было бы неплохо прочесть тут другие идеи по реализации данного проекта.

Спасибо за внимание.

ksa · #2 (**permalink**) 27.04.2011, 13:54

Сообщение от Viral

Как закинуть в переменную javascript данные, расположенные между <li> и </li>?

Как вариант...

<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()' />

Viral · #3 (**permalink**) 27.04.2011, 15:46

Я не совсем это имел ввиду.
Необходимо при клике по

<li>содержимое</li>

забирать в переменную содержимое именно той li'шки, на которую кликнули.

walik · #4 (**permalink**) 27.04.2011, 16:02

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

Viral · #5 (**permalink**) 27.04.2011, 16:09

благодарю, оно самое

если кому-то интересно, могу выложить, что вышло из select'a после оформления и как это было реализовано.

Lucidmind · #6 (**permalink**) 03.05.2011, 16:46

давайте, для интереса, посмотрим....

Viral · #7 (**permalink**) 18.05.2011, 10:46

Собссна, вот оно...
Немного по-нубски сделано, но все с чего-то начинают

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

Форум

Справочник

Discord чат

Курсы javascript