نمایش عکس با انتخاب دسته ها
درود دوستان...
من دو تا انتخاب دسته بندی نوشتم که شیوه کار اینه که دسته اول رو انتخاب می کنید زیر مجموعه دسته دوم رو نمایش میده:
کد زیر:
<div class="form-group col-12 col-md-5">
<select class="form-control" id="car" name="car" onchange="Funcss()">
<option>انتخاب کنید ...</option>
<option value="تریلر" data_cars="تریلر باری">تریلر</option>
</select>
</div>
<div class="form-group col-12 col-md-5">
<select class="form-control" id="cars" name="cars">
<option value="img/img2/vvv.png">انتخاب کنید ...</option>
</select>
</div>حالا وقتی دسته اول انتخاب میشه و دسته دوم نمایش میده می خوام اون عکس دسته دوم انتخاب شده رو نمایش بده...
خب این روش پیاده سازی به مشکل خوردم و چگونه آن را حل کنم؟
کدهای جاوا اسکریپت:
function Funcss() {
var cars = document.getElementById('cars');
var car=document.getElementById('car');
var val=car.options[car.selectedIndex].getAttribute('data_cars');
var arr=val.split(',');
cars.options.length = 0;
for(i = 0; i < arr.length; i++){
if(arr[i] != ""){
cars.options[cars.options.length]=new Option(arr[i],arr[i]);
}
}
}کد دوم:
<script>
function setCar() {
var img = document.getElementById("image");
img.src = this.value;
return false;
}
document.getElementById("cars").onchange = setCar;
</script>
<img id="image" src="" />
این کد رو براساس ساختار کلی کدهای شما نوشتم و امتحان کردم، کار می کنه به درستی. / فقط کافیه در ابتدا عکس هارو به درستی در پوشه imgcars و با نامگذاری مثال ها قرار بدین تا ببینید درست کار می کنه:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>cat-subcat</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group col-12 col-md-5">
<select class="form-control" id="car" name="car" onchange="Funcss()">
<option data_cars="select">select</option>
<option value="lightCar" data_cars="select,pride,pejo,peykan">lightCar</option>
<option value="heavyCar" data_cars="select,camion,traktor">heavyCar</option>
</select>
</div>
<div class="form-group col-12 col-md-5">
<select class="form-control" id="cars" name="cars">
<!-- <option value="pride">pride</option> -->
</select>
</div>
<img id="image" src="imgcars/select.png" />
<script type="text/javascript">
function Funcss() {
var cars = document.getElementById('cars');
var car=document.getElementById('car');
var val=car.options[car.selectedIndex].getAttribute('data_cars');
var arr=val.split(',');
cars.options.length = 0;
for(i = 0; i < arr.length; i++){
if(arr[i] != ""){
cars.options[cars.options.length]=new Option(arr[i],arr[i]);
}
}
}
// put all images in "imgcars folder": pride.png, pejo.png, select.png, ...
function setCar(srcStr) {
var img = document.getElementById("image");
img.src = `imgcars/${srcStr}.png`;
}
document.getElementById("cars").addEventListener('change', () => {
var srcStr = document.getElementById("cars").value;
setCar(srcStr);
});
</script>
</body>
</html>ساختار داده ای تون اینجوریه؟
var cars = {
lightCar: {
peykan: {srcImage: 'image/01.jpeg'},
pride: {srcImage: 'image/02.jpeg'},
pejo: {srcImage: 'image/03.jpeg'}
},
heavyCar: {
kamion: {srcImage: 'image/04.jpeg'},
traktor: {srcImage: 'image/05.jpeg'}
}
}
شما ابتدا باید یک ساختار داده ای مناسب، شبیه به چیزی که بالا نوشتم داشته باشید.
بعدش جوری تنظیم می کنید که با انتخاب در دسته بندی اصلی، دسته بندی فرعی رو در html به نمایش در میارید، یعنی در واقع یک select بهمراه گزینه های اون دسته رو ایجاد می کنید و در DOM قرار می دهید.
این کد رو براساس ساختار کلی کدهای شما نوشتم و امتحان کردم، کار می کنه به درستی. / فقط کافیه در ابتدا عکس هارو به درستی در پوشه imgcars و با نامگذاری مثال ها قرار بدین تا ببینید درست کار می کنه:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>cat-subcat</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group col-12 col-md-5">
<select class="form-control" id="car" name="car" onchange="Funcss()">
<option data_cars="select">select</option>
<option value="lightCar" data_cars="select,pride,pejo,peykan">lightCar</option>
<option value="heavyCar" data_cars="select,camion,traktor">heavyCar</option>
</select>
</div>
<div class="form-group col-12 col-md-5">
<select class="form-control" id="cars" name="cars">
<!-- <option value="pride">pride</option> -->
</select>
</div>
<img id="image" src="imgcars/select.png" />
<script type="text/javascript">
function Funcss() {
var cars = document.getElementById('cars');
var car=document.getElementById('car');
var val=car.options[car.selectedIndex].getAttribute('data_cars');
var arr=val.split(',');
cars.options.length = 0;
for(i = 0; i < arr.length; i++){
if(arr[i] != ""){
cars.options[cars.options.length]=new Option(arr[i],arr[i]);
}
}
}
// put all images in "imgcars folder": pride.png, pejo.png, select.png, ...
function setCar(srcStr) {
var img = document.getElementById("image");
img.src = `imgcars/${srcStr}.png`;
}
document.getElementById("cars").addEventListener('change', () => {
var srcStr = document.getElementById("cars").value;
setCar(srcStr);
});
</script>
</body>
</html>این شش عکس رو ابتدا در پوشه imgcars قرار بدین، می بینید درست کار می کنه:
select.png
pride.png
pejo.png
peykan.png
camion.png
traktor.pngباشه، امتحان کن.
به نظرم ساختار داده ای رو تغییر می دادی و select بهمراه option های دوم رو ایجاد می کردی، می تونست ساده تر باشه.
ولی این کدی که قرار دادم هم براساس کد اولیه ای که خودت نوشته بودی من قرار دادم. امتحان کن و اگه ایرادی داشت بیان کن.
@milad
الان کار کرد ...
باید عکس های متناسب با همین نام توی پوشه ای قرار بدم که نمایش بده...
خوبه.
اره با این روش باید عکسها همنام با اسم ها باشن، و اینکه من پسوند همه رو png گذاشتم و این هم باید رعایت بشه.
بهرحال بازم می تونی کمی کدهایی که نوشتی رو بهبود بدی که دیگه انقدرم محدودیت نداشته باشه برا نامگذاری ها، من دیگه بیشتر ازین وقت نذاشتم، زحمتش با خودت.