رفتن به مطلب

پست های پیشنهاد شده

سلام دوستان.من یک select box دارم و قرار بر اینه که به ازای هر مقدار select box یک div خاص نمایش داده بشه و بقیه div های مربوط به مقادیر دیگر select box مخفی بشن.

این کد جی کوئری من هست:


	$("#select").change(function(){
		if($(this).val()=="empty"){
			$("#date").css("display","hidden");
			$("#localref").css("display","hidden");
			$("#refid").css("display","hidden");
			$("#number").css("display","hidden");
			$("#product").css("display","hidden");
			$("#price").css("display","hidden");
		}
		if($(this).val()=="localref"){
			$("#date").css("display","hidden");
			$("#localref").css("display","block");
			$("#refid").css("display","hidden");
			$("#number").css("display","hidden");
			$("#product").css("display","hidden");
			$("#price").css("display","hidden");
		}
		if($(this).val()=="date"){
			$("#date").css("display","block");
			$("#localref").css("display","hidden");
			$("#refid").css("display","hidden");
			$("#number").css("display","hidden");
			$("#product").css("display","hidden");
			$("#price").css("display","hidden");
		}
		if($(this).val()=="price"){
			$("#date").css("display","hidden");
			$("#localref").css("display","hidden");
			$("#refid").css("display","hidden");
			$("#number").css("display","hidden");
			$("#product").css("display","hidden");
			$("#price").css("display","block");
		}
		if($(this).val()=="number"){
			$("#date").css("display","hidden");
			$("#localref").css("display","hidden");
			$("#refid").css("display","hidden");
			$("#number").css("display","block");
			$("#product").css("display","hidden");
			$("#price").css("display","hidden");
		}
		if($(this).val()=="product"){
			$("#date").css("display","hidden");
			$("#localref").css("display","hidden");
			$("#refid").css("display","hidden");
			$("#number").css("display","hidden");
			$("#product").css("display","block");
			$("#price").css("display","hidden");
		}
		if($(this).val()=="refid"){
			$("#date").css("display","hidden");
			$("#localref").css("display","hidden");
			$("#refid").css("display","block");
			$("#number").css("display","hidden");
			$("#product").css("display","hidden");
			$("#price").css("display","hidden");
		}
		
	});
	

حالا مشکل من اینجاست که فرض کنید من از توی select box ، مقدار date رو انتخاب کردم.خب تا اینجا درست کار میکنه و div مربوط به date برای من نمایش داده میشه.حالا اگه روی مقدار empty کلیک کنم ، طبق کد باید تمامی div ها مخفی بشن ولی این اتفاق نمیفته.حالا من از select box مقدار date رو انتخاب کردم و div مربوط به date برام نمایش داده میشه اگه بعدش روی گزینه localref کلیک کنم ، div مربوط به localref نمایش داده میشه ولی div مربوط به date مخفی نمیشه.ممنون میشم کمکم کنید که بفهمم مشکل از کجاست.

لینک به ارسال

توی css چیزی به اسم display=hidden نداریم.

مقدار display رو باید روی none تنظیم کنید.

کدهاتون رو هم  اصلاح کنید که کد جی کوئری شما اینقدر طولانی نشه. مثلا :

$("#date, #refid,#number, #product, #price").css("display","none");
$("#refid").css("display","block");

حلاصه کد شما هم به صورت زیر میشه:

$("#date, #refid,#number, #product, #price").css("display","none");
switch($(this).val()){
case "localref":
$("#localref").css("display","block");
break;
case "price":
$("#price").css("display","block");
break;
//baghiye ro ham ezafe konid ...

}

 

اگر مقادیر توی سلکتت با مقدار ای دی المان هات برابر باشن به جای سلکت بالا میتونی کار رو بایه دستور تمام کنی به صورت زیر:

$("#date, #refid,#number, #product, #price").css("display","none");
$("#" + $(this).val()).css("display","block");

 

دقت کن توی جاوااسکریپت قراره هربار کاربر این فایل ها رو دانلود بکنه. پس باید تاجای ممکن کدتو خلاصه بکنی، حتی اگه شده توی کدهای سمت سلکتت تغییر ایجاد کنی که بشه به صورت اخرین روشی که گفتم کار رو انجام بدی، باید این کار رو بکنی.

 

لینک به ارسال
در 6 ساعت قبل، فرحان گفته است :

توی css چیزی به اسم display=hidden نداریم.

مقدار display رو باید روی none تنظیم کنید.

کدهاتون رو هم  اصلاح کنید که کد جی کوئری شما اینقدر طولانی نشه. مثلا :


$("#date, #refid,#number, #product, #price").css("display","none");
$("#refid").css("display","block");

حلاصه کد شما هم به صورت زیر میشه:


$("#date, #refid,#number, #product, #price").css("display","none");
switch($(this).val()){
case "localref":
$("#localref").css("display","block");
break;
case "price":
$("#price").css("display","block");
break;
//baghiye ro ham ezafe konid ...

}

 

اگر مقادیر توی سلکتت با مقدار ای دی المان هات برابر باشن به جای سلکت بالا میتونی کار رو بایه دستور تمام کنی به صورت زیر:


$("#date, #refid,#number, #product, #price").css("display","none");
$("#" + $(this).val()).css("display","block");

 

دقت کن توی جاوااسکریپت قراره هربار کاربر این فایل ها رو دانلود بکنه. پس باید تاجای ممکن کدتو خلاصه بکنی، حتی اگه شده توی کدهای سمت سلکتت تغییر ایجاد کنی که بشه به صورت اخرین روشی که گفتم کار رو انجام بدی، باید این کار رو بکنی.

 

وااااای خاک بر سرم نمیدونم display:hidden رو از کجام آوردم اصلا حواسم نبود.ممنون دستتون درد نکنه خیلی راهنمائیتون کامل بود.

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...