Форум

vertmann · #1 (**permalink**) 13.11.2013, 11:15

Помогите пожалуйста с решением такого вопроса...

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

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

ksa · #2 (**permalink**) 13.11.2013, 11:29

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

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

И в чем проблема?

Например вот такая конструкция

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

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

vertmann · #3 (**permalink**) 13.11.2013, 12:00

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

И в чем проблема?

Например вот такая конструкция

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

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

ну т.е. ul должен быть hidden и при клике по ссылке он открывается. Как мне менять выбранный элемент в анкоре ссылки?

ksa · #4 (**permalink**) 13.11.2013, 13:18

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

Как мне менять выбранный элемент в анкоре ссылки?

У элементов ДОМ есть атрибуты и innerHTML, меняй, что тебе будет нужно...
Т.е. проблем пока не вижу...

vertmann · #5 (**permalink**) 14.11.2013, 18:21

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

У элементов ДОМ есть атрибуты и 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 · #6 (**permalink**) 14.11.2013, 19:31

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

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

Неверно

верно так:

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

ruslan_mart · #7 (**permalink**) 14.11.2013, 19:46

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

Неверно верно так:

А ещё лучше - так:

$(document).on('click', '.city_code', function() {
	var city_code = this.value;
	alert(city_code);
});

vertmann · #8 (**permalink**) 15.11.2013, 10:28

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

Неверно

верно так:

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

теперь выводит undefined

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

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

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

ksa · #9 (**permalink**) 15.11.2013, 11:43

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

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

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

но тоже не получается

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

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

Форум

Справочник

Discord чат

Курсы javascript