alireza_s_84
جمعه 29 فروردین 1393, 16:04 عصر
اقا علیرضا ممنون که کمکم میکنین
اون دوتا مشکل شد
حالا یکی دیگه پیش اومد!
من کلا میخوام یه کمبوباکس طراحی کنم
اپشناش رو تو div با ایدی mylist نشون میدم که هر اپشنم توی یه div جداگانه است
حالا میخوام وقتی رو اپشنی کلیک کردم مقدارش رو توی تکست باکس با ایدی query نشون بدم
این کد رو نوشتم
$(document).on('click', '#mylist div', function () {
var optionSelected = $(this).text();
$('#query').val(optionSelected);
});
ولی وقتی رو اپشنی کلیک میکنم همه اپشنا تو تکست باکس نشون داده میشن یعنی مقادیر موجود در div اصلی با ایدی mylist رو نشون میده
اول اینکه بهتره برای ساخت لیستها از تگ ul استفاده کنید. اینطور ساختار سمانتیک document شما حفظ میشه.
من یه نمونه ساده براتون میذارم میتونید با تغییر اون به حالت دلخواه خودتون برسید:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#option').click(function () {
$(this).find('ul.list').toggle();
});
$('#option ul li').click(function (event) {
$('#option .label').text($(this).text());
});
});
</script>
<style type="text/css">
#option {
position: relative;
width: 200px;
height: 14px;
padding: 3px;
border: solid 1px #000;
cursor: pointer;
background-color: #e0e0e0;
}
#option ul {
position: absolute;
border: solid 1px #000;
right: -1px;
top: 18px;
list-style: none;
padding: 1px;
margin: 0px;
background-color: white;
width: 204px;
display: none;
}
#option ul li {
padding: 3px 5px;
}
#option ul li:hover {
background-color: aqua;
}
</style>
</head>
<body>
<div style="direction: rtl; font-family: Tahoma; font-size: 9pt;">
<div id="option">
<span class="label">انتخاب کنید</span>
<ul class="list">
<li>انتخاب کنید</li>
<li>انتخاب 1</li>
<li>انتخاب 2</li>
<li>انتخاب 3</li>
<li>انتخاب 4</li>
<li>انتخاب 5</li>
</ul>
</div>
</div>
</body>
</html>