دریافت 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
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
@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
موفق و سلامت باشید
یا حق
سلام خوبی؟
ساختار 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
@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 دوم ، فقط مقدار همون تغییر میکنه و بقیه ثابت باقی میمونه
البته تجربه دوستان بیشتره و من فقط فی‌البداهه نوشتم
موفق و سلامت باشید
یا حق
@TimeRunner2359
داداش خیلی ممنون
عالیه، فقط ی نکته خیلی مهم
چون این اطلاعات از دیتابیس خونده میشه، بعضی از option ها موقع لود صفحه selecct شده هستن
کد شما هر کدوم رو که انتخاب میکنی به بهترین شکل به لیست اضافه میکنه، فقط میخوام آیتم های از قبل select شده رو هم جز شون بیاره
@hosseinshirinegad98
سلام
داداش کد شما هم عالی عمل میکنه
منتها این اطلاعات از دیتابیس خونده میشه، بعضی از option ها موقع لود صفحه selecct شده هستن
کد شما هر کدوم رو که انتخاب میکنی به بهترین شکل alert میکنه، فقط میخوام آیتم های از قبل select شده رو هم جز شون بیاره
@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
موفق و سلامت باشید
یا حق
@TimeRunner2359
داداش تو بهترینی
خیلی ممنونم
ممنون میشم داخل این یکی پرسش هم بزرگواری کنید
اینجا رو کلیک کن
سلام کاری برام پیش اومد نتونستم رسیدگی کنم ولی با اینکه جوابتو گرفتی ولی منم یه کد بهت میدم داشته باش.@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>