سوال برای jQuery

hasanak852 · Mar 3, 2012

سوال برای jQuery - انتخاب Event مناسب برای لیست کشویی (Select)

سلام
یه سوال ساده:
توی فرم یه لیست کشویی دارم (select) به این صورت:

HTML:

<select name="select">
    <option value="option1">گزینه1</option>
    <option value="option2">گزینه2</option>
    <option value="option3">گزینه3</option>
    <option value="option4">گزینه4</option>
</select>

میخوام وقتی هر کدوم از گزینه ها انتخاب شد با جی-کوئری یه اتفاقی بیافته
توی جی-کوئری از چه Eventی استفاده کنم؟
الآن خاصیت "click" گذاشتم خوبه کار میکنه ولی فقط وقتیکه با موس روی هر گزینه کلید کنی، میخوام اگه با صفحه کلید هم عوض شد کار کنه:

HTML:

<script type="text/javascript" language="JavaScript">
$(document).ready(function(){
    $("[value='option1']").click(function(){
        Same effects...
    });
    $("[value='option2']").click(function(){
        Same effects...
    });
    $("[value='option3']").click(function(){
        Same effects...
    });
    $("[value='option4']").click(function(){
        Same effects...
    });
});
</script>

powerup · Mar 3, 2012

hasanak852 گفت:
الآن خاصیت "click" گذاشتم خوبه کار میکنه ولی فقط وقتیکه با موس روی هر گزینه کلید کنی، میخوام اگه با صفحه کلید هم عوض شد کار کنه:

HTML:

<script type="text/javascript" language="JavaScript"> $(document).ready(function(){ $("[value='option1']").click(function(){ Same effects... }); $("[value='option2']").click(function(){ Same effects... }); $("[value='option3']").click(function(){ Same effects... }); $("[value='option4']").click(function(){ Same effects... }); }); </script>

سلام، شما اصلا لازم نبود از Click استفاده کنی، یا اینکه برای هر option جداگانه یه خط کد بنویسی، اگه تعداد option ها بیشتر از این بود چی؟ شما از کد زیر استفاده کن به جای کدهای قبلی، فقط اینو بگم، که المان Select یه خاصیتی داره که حتی اگه با کیبورد هم تغییرش بدی، تا وقتی focus از روش رد نشه و به یه المان دیگه منتقل نشه (اگه Tab نزنی) هیچ اتفاقی نمیفته

Html:

HTML:

<select name="select" class="selectList">
                    <option value="option1">گزینه1</option>
                    <option value="option2">گزینه2</option>
                    <option value="option3">گزینه3</option>
                    <option value="option4">گزینه4</option>
                </select>
            
            	<p>مطالبی در مورد شرکت</p>

JQuery:

HTML:

<script type="text/javascript">
$(document).ready(function(){
	$('select').change(function(){
		var str = '';
		$('select option:selected').each(function(){
			str += $(this).text() + ' ';
		});
		$(this).next('p').text(str);
		
	}).change();
});
</script>

eAmin · Mar 3, 2012

منتقل شد.

hasanak852 · Mar 5, 2012

powerup گفت:
...برای هر option جداگانه یه خط کد بنویسی، اگه تعداد option ها بیشتر از این بود چی؟

سلام
ممنون دوست عزیز به خاطر جوابت
ولی مشکلی نداره من فقط 4 تا آپشن دارم و میخوام برای هر کدوم یه خط کد بنویسم

powerup گفت:
فقط اینو بگم، که المان Select یه خاصیتی داره که حتی اگه با کیبورد هم تغییرش بدی، تا وقتی focus از روش رد نشه و به یه المان دیگه منتقل نشه (اگه Tab نزنی) هیچ اتفاقی نمیفته

Html:

HTML:

<select name="select" class="selectList"> <option value="option1">گزینه1</option> <option value="option2">گزینه2</option> <option value="option3">گزینه3</option> <option value="option4">گزینه4</option> </select> <p>مطالبی در مورد شرکت</p>

JQuery:

HTML:

<script type="text/javascript"> $(document).ready(function(){ $('select').change(function(){ var str = ''; $('select option:selected').each(function(){ str += $(this).text() + ' '; }); $(this).next('p').text(str); }).change(); }); </script>

این کدی که دادی خوبه

rose

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

powerup · Mar 6, 2012

hasanak852 گفت:
سلام
ممنون دوست عزیز به خاطر جوابت
ولی مشکلی نداره من فقط 4 تا آپشن دارم و میخوام برای هر کدوم یه خط کد بنویسم

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

اگه دقیقا بگی چی میخوای بهتر میتونم کمکت کنم
لطفا الگوریتم کارت رو از اول تا آخر بگو
مثلا برای گزینه 1 چه اتفاقی بیفته، گزینه 2 و گزینه 3 و ...

hasanak852 · Mar 6, 2012

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

HTML:

<script type="text/javascript" language="JavaScript">
$(document).ready(function(){
    $(".others-acc").hide();
    $(".others-vam").hide();
    $("[value='variz-for-others']").click(function(){
        $(".others-vam").hide();
        $(".others-acc").fadeTo("normal",1);
    });
    $("[value='ghest-for-others']").click(function(){
        $(".others-acc").hide();
        $(".others-vam").fadeTo("normal",1);
    });
    $("[value='variz']").click(function(){
        $(".others-vam").hide();
        $(".others-acc").hide();
    });
    $("[value='ghest']").click(function(){
        $(".others-vam").hide();
        $(".others-acc").hide();
    });
    $("[value='please-select']").click(function(){
        $(".others-vam").hide();
        $(".others-acc").hide();
    });
});
</script>
<select name="request">
    <option value="please-select">انتخاب کنید...</option>
    <option value="variz">واریز به حساب خود</option>
    <option value="ghest">پرداخت قسط خود</option>
    <option value="ghest-for-others">پرداخت قسط دیگران</option>
    <option value="variz-for-others">واریز به حساب دیگران</option>
</select>
<div class=others-vam><label for="vamnum">شماره وام:</label><input type="text" id="vamnum"  name="vamnum" /></div>
<div class=others-acc><label for="accnum">شماره حساب:</label><input type="text" id="accnum"  name="accnum" /></div>

benyamin_pc · Mar 6, 2012

سلام دوستان
من jquery زیاد بلد نیستم اما js بلدم و الان برام روشن نیست که چرا از ایونت onChange خود js استفاده نمیشه

hasanak852 · Mar 6, 2012

benyamin_pc گفت:
سلام دوستان
من jquery زیاد بلد نیستم اما js بلدم و الان برام روشن نیست که چرا از ایونت onChange خود js استفاده نمیشه

برام فرقی نمیکنه که کدوم زبون باشه
به نظرت با onChange جاوا میشه کاری که مدنظرمه بکنم؟
اگه آره ممنون میشم راه حلش رو با همین جاوا بگی

benyamin_pc · Mar 7, 2012

برای جواب این سوالتون

میخوام وقتی هر کدوم از گزینه ها انتخاب شد با جی-کوئری یه اتفاقی بیافته
توی جی-کوئری از چه Eventی استفاده کنم؟
الآن خاصیت "click" گذاشتم خوبه کار میکنه ولی فقط وقتیکه با موس روی هر گزینه کلید کنی، میخوام اگه با صفحه کلید هم عوض شد کار کنه:

از ایونت onChange خود جاوا اسکریپت استفاده بفرمائین راحت ترو کدتونم زیبا تر میشه
البته jquery زبان نیست یه کتابخونه نوشته شده با js هست برای سادگی بعضی کارها اما بعضی کارا که خودشون با js ساده ترن نمیدونم چرا با jquery بیشتر میپیچوننش