ড্রপডাউন বিকল্পটি নির্বাচন করতে কীভাবে jQuery ব্যবহার করবেন?

Question

আমি ভাবছিলাম যে <option>কোনও ড্রপডাউন বাক্সে, চতুর্থ আইটেমটি চয়ন করতে, jQuery পাওয়া সম্ভব কিনা ?

<select>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

আমি চাই যে ব্যবহারকারী কোনও লিঙ্কে ক্লিক করুন, তারপরে <select>বাক্সটির মান পরিবর্তন করুন, যেন ব্যবহারকারী এটি ক্লিক করে এটি নির্বাচন করেছেন <option>।

Comments

আপনার বিকল্পগুলির একটি মূল্য আছে?

— ভিক্টর

Answer 1

কেমন

$('select>option:eq(3)').attr('selected', true);

http://www.jsfiddle.net/gaby/CWvwn/ এ উদাহরণ

---

jquery এর আধুনিক সংস্করণগুলির জন্য আপনার .prop()পরিবর্তে ব্যবহার করা উচিত.attr()

$('select>option:eq(3)').prop('selected', true);

http://jsfiddle.net/gaby/CWvwn/1763/ এ উদাহরণ

Comments

ইমো এটি এমনকি কাজ করা উচিত নয়; পরিবর্তে একটি বিকল্পের নির্বাচিত রাষ্ট্রটি তার পরিবর্তে

— বাছাইয়ের

selectElement.selectedIndex = index;জ্যাক মানে কি।

— রিলেমন

@ রলেমন, আমি বুঝতে পারি, কিন্তু অ্যাট্রিবিউট ব্যবহার করা selectedIndexহলে একাধিক নির্বাচনের multipleজন্য ব্যবহার করা যায় না। এবং নির্বাচিত উপাদান সেট করার স্বাভাবিক ( এইচটিএমএল ) উপায় হল উপাদানগুলির selectedবৈশিষ্ট্য option।

— গ্যাব্রিয়েল পেট্রিওলি

@ গ্যাবাইকাজি.পেট্রোলি সাধারণ উপায়টি হ'ল selectedপ্রতিটি সংশ্লিষ্ট optionsউপাদানটির সম্পত্তি সেট করা true(এবং optionচ্ছিকভাবে বাকীটি falseসুস্পষ্টরূপে নির্ধারণ করা)। একাধিক মান নির্বাচন আসলে বেশ কদর্য আছেন :)

— জ্যাক

@ সন্নিইটকিজিপি onchangeপ্রোগ্রামটিভ্যালি যখন মান পরিবর্তন করা হয় তখন ইভেন্টটি কখনই ট্রিগার হয় না। আপনি .trigger('change')এই ইভেন্টটিকে আগুন জ্বালানোর জন্য শেষে যোগ করতে পারেন ( যদিও এটির পরিবর্তে মানটি পরিবর্তিত হবে তা আগুন দিয়ে যাবে )

— গ্যাব্রিয়েল পেট্রিওলি

Answer 2

সমাধান:

$("#element-id").val('the value of the option');

Comments

এটি selectedএইচটিএমএলে বিকল্পটি সেট করে না ।

— আহমদ হামজা

Answer 3

এইচটিএমএল নির্বাচনের উপাদানগুলির একটি selectedIndexসম্পত্তি রয়েছে যা নির্দিষ্ট বিকল্প নির্বাচন করার জন্য লিখিত হতে পারে:

$('select').prop('selectedIndex', 3); // select 4th option

সাধারণ জাভাস্ক্রিপ্ট ব্যবহার করে এটি অর্জন করা যায়:

// use first select element
var el = document.getElementsByTagName('select')[0]; 
// assuming el is not null, select 4th option
el.selectedIndex = 3;

Comments

এটি অবশ্যই গ্রহণযোগ্য উত্তর হওয়া উচিত ... এটি স্যানিট এবং ক্লিন সমাধানের মতো দেখাচ্ছে ...

— ডেনিস সাগুরেট

সমস্যাটি হ'ল এটি কোনও 'উদ্বোধনী' ইভেন্টটিকে চালিত করে না।

— গাই কোরল্যান্ড

@ গুয়কোরল্যান্ড এখানে প্রদর্শিত অন্য উত্তরগুলির সাথে কারও সাথেই ঘটে না ; আপনি যদি কোনও ইভেন্ট চালাতে চান তবে আপনাকে এটি ম্যানুয়ালি করতে হবে।

— জ্যাক

@ জ্যাক একটি ছোট পথ আছে? আমি খুঁজে পেলাম একমাত্র উপায়: var fireEvent = ফাংশন (সিলেক্টমেন্ট) {যদি (সিলেক্টামেন্ট) {যদি (সিলেক্টমেন্টে "ফায়ারএন্টেন্ট") E সিলেক্ট এলিমেন্ট.ফায়ারইভেন্ট ("অ্যানচেঞ্জ"); } অন্যথায় {var evt = ডকুমেন্ট.ক্রেটইভেন্ট ("HTMLEvents"); evt.initEvent ("পরিবর্তন", মিথ্যা, সত্য); selectElement.dispatchEvent (evt); }}}

— গাই করল্যান্ড

@ গুয়কোরল্যান্ড জিক্যুওয়ারি এর .trigger()জন্য প্রকাশ করে, তবে আপনি ইতিমধ্যে কোড সহ এটি করছেন যেহেতু নিজেকে পরিবর্তন হ্যান্ডলারদেরও কল করা সহজ হবে।

— জ্যাক

Answer 4

আমি এইভাবে এটি করতে হবে

 $("#idElement").val('optionValue').trigger('change');

Comments

এটি নির্বাচিত উত্তর হওয়া উচিত

— উজুমাকি নারুটো

"(" # আইডিমেন্ট ")। ভাল ('অপশনভ্যালু')। পরিবর্তন () এছাড়াও কাজ করতে পারে

— উল্ল্লু

Answer 5

যদি আপনার বিকল্পগুলির একটি মান থাকে তবে আপনি এটি করতে পারেন:

$('select').val("the-value-of-the-option-you-want-to-select");

'সিলেক্ট' হ'ল আপনার সিলেক্ট বা ক্লাস সিলেক্টরের আইডি। বা যদি কেবলমাত্র একটি নির্বাচন থাকে তবে আপনি ট্যাগটি উদাহরণ হিসাবে দেখতে পারেন।

Comments

এটাই আমার দরকার ছিল। ধন্যবাদ।

— chapman84

Answer 6

সবচেয়ে সহজ উপায় হ'ল val(value)ফাংশন:

$('select').val(2);

এবং নির্বাচিত মান পেতে আপনি কোনও আর্গুমেন্ট দেবেন না:

$('select').val();

এছাড়াও, আপনি যদি করেন তবে <option value="valueToSelect">...</option>আপনি এটি করতে পারেন:

$('select').val("valueToSelect");

ডেমো

Comments

Worked ('# SelectCtrlId' )ও কাজ করেছে val ('ValueToSelect');

— সাঁই

Answer 7

আপনি যদি একটি নির্দিষ্ট মান সহ একটি বিকল্প নির্বাচন করতে চান তবে নিম্নলিখিত কোডটি ব্যবহার করুন:

$('select>option[value="' + value + '"]').prop('selected', true);

Comments

$ ( 'নির্বাচন') Val (মান)। কেন এত গম্ভীর? ;)

— জিশান

@ জি উত্তর উত্তর কোড একাধিক নির্বাচনের অনুমতি দেয়।

— আজঘনভি

Answer 8

 Try with the below codes. All should work. 
    $('select').val(2);
    $('select').prop('selectedIndex', 1);
    $('select>option[value="5"]').prop('selected', true);
    $('select>option:eq(3)').attr('selected', 'selected');
    $("select option:contains(COMMERCIAL)").attr('selected', true);

Answer 9

আমি নবম-সন্তানের () একা () এর চেয়ে বেশি পছন্দ করি কারণ এটি 0-ভিত্তিক পরিবর্তে 1-ভিত্তিক সূচক ব্যবহার করে যা আমার মস্তিষ্কে কিছুটা সহজ।

//selects the 2nd option
$('select>option:nth-child(2)').attr('selected', true);

Comments

"1-ভিত্তিক সূচক" খেজুরের সাথে জিনিসগুলি পরিচালনা করার সময় আরও ভাল better আমাকে অনেক ঝামেলা থেকে বাঁচায়। ধন্যবাদ।

— টিসিবি 13

Answer 10

'' এলিমেন্টের সাথে আমরা সাধারণত 'মান' বৈশিষ্ট্য ব্যবহার করি। এটি তখন সেট করা সহজ করে তুলবে:

$('select').val('option-value');

Answer 11

এটা চেষ্টা কর:

$('#mySelectElement option')[0].selected = true;

শুভেচ্ছা সহ!

Answer 12

আইডি সহ উত্তর:

$('#selectBoxId').find('option:eq(0)').attr('selected', true);

Answer 13

 $('select>option:eq(3)').attr('selected', 'selected');

এখানে একটি সতর্কতা হ'ল যদি আপনার জাভাস্ক্রিপ্টটি নির্বাচন / বিকল্পের পরিবর্তিত ইভেন্টের জন্য পর্যবেক্ষণ করে থাকে .trigger('change')যাতে কোডটি হয়ে যায়।

 $('select>option:eq(3)').attr('selected', 'selected').trigger('change');

কারণ শুধুমাত্র কলিং .attr('selected', 'selected')ইভেন্টটি ট্রিগার করে না