Jump to content
  • 0

сделать input с выпадающим списком


Dioni$$
 Share

Question

Здравствуйте.

Подскажите пожалуйста как сделана форма на http://www.godo.com.au/.

Конкретно поля с выпадающим списком.

b71806715b5a96b0fdadec9e95c895db.jpg

Может кто видел туториалы или подскажет куда копать. Вобщем благодарен буду за любую инфу.

Заранее спасибо за помощь

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

Самый элементарный пример: http://jsfiddle.net/vk6Hv/1/

Хотя навряд ли поможет без знания всего остального.

На счет "туториалов" - учи jQuery или чистый js.

В твоем примере просто скопипастить навряд ли получится, так как он затрагивает не одну тему.

Объясню свою мысль: даже в таком элементарном примере, как мой, на пару строчек нужно было знать:

- обёртки jQuery

- события

- bind

- focusin focusout

- Воздействие на css с помощью jQuery

- что такое функция

А у тебя еще сложнее. Намного.

Теперь понятно почему туториалы не катят?

Link to comment
Share on other sites

  • 0

$('то на чем кликае ').click(function(){
$('input').val('значение которое надо передать в инпут')
})

А можно это как-то автоматизировать?

Скажем у нас там список в выпадающем диве

<ul>

<li>first</li>

<li>second</li>

<li>other</li>

</ul>

так вот чтоб при клике по first - он забивался в инпут

Link to comment
Share on other sites

  • 0

$(ul li).click(function(){
$('input').val(this.text())
})

как то так.

но для уверенности инпуту и элементам которые находятся в выпадающем диве лучше Id и класыы позадавать

добавил этот код в пример buddah - не пашет. чет я не так делаю :blush:

Link to comment
Share on other sites

  • 0

html


<input type="text" value="Кликни сюда">
<div>
<ul>
<li>first</li>
<li>second</li>
<li>other</li>
</ul>
</div>

js


$('input').focus(function(){
$('div').show()
})
$('div ul li').click(function(e){

$('input').val( $(this).text() )
$ ('div').hide()
})

http://jsfiddle.net/vk6Hv/5/

Edited by Avalon4eg
Link to comment
Share on other sites

  • 0

Вы таким образом из инпута сделаете подобие селекта.

Вобщем негодится такое решение, оно слишком сырое.

Или используйте готовое решение (http://jqueryui.com/demos/autocomplete/ (на русском подробное описание http://www.linkexchanger.su/2011/700.html)

Или допиливайте сами до схожего ф-ционала.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy