Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Выпадающий список без кнопок-стрелок для открытия (https://javascript.ru/forum/xhtml-html-css/42888-vypadayushhijj-spisok-bez-knopok-strelok-dlya-otkrytiya.html)

vertmann 13.11.2013 11:15
Выпадающий список без кнопок-стрелок для открытия
 
Помогите пожалуйста с решением такого вопроса...

Мне нужно сделать выпадающий список, но такой, чтобы выбранный элемент был просто как ссылка, т.е. без всех этих кнопок-стрелочек по кликам которых список открывается.

Кликаю по ссылке, открывается список, выбираю там что-нибудь и выбранный элемент меняется.

ksa 13.11.2013 11:29
Цитата:
Сообщение от vertmann
Мне нужно сделать выпадающий список, но такой, чтобы выбранный элемент был просто как ссылка
...
Кликаю по ссылке, открывается список, выбираю там что-нибудь и выбранный элемент меняется.
И в чем проблема? :D

Например вот такая конструкция
<div class='select'>
	<a href='#'>Item 1</a>
	<ul>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4</li>
	</ul>
</div>

поможет тебе в этом.
Добавь ЦССа, скрипта и вуаля! :D

vertmann 13.11.2013 12:00
Цитата:
Сообщение от ksa (Сообщение 280777)
И в чем проблема? :D

Например вот такая конструкция
<div class='select'>
	<a href='#'>Item 1</a>
	<ul>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4</li>
	</ul>
</div>

поможет тебе в этом.
Добавь ЦССа, скрипта и вуаля! :D
ну т.е. ul должен быть hidden и при клике по ссылке он открывается. Как мне менять выбранный элемент в анкоре ссылки?

ksa 13.11.2013 13:18
Цитата:
Сообщение от vertmann
Как мне менять выбранный элемент в анкоре ссылки?
У элементов ДОМ есть атрибуты и innerHTML, меняй, что тебе будет нужно...
Т.е. проблем пока не вижу... :)

vertmann 14.11.2013 18:21
Цитата:
Сообщение от ksa (Сообщение 280791)
У элементов ДОМ есть атрибуты и innerHTML, меняй, что тебе будет нужно...
Т.е. проблем пока не вижу... :)
Проблема вот в чем, у меня в цикле выводится список городов через Smarty, по клику следующий список открывается:
<a href="javascript:void(0);" class = "select-city">вот тут должен выводится выбранный город</a>
<div class = "city-list" style = "display:none;">
    <ul class = "cities" name="my_city_code">
        {{foreach $cities as $ac}}
            <li><a href="javascript:void(0);" class = "city_code" name = "city_code" value = "{{$ac.name}}{{$ac.type}}">{{$ac.name}} {{$ac.type}}</a></li>
        {{/foreach}}
    </ul>
</div>


Для начала я пытаюсь получить значение атрибута value ссылки и вывести его, выводится пустое окно, думаю, это связано с тем, что городов в списке выводится много.

$('.city_code').live('click', function() {
        city_code = $('.city_code').attr('value');
        alert(city_code);
    });

Rise 14.11.2013 19:31
Цитата:
Сообщение от vertmann (Сообщение 281142) 
$('.city_code').live('click', function() {
        city_code = $('.city_code').attr('value');
        alert(city_code);
    });
Неверно :nono: верно так:
$('.city_code').live('click', function() {
	var city_code = this.value;
	alert(city_code);
});

ruslan_mart 14.11.2013 19:46
Цитата:
Сообщение от Rise
Неверно верно так:
А ещё лучше - так:
$(document).on('click', '.city_code', function() {
	var city_code = this.value;
	alert(city_code);
});

vertmann 15.11.2013 10:28
Цитата:
Сообщение от Rise (Сообщение 281154)
Неверно :nono: верно так:
$('.city_code').live('click', function() {
	var city_code = this.value;
	alert(city_code);
});
теперь выводит undefined

пробовал так:

var city_code = this.attr('value');

но тоже не получается. мне нужно получить значение атрибута ссылки

ksa 15.11.2013 11:43
Цитата:
Сообщение от vertmann
пробовал так:

var city_code = this.attr('value');

но тоже не получается
Когда же ты перестанешь "пробовать", а начнешь читать книжки? :D 

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(function (){
	$(document).on('click', '.city_code', function() {
		var city_code = $(this).attr('value');
		alert(city_code);
	});
});
</script>
</head>
<body>
<a href="javascript:void(0);" class = "select-city">вот тут должен выводится выбранный город</a>
<div class = "city-list" style = "">
    <ul class = "cities" name="my_city_code">
		<li>
			<a href="javascript:void(0);" class = "city_code" name = "city_code" value = "{{$ac.name}}{{$ac.type}}">
				Бивас, тест!
			</a>
		</li>
    </ul>
</div>
</body>
</html>


Часовой пояс GMT +3, время: 10:20.