یلدا ادامه داره... ❤️ ۴۰ درصد تخفیف همه دوره‌ها

استفاده از تخفیف‌ها

ثانیه

دقیقه

ساعت

روز

ورود عضویت

میلاد بسحاق

4 سال پیش توسط میلاد بسحاق مطرح شد

12 پاسخ

دریافت option های select شده در یک فرم

با سلام دوستان عزیز

بنده داخل صفحه محصول فروشگاه، یک سری لیست دارم، مثلا بصورت زیر :

<label>انتخاب رنگ</label>
<select name="color">
  <option value="1">قرمز</option>
  <option value="20">آبی</option>
  <option value="14">سبز</option>
</select>

<label>انتخاب رم</label>
<select name="ram">
  <option value="2">رم 6</option>
  <option value="66">رم 8</option>
</select>

<label>انتخاب هارد</label>
<select name="color">
  <option value="31">500 گیگ</option>
  <option value="27">1 ترابایت</option>
</select>

من میخوام وقتی روی یکی از آپشن های موجود داخل هر یک از این select ها کلیک شد، بیاد تمام select های موجود داخل فرم رو چک کنه، و بیاد آیدی option های که فقط select شدن رو نمایش بده

مثلا اگر دفعه اول روی رنگ قرمز کلیک کرد، مقدار 1 رو آلرت کنه، و بعدش روی رم 6 کیک کرد، مقدا 1 و 6 رو آلرت کنه

تعداد select ها با توجه به محصولات متفاوت هست

ممنون میشم دوستان راهنمایی کنن
@ashkannazari248
@masoudproton
@milad
@ali.bayat
@Alimotreb
@hesammousavi
@endworld
@code2code
@khanzadimahdi
@info.aligraph
@SeyedMH.Mosavi

ثبت پرسش جدید

احسان قربانی

تخصص : PHP ، در حال یادگیری لاراول ،...

@TimeRunner2359 4 سال پیش مطرح شد

@miladboshagh
خواهش می‌کنم
کاری نداره :
HTML :

<div>
    <select name="color" class='select' >
        <option value="" disabled selected>انتخاب رنگ</option>
        <option value="1">قرمز</option>
        <option value="20">آبی</option>
        <option value="14">سبز</option>
    </select>
</div>
<div>
    <select name="ram" class='select' >
        <option value="" disabled selected>انتخاب رم</option>
        <option value="2">رم 6</option>
        <option value="66">رم 8</option>
    </select>
</div>
<div>
<!-- فرض کنیم در این‌جا مقدار (500 گیگ ) از قبل انتخاب شده است  -->
    <select name="color" class='select' >
        <option value="" disabled >انتخاب هارد</option>
        <option value="31" selected>500 گیگ</option>
        <option value="27">1 ترابایت</option>
    </select>

JS :

let selects = document.querySelectorAll('.select');
var i = 0
let values = [];
selects.forEach(function (select) {
//giving id to each select
    select.id = i;
  i++;
  let index = select.id;
  let value = select.options[select.selectedIndex].value;

  if(value != ''){
            values[index] = value;
  }
    select.addEventListener('change', function () {
        let updatedValue = select.options[select.selectedIndex].value;
            values[index] = updatedValue;
            alert(values);
    });
});

برای اون مقادیری که از دیتابیس میگیرید ، با php به اون آپشنی که مقدارش رو در دیتابیس ذخیره کردید ، خصلت selected رو بدید، مثل کاری که من برای (500 گیگ) توی بخش هارد انجام دادم:
Running Fiddle : JSFIDDLE
موفق و سلامت باشید
یا حق

ارسال پاسخ

حسین شیری نژاد

تخصص : programmer

@hosseinshirinegad98 4 سال پیش آپدیت شد

سلام خوبی؟
ساختار select شما باید شبیه به مثل من باشه. یعنی بهشون ادی بدی.

<html>
<head>
    <title>Laravel</title>
</head>
<body>
    <label>انتخاب رنگ</label>
    <select name="color" id="color" onchange="getValue(this.value, this.id)">
      <option value="1">قرمز</option>
      <option value="20">آبی</option>
      <option value="14">سبز</option>
    </select>
