رایموند
4 سال پیش توسط رایموند مطرح شد
11 پاسخ

نمایش عکس با انتخاب دسته ها

درود دوستان...
من دو تا انتخاب دسته بندی نوشتم که شیوه کار اینه که دسته اول رو انتخاب می کنید زیر مجموعه دسته دوم رو نمایش میده:
کد زیر:

<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="" />

ثبت پرسش جدید
میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش آپدیت شد
0

این کد رو براساس ساختار کلی کدهای شما نوشتم و امتحان کردم، کار می کنه به درستی. / فقط کافیه در ابتدا عکس هارو به درستی در پوشه 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>

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

ساختار داده ای تون اینجوریه؟

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

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

شما ابتدا باید یک ساختار داده ای مناسب، شبیه به چیزی که بالا نوشتم داشته باشید.
بعدش جوری تنظیم می کنید که با انتخاب در دسته بندی اصلی، دسته بندی فرعی رو در html به نمایش در میارید، یعنی در واقع یک select بهمراه گزینه های اون دسته رو ایجاد می کنید و در DOM قرار می دهید.


رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 4 سال پیش مطرح شد
0

@milad

خیر...
به صورت زیر هستش:

<option value="img/img2/vvv.png">انتخاب کنید ...</option>

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش آپدیت شد
0

این کد رو براساس ساختار کلی کدهای شما نوشتم و امتحان کردم، کار می کنه به درستی. / فقط کافیه در ابتدا عکس هارو به درستی در پوشه 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>

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

این شش عکس رو ابتدا در پوشه imgcars قرار بدین، می بینید درست کار می کنه:

select.png
pride.png
pejo.png
peykan.png
camion.png
traktor.png

رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 4 سال پیش مطرح شد
0

@milad
بزار امتحان کنم...


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

باشه، امتحان کن.
به نظرم ساختار داده ای رو تغییر می دادی و select بهمراه option های دوم رو ایجاد می کردی، می تونست ساده تر باشه.
ولی این کدی که قرار دادم هم براساس کد اولیه ای که خودت نوشته بودی من قرار دادم. امتحان کن و اگه ایرادی داشت بیان کن.


رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 4 سال پیش مطرح شد
1

@milad
الان کار کرد ...
باید عکس های متناسب با همین نام توی پوشه ای قرار بدم که نمایش بده...


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
1

خوبه.
اره با این روش باید عکسها همنام با اسم ها باشن، و اینکه من پسوند همه رو png گذاشتم و این هم باید رعایت بشه.
بهرحال بازم می تونی کمی کدهایی که نوشتی رو بهبود بدی که دیگه انقدرم محدودیت نداشته باشه برا نامگذاری ها، من دیگه بیشتر ازین وقت نذاشتم، زحمتش با خودت.


رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 4 سال پیش مطرح شد
1

@milad
ممنون عزیز ...


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

خواهش میکنم، سرزنده باشی 🌺


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام