رفتن به مطلب

سوال- یک select با دو option


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

من یک سلکت آپشن برای نمایش جدول دارم که میخوام آپشن هام دوتا بشه.

سلکت آپشن من اینه:

<select id="select123">
  <option value="content1">جدول قیمت</option>

  <option value="content2">جدول دلار</option>

</select>
<div id="content1" class="content123">
  نمایش جدول قیمت
</div>

<div id="content2" class="content123">
  نمایش جدول دلار
</div>


Script:
jQuery(document).ready(function($) {
  jQuery('#select123').change(function() {
    jQuery('.content123').hide();
    jQuery('#' + jQuery(this).val()).show();
  }).trigger("change");
});

Css:
div.content123 {
  display: none
}

دو جدول قیمت و جدول دلار . میخوام به هر کدوم ی آپشن اضافه شه ، مثلا آپشن دوم جدول قیمت بشه دیروز - امروز 

جدول آپشن قیمت دلار بشه هفته گذشته - قیمت روز

یعنی کاربر وقتی میزنه جدول دلار بعد در آپشن دوم انتخاب کنه هفته گذشته ، یا روز 

چطوری میشه کدهام؟

ممنونم از دوستانی که کمک میکنن

لینک به ارسال

سلام و درود

 

میتونید از کد زیر استفاده کنید البته از جی کوئری استفاده نکردم.

<html lang="fa-IR" dir="rtl">
<head>
<title>Select Box</title>
<style>
select[name=price], select[name=dolar] {
	display: none
}
</style>
</head>
<body>
<select name="main">
<option selected disabled hidden>انتخاب جدول</option>
<option value="price">جدول قیمت</option>
<option value="dolar">جدول دلار</option>
</select>
<select name="price">
<option value="yesterday">دیروز</option>
<option value="today">امروز</option>
</select>
<select name="dolar">
<option value="week-ago">هفته گذشته</option>
<option value="now">قیمت روز</option>
</select>
<script>
document.querySelector("select[name=main]").addEventListener("change", function() {
	var value = this.options[this.selectedIndex].value;
	if(value == "price") {
		if(document.querySelector("select[name=dolar]").style.display != "none")
			document.querySelector("select[name=dolar]").style.display = "none";
		document.querySelector("select[name=price]").style.display = "inline-block";
	} else if(value == "dolar") {
		if(document.querySelector("select[name=price]").style.display != "none")
			document.querySelector("select[name=price]").style.display = "none";
		document.querySelector("select[name=dolar]").style.display = "inline-block";
	}
});
</script>
</body>
</html>

 

 

موفق باشید

لینک به ارسال
در 26 دقیقه قبل، mehran-b گفته است :

سلام و درود

میتونید از کد زیر استفاده کنید البته از جی کوئری استفاده نکردم.

موفق باشید

ممنونم ، بخش content رو چجوری صدا بزنم؟ اون div در کد خودم منظورمه که به محض انتخاب جدول لود بشه.

دوم اینکه اون "انتخاب جدول" رو نمیخوام و میخوام بصورت پیش فرض یکی از جدول ها باز باشه که کاربر مشاهده کنه 

لینک به ارسال

درود مجدد

 

<html lang="fa-IR" dir="rtl">
<head>
<title>Select Box</title>
<style>
select[name=price], select[name=dolar], #content2 {
	display: none
}
</style>
</head>
<body>
<select name="main">
<option selected disabled hidden>انتخاب جدول</option>
<option value="price">جدول قیمت</option>
<option value="dolar">جدول دلار</option>
</select>
<select name="price">
<option value="yesterday">دیروز</option>
<option value="today">امروز</option>
</select>
<select name="dolar">
<option value="week-ago">هفته گذشته</option>
<option value="now">قیمت روز</option>
</select>
<div id="content1">
نمایش جدول قیمت
</div>
<div id="content2">
نمایش جدول دلار
</div>
<script>
document.querySelector("select[name=main]").addEventListener("change", function() {
	var value = this.options[this.selectedIndex].value;
	if(value == "price") {
		if(document.querySelector("select[name=dolar]").style.display != "none")
			document.querySelector("select[name=dolar]").style.display = "none";
		document.querySelector("select[name=price]").style.display = "inline-block";
		if(document.querySelector("#content2").style.display != "none")
			document.querySelector("#content2").style.display = "none";
		document.querySelector("#content1").style.display = "block";
	} else if(value == "dolar") {
		if(document.querySelector("select[name=price]").style.display != "none")
			document.querySelector("select[name=price]").style.display = "none";
		document.querySelector("select[name=dolar]").style.display = "inline-block";
		if(document.querySelector("#content1").style.display != "none")
			document.querySelector("#content1").style.display = "none";
		document.querySelector("#content2").style.display = "block";
	}
});
</script>
</body>
</html>

 

لینک به ارسال
در 1 ساعت قبل، mehran-b گفته است :

درود مجدد

 

 

تشکر مجدد ، بازهم نشد.

1- سلکت آپشن دوم تا انتخاب نشه "مخفی" هست آنلاین ببینید

2- جدول ها هر option در بخش دوم چندین جدول داره به اینصورت هست

 

بخش جداول قیمت
<div id="content1">
نمایش جدول قیمت امروز
</div>
<div id="content2">
نمایش جدول قیمت دیروز
</div>
<div id="content3">
نمایش جدول قیمت آبان
</div>
<div id="content4">
نمایش جدول قیمت مهر
</div>
<div id="content5">
نمایش جدول قیمت شهریور
</div>
<div id="content6">
نمایش جدول قیمت مرداد
</div>
<div id="content7">
نمایش جدول قیمت تیر
</div>
<div id="content8">
نمایش جدول قیمت خرداد
</div>
<div id="content9">
نمایش جدول قیمت اردیبهشت
</div>
<div id="content10">
نمایش جدول قیمت فروردین
</div>
<div id="content11">
نمایش جدول قیمت اسفند 95
</div>
<div id="content12">
نمایش جدول قیمت بهمن 95
</div>

بخش جداول دلار

<div id="content13">
  نمایش جدول دلار قیمت روز
</div>
<div id="content14">
نمایش جدول دلار قیمت دیروز
</div>
<div id="content15">
نمایش جدول دلار هفته گذشته
</div>
<div id="content16">
نمایش جدول دلار ماه گذشته
</div>
<div id="content17">
نمایش جدول دلار نوسانات
</div>
<div id="content18">
نمایش جدول دلار سال گذشته
</div>

 

ویرایش شده توسط nazanin123
لینک به ارسال

درود مجدد

 

منظور شما اینه که از ابتدا دو سلکت باکس نمایان باشه؟

مثلا سلکت باکس اصلی روی جدول قیمت باشه و سلکت باکس دومی هم مثلا روی امروز باشه و طبیعتا جدول  قیمت امروز هم در لحظه لود نمایان باشه؟

این کدهایی که فرستادید هم مربوط به سلکت باکس های دوم میشه؟

لینک به ارسال
در 3 ساعت قبل، mehran-b گفته است :

درود مجدد

 

منظور شما اینه که از ابتدا دو سلکت باکس نمایان باشه؟

مثلا سلکت باکس اصلی روی جدول قیمت باشه و سلکت باکس دومی هم مثلا روی امروز باشه و طبیعتا جدول  قیمت امروز هم در لحظه لود نمایان باشه؟

این کدهایی که فرستادید هم مربوط به سلکت باکس های دوم میشه؟

بله، دقیقا همینطوره ، سلکت باکس اول که دوگزینه داره، (جدول قیمت - جدول دلار)

ولی سلکت آپشن دوم تعداد متعددی داره مثلا امروز ، دیروز ، هفته گذشته ، ماه گذشته و ... که هرکدوم جدول (مطلب) خاص خود رو دارن که در پست قبلی فرستادم. باتشکر

لینک به ارسال

درود مجدد

 