<br>
    <label>انتخاب رم</label>
    <select name="ram" id="ram" onchange="getValue(this.value, this.id)">
      <option value="2">رم 6</option>
      <option value="66">رم 8</option>
    </select>
<br>
    <label>انتخاب هارد</label>
    <select name="hard" id="hard" onchange="getValue(this.value, this.id )">
      <option value="31">500 گیگ</option>
      <option value="27">1 ترابایت</option>
    </select>
</body>
</html>
<script>
    var lists = [];
    function getValue(value, id)
    {
        lists[id] = value;
        for (i in lists) {
            alert(lists[i]);
        }
    }
</script>

</body></html>
@miladboshagh

ارسال پاسخ

احسان قربانی

تخصص : PHP ، در حال یادگیری لاراول ،...

@TimeRunner2359 4 سال پیش آپدیت شد

@miladboshagh
سلام و وقت بخیر،
فکر کنم این کد مشکل شما رو حل کنه :
HTML:

<div>
    <select name="color" class='select' id='0'>
        <option value="" disabled selected>انتخاب رنگ</option>
        <option value="1">قرمز</option>
        <option value="20">آبی</option>
        <option value="14">سبز</option>
    </select>
</div>
<div>
    <select name="ram" class='select' id='1'>
        <option value="" disabled selected>انتخاب رم</option>
        <option value="2">رم 6</option>
        <option value="66">رم 8</option>
    </select>
</div>
<div>
    <select name="color" class='select' id='2'>
        <option value="" disabled selected>انتخاب هارد</option>
        <option value="31">500 گیگ</option>
        <option value="27">1 ترابایت</option>
    </select>

JS :

let selects = document.querySelectorAll('.select');
let values = [];
selects.forEach(function (select) {
    select.addEventListener('change', function () {
        let value = select.options[select.selectedIndex].value;
        let index = select.id;
        if (!(index in values)) {
            values[index] = value;
            alert(values);
        } else {
            values[index] = value;
            alert(values);
        }
    });
});

Running fiddle : FIDDLE
این کد، مقدار هر کدوم رو سیو میکنه یعنی با تغییر select دوم ، فقط مقدار همون تغییر میکنه و بقیه ثابت باقی میمونه
البته تجربه دوستان بیشتره و من فقط فی‌البداهه نوشتم
موفق و سلامت باشید
یا حق

ارسال پاسخ

ali t

تخصص : full stack developer

@alirezat92 4 سال پیش مطرح شد

شما بهتره از کتابخونه هایی مثل react و انگولار استفاده کنید

ارسال پاسخ

میلاد بسحاق

@miladboshagh 4 سال پیش مطرح شد

@TimeRunner2359
داداش خیلی ممنون

عالیه، فقط ی نکته خیلی مهم
چون این اطلاعات از دیتابیس خونده میشه، بعضی از option ها موقع لود صفحه selecct شده هستن

کد شما هر کدوم رو که انتخاب میکنی به بهترین شکل به لیست اضافه میکنه، فقط میخوام آیتم های از قبل select شده رو هم جز شون بیاره

ارسال پاسخ

حسین شیری نژاد

تخصص : programmer

@hosseinshirinegad98 4 سال پیش مطرح شد

کدی که من به شمادادم مشکل شما رو حل نکرد؟ همون چیزی بود که میخواستی؟@miladboshagh

ارسال پاسخ

میلاد بسحاق

@miladboshagh 4 سال پیش مطرح شد

@hosseinshirinegad98
سلام
داداش کد شما هم عالی عمل میکنه
منتها این اطلاعات از دیتابیس خونده میشه، بعضی از option ها موقع لود صفحه selecct شده هستن

کد شما هر کدوم رو که انتخاب میکنی به بهترین شکل alert میکنه، فقط میخوام آیتم های از قبل select شده رو هم جز شون بیاره

ارسال پاسخ

حسین شیری نژاد

تخصص : programmer

@hosseinshirinegad98 4 سال پیش مطرح شد

