نمایش اتوماتیک مقدار لیست باکس

[رضا قربانی]

سلام و خسته نباشید.

من یک لیست باکس با مقدار مشخص دارم و میخوام هر موقع رو هر مقدار کلیک شد اون مقدار داخل تکس باکس با خط تیره قرار بگیره (بدون رفرش صفحه یعنی با JS )


نحوه قرار گیری در تکس باکس : تست یک-تست دو- تست سه-تست چهار


پیشاپیش تشکر بابت کمکتون
tnx

[رضا قربانی]

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

با تشکر

[frednasri]

سلام و خسته نباشید.

من یک لیست باکس با مقدار مشخص دارم و میخوام هر موقع رو هر مقدار کلیک شد اون مقدار داخل تکس باکس با خط تیره قرار بگیره (بدون رفرش صفحه یعنی با JS )


نحوه قرار گیری در تکس باکس : تست یک-تست دو- تست سه-تست چهار


پیشاپیش تشکر بابت کمکتون
tnx


سلام.

فرض کنید کد html شما به قراره زیره که یه لیست با یه تکست باکس می سازه:


<select id = "tests">
<option value="تست یک">Test 1</option>
<option value="تست دو">Test 2</option>
<option value="تست سه">Test 3</option>
<option value="تست چهار">Test 4</option>
</select>
<br><br>
<input id = "yourtest" type="text" value="" size = 80>

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

$('#tests').change(function () {
var selectedTest = $(this).val();
$('#yourtest').val(selectedTest);
});

و اگه می خواهید مقادیر پشت سر هم اضافه بشه، از کد زیر استفاده کنید:

$('#tests').change(function () {
var selectedTest = $(this).val();
var previousSelection = $('#yourtest').val();
$('#yourtest').val(previousSelection + '-' + selectedTest);
});

موفق باشید.

[frednasri]

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

با تشکر

سلام.

اینو متوجه نمیشم. لطفاً بیشتر توضیح بدید.

موفق باشید.

[رضا قربانی]

سلام.

اینو متوجه نمیشم. لطفاً بیشتر توضیح بدید.

موفق باشید.

یعنی وقتی روی مقدار مشخص شده
<option value="تست دو">Test 2</option> کلیک شد یک تکس باکس که حالت visable بود نمایش داده بشه .

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

[frednasri]

سلام.

برای این کار، کافیه یه جمله شرطی اضافه کنید.

به آخر کد html بالا، خط زیر رو اضافه کنید که یه تکست باکس می سازه با حالت اولیه مخفی:


<input id = "hiddenbox" type="text" value="" size = 80 style = "display: none;">

بعدش از کد زیر استفاده کنید:

$('#tests').change(function () {
var selectedTest = $(this).val();
var previousSelection = $('#yourtest').val();
$('#yourtest').val(previousSelection + '-' + selectedTest);

var selectedOption = $(this).find(":selected").text();
if(selectedOption == 'Test 2') {
$('#hiddenbox').css('display', 'block');
} else {
$('#hiddenbox').css('display', 'none');
}
});

با انتخاب Test 2، تکست باکس مخفی نمایش داده میشه و با سایر انتخاب ها مخفی میشه.

امیدوارم همین منظورتون بوده باشه.

موفق باشید.

[رضا قربانی]

ضمن تشکر از frednasri (http://barnamenevis.org/member.php?368962-frednasri) عزیز

بارها شده جاهای مختلف دیدم کنار تکس باکس یک آیکن علامت ضربدر و علامت صحیح هست .
1 - یعنی مثلا اگر ایمیل رو اشتباه وارد کنی و بری فیلد بعدی ضربدر نمایش داده میشه
2 - مثلا برای شماره همراه فقط باید عدد وارد بشه و اگر درست بود کنارش علامت صحیح نمایش بده
3 - یا اگر فیلد خالی بود یعنی حتما باید محتوی داشته باشه

این سه نوع در جاوا اسکریپت به چه صورت باید عمل کنم (ما در پی اچ پی از رگولار اکسپرشن اسفاده میکردیم)

بازم تشکر از شما

[frednasri]

سلام.

خواهش می کنم.

بله در جاوااسکریپت هم از Regular Expressions استفاده می شه. مثلاً این لینک (https://formden.com/blog/validate-contact-form-jquery) رو ببینید.

البته معمولاً راحت تر اینه که از یه پلاگین مثل jQuery Input Mask (http://robinherbots.github.io/jquery.inputmask/index.html) و یا jQuery Validation (http://jqueryvalidation.org/) استفاده کنید.

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

موفق باشید.

[frednasri]

سلام.

label رو اضافه کردم و کل کار رو براتون اینجا (http://jsfiddle.net/frednasri/cr00dyg3/) ساختم.

موفق باشید.

[رضا قربانی]

سلام.

label رو اضافه کردم و کل کار رو براتون اینجا (http://jsfiddle.net/frednasri/cr00dyg3/) ساختم.

موفق باشید.

اگه بخوام بعد از کلیک کردن توضیح یک لیست باکس داخل تکس باکس قرار بگیره باید چی کار کنم :


<option value="">توضیح</option>

[frednasri]

سلام.

منظورتون اینه که یکی از گزینه های لیست باکس به نام توضیح هست و اگه روش کلیک کنید (یعنی انتخابش کنید)، خود عنوان توضیح توی یه تکست باکس نوشته شه؟

[رضا قربانی]

سلام.

منظورتون اینه که یکی از گزینه های لیست باکس به نام توضیح هست و اگه روش کلیک کنید (یعنی انتخابش کنید)، خود عنوان توضیح توی یه تکست باکس نوشته شه؟

دقیقا . درسته , دیگه کاری به مقدار Value="" ندارم

[frednasri]

سلام.

یه نمونه اینجا (http://jsfiddle.net/frednasri/yuh7p7j0/) براتون ساختم. ببینید همونیه که می خواین؟

موفق باشید.