<html lang="fa-IR" dir="rtl">
<head>
<title>Select Box</title>
<style>
select[name=dolar], div[id^=content]:not(.active) {
	display: none
}
</style>
</head>
<body>
<select name="main">
<option value="price" selected>جدول قیمت</option>
<option value="dolar">جدول دلار</option>
</select>
<select name="price">
<option value="content1" selected>قیمت امروز</option>
<option value="content2">قیمت دیروز</option>
<option value="content3">قیمت آبان</option>
<option value="content4">قیمت مهر</option>
<option value="content5">قیمت شهریور</option>
<option value="content6">قیمت مرداد</option>
<option value="content7">قیمت تیر</option>
<option value="content8">قیمت خرداد</option>
<option value="content9">قیمت اردیبهشت</option>
<option value="content10">قیمت فروردین</option>
<option value="content11">قیمت اسفند 95</option>
<option value="content12">قیمت بهمن 95</option>
</select>
<select name="dolar">
<option value="content13" selected>قیمت روز</option>
<option value="content14">قیمت دیروز</option>
<option value="content15">قیمت هفته گذشته</option>
<option value="content16">قیمت ماه گذشته</option>
<option value="content17">نوسانات قیمت</option>
<option value="content18">قیمت سال گذشته</option>
</select>
<div id="content1" class="active">
نمایش جدول قیمت امروز
</div>
<div id="content2">
نمایش جدول قیمت دیروز
</div>
<div id="content3">
نمایش جدول قیمت آبان
</div>
<div id="content4">
نمایش جدول قیمت مهر
</div>
<div id="content5">
نمایش جدول قیمت شهریور
</div>
<div id="content6">
نمایش جدول قیمت مرداد
</div>
<div id="content7">
نمایش جدول قیمت تیر
</div>
<div id="content8">
نمایش جدول قیمت خرداد
</div>
<div id="content9">
نمایش جدول قیمت اردیبهشت
</div>
<div id="content10">
نمایش جدول قیمت فروردین
</div>
<div id="content11">
نمایش جدول قیمت اسفند 95
</div>
<div id="content12">
نمایش جدول قیمت بهمن 95
</div>
<div id="content13">
نمایش جدول دلار قیمت روز
</div>
<div id="content14">
نمایش جدول دلار قیمت دیروز
</div>
<div id="content15">
نمایش جدول دلار هفته گذشته
</div>
<div id="content16">
نمایش جدول دلار ماه گذشته
</div>
<div id="content17">
نمایش جدول دلار نوسانات
</div>
<div id="content18">
نمایش جدول دلار سال گذشته
</div>
<script>
function myFunc() {

	var name = this.getAttribute("name");
	
	if(name == "main") {
		
		var option = this.options;
		var value = option[this.selectedIndex].value;
		
		for(var i = 0; i < option.length; i++) {
			
			if(option[i].value == value)
				document.querySelector("select[name="+option[i].value+"]").style.display = "inline-block";
			else
				document.querySelector("select[name="+option[i].value+"]").style.display = "none";
				
		}
		
		var child = document.querySelector("select[name="+value+"]");
		var childValue = child.options[child.selectedIndex].value;
		var	table = document.querySelectorAll("div[id^=content]");
		
		for(var i = 0; i < table.length; i++) {
			
			if(table[i].getAttribute("id") == childValue)
				document.querySelector("#"+table[i].getAttribute("id")+"").style.display = "block";
			else
				document.querySelector("#"+table[i].getAttribute("id")+"").style.display = "none";
		
		}
		
	} else {
		
		var	table = document.querySelectorAll("div[id^=content]");
		var value = this.options[this.selectedIndex].value;
		
		for(var i = 0; i < table.length; i++) {
			
			if(table[i].getAttribute("id") == value)
				document.querySelector("#"+table[i].getAttribute("id")+"").style.display = "block";
			else
				document.querySelector("#"+table[i].getAttribute("id")+"").style.display = "none";
		
		}
	
	}
	
}
var select = document.querySelectorAll("select");
for(var i = 0; i < select.length; i++)
	select[i].addEventListener("change", myFunc);
</script>
</body>
</html>

 

موفق باشید

لینک به ارسال

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

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

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

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

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

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

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

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

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