Подставление значений полей в эмулированном select
Всем привет.
Смастерил селект, нужно чтобы кликнув на одну из строчек с фоткой подставилось имя выбранного спеца в верхнем поле "выберите специалиста" и список исчезал. Я так понимаю там нужно играться с hidden inputam'и, но что-то не могу допенькать как грамотно это сделать. Подскажите кто может. Вот сырой пример: https://jsfiddle.net/kk7vf2k4/ |
Сам сделал))) Лапша, правда получилась, ну да ладно..:)
https://jsfiddle.net/kk7vf2k4/6/ |
Icons,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
.question{
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #d9d9d9;
}
.question input, .question textarea{
width: 100%;
border: 1px solid #d9d9d9;
box-sizing: border-box;
padding: 0 10px;
margin-bottom: 20px;
}
.question input[type='text']{
height: 40px;
}
.question_select{
width: 450px;
margin: 20px 0 0;
}
.question_select_alone{
background: url(../images/select.png) no-repeat 97% 50%;
border: 1px solid #d9d9d9;
cursor: pointer;
margin-bottom: 20px;
}
.question_select_alone input{
width: 90%;
border: 0;
font-size: 12px;
text-transform: uppercase;
background: #fff;
cursor: pointer;
margin-bottom: 0;
}
.question_select_list{
background: #f5f5f5;
position: relative;
top: -20px;
}
.question_select_item_wrapp{display: none;}
.question_select_item{
display: table;
padding: 10px;
width: 100%;
cursor: pointer;
position: relative;
}
.question_select_item:hover{
background: #a1b80d url(../images/check.png)no-repeat 97% 50%;
color: #fff;
}
.question_select_item_wrapp:hover .position{color: #fff;}
.question_select_item div{
display: table-cell;
vertical-align: middle;
}
.question_select_item_img{
position: relative;
width: 66px;
height: 53px;
overflow: hidden;
border-radius: 3px;
border: 1px solid #d9d9d9;
background: #fff;
}
.question_select_item_img img{
position: absolute;
max-width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.question_select_item_text{
padding-left: 15px;
}
.question_select_item_text span{display: block;}
.position{
font: 12.5px Arial;
color: #666666;
}
.question_row{width: 450px;}
.question_row_textarea{width: 750px;}
.question_row_textarea textarea{
resize: none;
padding: 10px;
}
.question_row .button{
display: inline-block;
padding: 0 30px;
}
</style>
<title></title>
<script>
$(function()
{
$(".question_select").click(function(event)
{
$('.question_select_item_wrapp').fadeToggle('slow');
var item = $(event.target).parents('.question_select_item_wrapp');
if(item.length)$("#alone").val($('.spec', item).val());
}
);
$(document).click(function(event)
{
if(!$(event.target).closest(".question_select").length)$('.question_select_item_wrapp').fadeOut('slow');
}
);
}
);
</script>
</head>
<body>
<div class="question">
<form action="">
<legend class="quest">задать вопрос вы можете, заполнив форму</legend>
<div class="question_select" name="area">
<div class="question_select_alone js-change">
<input id="alone" type="text" name="person" placeholder="Выберите специалиста" value="" disabled>
</div>
<div class="question_select_list">
<div class="question_select_item_wrapp ">
<div class="question_select_item">
<div class="question_select_item_img">
<img src="images/doctor1.jpg" alt="">
</div>
<div class="question_select_item_text">
<span class="name-person">Михаил Юрьевич</span>
<input type="hidden" class="spec" value="Михаил Юрьевич" name="" >
<span class="position">Врач стоматолог детский,врач-ортодонт</span>
</div>
</div>
</div>
<div class="question_select_item_wrapp ">
<div class="question_select_item">
<div class="question_select_item_img">
<img src="images/doctor2.jpg" alt="">
</div>
<div class="question_select_item_text">
<span class="name-person">Сергей Николаевич</span>
<input type="hidden" class="spec" value="Сергей Николаевич" name="" >
<span class="position">Врач стоматолог детский,врач-ортодонт</span>
</div>
</div>
</div>
<div class="question_select_item_wrapp ">
<div class="question_select_item">
<div class="question_select_item_img">
<img src="images/doctor3.jpg" alt="">
</div>
<div class="question_select_item_text">
<span class="name-person">Анна Алексеевна</span>
<input type="hidden" class="spec" value="Анна Алексеевна" name="" >
<span class="position">Врач стоматолог детский,врач-ортодонт</span>
</div>
</div>
</div>
<div class="question_select_item_wrapp ">
<div class="question_select_item">
<div class="question_select_item_img">
<img src="images/logo.png" alt="">
</div>
<div class="question_select_item_text">
<span class="name-person">Любой специалист</span>
<input class="spec" type="hidden" value="Любой специалист" name="" >
<span class="position"></span>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
|
Спасибо!!
Красиво написано!) |
| Часовой пояс GMT +3, время: 02:24. |