خوب پس یه کد دیگه بهت میدم ، در قسمت برنامه یه تستی بکنم@miladboshagh

ارسال پاسخ

میلاد بسحاق

@miladboshagh 4 سال پیش مطرح شد

@hosseinshirinegad98
خیلی ممنونم واقعا 😍😘

ارسال پاسخ

احسان قربانی

تخصص : PHP ، در حال یادگیری لاراول ،...

@TimeRunner2359 4 سال پیش مطرح شد

@miladboshagh
خواهش می‌کنم
کاری نداره :
HTML :

<div>
    <select name="color" class='select' >
        <option value="" disabled selected>انتخاب رنگ</option>
        <option value="1">قرمز</option>
        <option value="20">آبی</option>
        <option value="14">سبز</option>
    </select>
</div>
<div>
    <select name="ram" class='select' >
        <option value="" disabled selected>انتخاب رم</option>
        <option value="2">رم 6</option>
        <option value="66">رم 8</option>
    </select>
</div>
<div>
<!-- فرض کنیم در این‌جا مقدار (500 گیگ ) از قبل انتخاب شده است  -->
    <select name="color" class='select' >
        <option value="" disabled >انتخاب هارد</option>
        <option value="31" selected>500 گیگ</option>
        <option value="27">1 ترابایت</option>
    </select>

JS :

let selects = document.querySelectorAll('.select');
var i = 0
let values = [];
selects.forEach(function (select) {
//giving id to each select
    select.id = i;
  i++;
  let index = select.id;
  let value = select.options[select.selectedIndex].value;

  if(value != ''){
            values[index] = value;
  }
    select.addEventListener('change', function () {
        let updatedValue = select.options[select.selectedIndex].value;
            values[index] = updatedValue;
            alert(values);
    });
});

ارسال پاسخ

میلاد بسحاق

@miladboshagh 4 سال پیش آپدیت شد

@TimeRunner2359
داداش تو بهترینی

خیلی ممنونم

ممنون میشم داخل این یکی پرسش هم بزرگواری کنید
اینجا رو کلیک کن

ارسال پاسخ

احسان قربانی

تخصص : PHP ، در حال یادگیری لاراول ،...

@TimeRunner2359 4 سال پیش مطرح شد

@miladboshagh
خواهش میکنم 🙏

ارسال پاسخ

حسین شیری نژاد

تخصص : programmer

@hosseinshirinegad98 4 سال پیش مطرح شد

سلام کاری برام پیش اومد نتونستم رسیدگی کنم ولی با اینکه جوابتو گرفتی ولی منم یه کد بهت میدم داشته باش.@miladboshagh

<!DOCTYPE html>
<html>
<head>
    <title>Laravel</title>
    <style type="text/css">
        body{
            text-align: center;
            direction: rtl;
        }
        select{
            padding: 15px;
            width: 200px;
            font-family: tahoma;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <label>انتخاب رنگ</label>
    <select name="color" id="color" class="select" onchange="getValue(this.value, this.id)">
      <option value="1" >قرمز</option>
      <option value="20" selected>آبی</option>
      <option value="14">سبز</option>
    </select>
<br>
    <label>انتخاب رم</label>
    <select name="ram" id="ram" class="select" onchange="getValue(this.value, this.id)">
      <option value="2" selected>رم 6</option>
      <option value="66">رم 8</option>
    </select>
<br>
    <label>انتخاب هارد</label>
    <select name="hard" id="hard" class="select" onchange="getValue(this.value, this.id )">
      <option value="31">500 گیگ</option>
      <option value="27" selected>1 ترابایت</option>
    </select>
</body>
</html>
<script>
    var lists = [];
    var selects = [];
    selects = document.getElementsByClassName('select');
    for (select of selects) {
        for(x of select) {
            if(x.selected) {
                lists[select.id] = x.value;
                alert(lists[select.id]);
            }
        }
    }
    function getValue(value, id)
    {
        lists[id] = value;
        for (i in lists) {
            alert(lists[i]);
        }
    }

</script>

ارسال پاسخ

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

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

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

دریافت option های select شده در یک فرم

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

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