<সিলেক্ট> এর প্রথম বিকল্পটি কীভাবে jQuery এর সাথে নির্বাচিত করবেন


546

আমি jQuery দিয়ে নির্বাচিত প্রথম বিকল্পটি কীভাবে করব?

<select id="target">
  <option value="1">...</option>
  <option value="2">...</option>
</select>

উত্তর:


954
$("#target").val($("#target option:first").val());

362
লক্ষ করা উচিত যে এটি আরও সহজে $ ("# টার্গেট") [0] দিয়ে সম্পন্ন হয়েছে;
ডেভিড অ্যান্ড্রেস

17
এটি কাজ করে, তবে এটি 1 ম মৌলিক মানের উপর ভিত্তি করে , যদি 1 ম
মৌলটিতে

2
আই 6 বাদে দুর্দান্ত কাজ করছে বলে মনে হচ্ছে। 7-8 এর অনিশ্চিত, 9
নিকোলি

3
আমি আমার আগের বিবৃতিটি পুনরায় বলি, নিজের থেকে এগিয়ে চলেছিলাম। $ ( "# লক্ষ্য") Val ( "বিকল্প: প্রথম")। আইই 6 most ("টার্গেট") সর্বাধিক সর্বত্র কাজ করে val আই 6 এ কাজ করবে, কারণ আপনি আক্ষরিক অর্থে প্রথম মানটি সন্ধান করছেন এবং এটি লক্ষ্য্যের মান হিসাবে প্রবেশ করছেন। একের পরিবর্তে দুটি আইডি লুকআপ।
নিকোলি

2
এবং এটি আসলে আই 6, 7 এবং 8 এর জন্য প্রয়োজনীয় Where
নিকোলি

178

আপনি এটি চেষ্টা করতে পারেন

$("#target").prop("selectedIndex", 0);

2
এটি সব ক্ষেত্রে সঠিকভাবে কাজ করে না। আমার পিতামাতারা / শিশু ক্যাসকেডিং ড্রপ ডাউনগুলি রয়েছে। প্যারেন্ট # 1 নির্বাচন করুন, শিশু # 1 প্রদর্শন করুন, পিতামাতা # 2 প্রদর্শন শিশু # 2 নির্বাচন করুন। যে কোনও সময় তারা নতুন পিতামাতাকে বেছে নেওয়ার সাথে সাথে সংশ্লিষ্ট শিশুটিকে প্রথম বিকল্পে ফিরিয়ে আনতে হবে। এই সমাধানটি এটি করে না। এটি চাইল্ড মেনুতে "স্টিকি" ফেলে দেয়। বিকল্পটি দেখুন: নির্বাচিত.প্রপ ('নির্বাচিত', মিথ্যা) / বিকল্প: প্রথম.প্রপ ('নির্বাচিত', 'নির্বাচিত') আরও উত্তেজনাপূর্ণ পরিস্থিতিতে কাজ করে এমন উত্তরের জন্য এই প্রশ্নের সমাধান দিন।
ল্যান্স ক্লিভল্যান্ড

এটি চেঞ্জ ইভেন্টটিকে ট্রিগার করে না। কমপক্ষে ক্রোমে।
টমাসজ মুলারসিজেক

ধন্যবাদ! আমার পক্ষে কাজ করা উত্তরের তালিকার এটি প্রথম উত্তর।
কেসি ক্রুকস্টন

6
@ টমাসজ$("#target").prop("selectedIndex", 0).change();
এমপ্লুঞ্জন

@ রোমেশ আমি কীভাবে সিলেক্ট ইনডেক্স বেসকে মান নির্ধারণ করতে পারি?
জুনিয়র ফ্রোগি

111
// remove "selected" from any options that might already be selected
$('#target option[selected="selected"]').each(
    function() {
        $(this).removeAttr('selected');
    }
);


// mark the first option as selected
$("#target option:first").attr('selected','selected');

1
ভাল দ্বিতীয় পদ্ধতির। দয়া করে নির্বাচিত বৈশিষ্ট্যের মান যুক্ত করুন। উদাহরণস্বরূপ, অ্যাটর ("নির্বাচিত", "নির্বাচিত")। এই অতিরিক্ত প্যারামিটার ছাড়া, নির্বাচন করা হয় না।
ডেভিড অ্যান্ড্রেস

@ ইগোরপ্যাভালিখিন - আমি ইতিমধ্যে নির্বাচিত হতে পারে এমন কোনও বিকল্প থেকে "নির্বাচিত" পতাকাটি সরিয়ে JQuery কোড অন্তর্ভুক্ত করার জন্য উত্তরটি সম্পাদনা করেছি। এখন উত্তরটি সঠিক: :)
jmort253

20
eachফাংশনের জন্য কোনও প্রয়োজন নেই , হওয়া উচিত: $('#target option[selected="selected"]').removeAttr('selected')এছাড়াও এখন removePropএবং এর propপরিবর্তে ব্যবহার করা উচিত ।
vsync

এই প্রশ্নের জেমস লি বাকের এর উত্তরের আরও বিশদ সংস্করণ, যদিও ইন্টারফেসটি ভালভাবে পরিচালিত হয় এমন কম্যুট চক্র যুক্ত হয়েছে যা প্রয়োজন হবে না।
ল্যান্স ক্লিভল্যান্ড

65

আপনি যখন ব্যবহার

$("#target").val($("#target option:first").val());

প্রথম বিকল্পের মানটি যদি শূন্য হয় তবে এটি Chrome এবং সাফারিতে কাজ করবে না।

আমি পছন্দ করি

$("#target option:first").attr('selected','selected');

কারণ এটি সমস্ত ব্রাউজারে কাজ করতে পারে।


3
আরও কিছু ক্ষেত্রে কাজ করার জন্য আপনাকে পূর্বের যে কোনও পূর্বনির্ধারিত উপাদানগুলি "অপসलेक्ट" করতে হবে। বিস্তারিত জানতে জেমস লি বাকেরের উত্তর দেখুন See
ল্যান্স ক্লিভল্যান্ড

44

নির্বাচিত ইনপুটটির মান পরিবর্তন করা বা নির্বাচিত বৈশিষ্ট্যটি সমন্বয় করা ডিওএম উপাদানটির ডিফল্ট নির্বাচিতঅপশন বৈশিষ্ট্যগুলিকে ওভাররাইট করতে পারে, ফলস্বরূপ এমন উপাদান যা পুনরায় সেট ইভেন্ট ডাকে এমন কোনও ফর্মের মধ্যে সঠিকভাবে রিসেট নাও হতে পারে।

প্রয়োজনীয় বিকল্পটি সাফ করতে এবং সেট করতে jQuery এর প্রপ পদ্ধতিটি ব্যবহার করুন:

$("#target option:selected").prop("selected", false);
$("#target option:first").prop("selected", "selected");

3
পারফেক্ট। আমার হাতে ড্রপ ডাউন মেনু রয়েছে। যখন কোনও ব্যবহারকারী প্যারেন্ট অপশন 2 নির্বাচন করেন তবে চাইল্ড অপশন 3 আমি এটি "স্টিক" রাখতে চাই না। অন্য কথায় ব্যবহারকারী তারপরে পিতামাতা # 1 নির্বাচন করেন, তারপরে পিতামাতাকে # 2 পুনরায় নির্বাচন করেন। যখন এটি ঘটে তখন আমি চাই চাই চাইল্ড মেনুটি প্রথম বিকল্পটিতে পুনরায় সেট করুন (যা আমার ক্ষেত্রে "কোনও")। এখানে অন্য সমস্ত সমাধান ফায়ারফক্স ভি 19 এবং লিনাক্সের ক্রোমে ব্যর্থ।
ল্যান্স ক্লিভল্যান্ড

33
$("#target")[0].selectedIndex = 0;

1
যেখানে ড্রপ ডাউনের একটি প্রাক-নির্বাচিত আইটেম রয়েছে সে ক্ষেত্রে এটি কাজ করবে না। বিশদ জন্য নির্বাচিত উত্তরে আমার মন্তব্য দেখুন।
ল্যান্স ক্লিভল্যান্ড

21

একটি সূক্ষ্ম বিষয় আমি মনে করি শীর্ষে ভোট দেওয়া উত্তরগুলি আবিষ্কার করেছি তা হ'ল তারা সঠিকভাবে নির্বাচিত মান পরিবর্তন করেও তারা ব্যবহারকারী যে উপাদানটি দেখায় তা আপডেট করে না (কেবলমাত্র যখন তারা উইজেটে ক্লিক করবে তখনই তারা পরের চেকটি দেখতে পাবে আপডেট হওয়া উপাদান)।

একটি। পরিবর্তন () কলটি শেষ পর্যন্ত চেইন করলে ইউআই উইজেটও আপডেট হবে।

$("#target").val($("#target option:first").val()).change();

(নোট করুন যে আমি jQuery মোবাইল এবং ক্রোম ডেস্কটপে একটি বাক্স ব্যবহার করার সময় এটি লক্ষ্য করেছি, তাই এটি সর্বত্র নাও হতে পারে)।


একটি। পরিবর্তন () কলটি শেষ পর্যন্ত চেইন করলে ইউআই উইজেটও আপডেট হবে।
কোডিমিরার

17

আপনার যদি বিকল্পগুলি অক্ষম করে থাকে তবে নীচের ফলাফলগুলির ফলাফলগুলি নির্বাচন করতে বাধা দিতে আপনি ([অক্ষম]) যুক্ত না করতে পারেন :

$("#target option:not([disabled]):first").attr('selected','selected')

1
অক্ষম বিকল্প সম্পর্কে ভাল পয়েন্ট। উপস্থাপন উত্তর ভাল লাগছে!
ল্যান্স ক্লিভল্যান্ড

16

মানগুলি পুনরায় সেট করার অন্য উপায় (একাধিক নির্বাচিত উপাদানগুলির জন্য) এটি হতে পারে:

$("selector").each(function(){

    /*Perform any check and validation if needed for each item */

    /*Use "this" to handle the element in javascript or "$(this)" to handle the element with jquery */

    this.selectedIndex=0;

});

4
এটি +1 আসলে একটি ভাল উত্তর, তবে আপনি এটি প্রশ্নোত্তরের সাথে আরও সুনির্দিষ্ট করতে পারতেন; পরিবর্তে $("selector")আপনি স্রেফ লিখতে পারে$('#target')
জ্যাক


7
$('#newType option:first').prop('selected', true);

ইতিমধ্যে নির্বাচিত কোনও বিকল্প নেই যদি এটি কেবল কাজ করে। জেমস লি বাকেরের উত্তর দেখুন।
ওয়েবার্স

6

আমি খুঁজে পেয়েছি যে নির্বাচিত মাত্র নির্বাচিত বৈশিষ্ট্য ইতিমধ্যে নির্বাচিত বৈশিষ্ট্যটি কাজ করে না। আমি এখন যে কোডটি ব্যবহার করব তা প্রথমে নির্বাচিত বৈশিষ্ট্যটিকে আনসেট করবে, তারপরে প্রথম বিকল্পটি নির্বাচন করবে।

$('#target').removeAttr('selected').find('option:first').attr('selected', 'selected');

এটি ভালভাবে কাজ করে এবং এই প্রশ্নের অন্য কোথাও উল্লেখ করা জেমস লি বেকারের উত্তরের সাথে খুব মিল রয়েছে। আমি অপশন সহ অন্যান্য উত্তরটি পছন্দ করি: নির্বাচিত এবং বিকল্প: বিকল্পটির প্রয়োগ হিসাবে প্রথমে: প্রথমটি খুঁজে বের করার () চেয়ে দ্রুত (গণনা অনুযায়ী) হতে পারে to
ল্যান্স ক্লিভল্যান্ড

5

যদিও প্রতিটি ফাংশন সম্ভবত প্রয়োজনীয় নয় ...

$('select').each(function(){
    $(this).find('option:first').prop('selected', 'selected');
});

আমার জন্য কাজ কর.


5

আমি এখানে এটি কীভাবে করব:

$("#target option")
    .removeAttr('selected')
    .find(':first')     // You can also use .find('[value=MyVal]')
        .attr('selected','selected');

1
এটি ভালভাবে কাজ করে এবং এই প্রশ্নের অন্য কোথাও উল্লেখ করা জেমস লি বেকারের উত্তরের সাথে খুব মিল রয়েছে। আমি অপশন সহ অন্যান্য উত্তরটি পছন্দ করি: নির্বাচিত এবং বিকল্প: বিকল্পটির প্রয়োগ হিসাবে প্রথমে: প্রথমটি খুঁজে বের করার () চেয়ে দ্রুত (গণনা অনুযায়ী) হতে পারে to
ল্যান্স ক্লিভল্যান্ড

2

এটি কেবল শেষে এইভাবে ট্রিগার ('পরিবর্তন') ব্যবহার করে আমার পক্ষে কাজ করেছিল:

$("#target option:first").attr('selected','selected').trigger('change');

2

যদি আপনি প্রথম বিকল্পটি ডিফল্ট হিসাবে ব্যবহার করতে চান

<select>
    <option value="">Please select an option below</option>
    ...

তাহলে আপনি কেবল ব্যবহার করতে পারেন:

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

এটা সুন্দর এবং সহজ।



1

জেমস লি বাকেরের জবাবের পিছনে, আমি এই সমাধানটি পছন্দ করি কারণ এটি ব্রাউজারের সমর্থনের উপর নির্ভরতা সরিয়ে দেয়: প্রথম: নির্বাচিত ...

$('#target').children().prop('selected', false);
$($('#target').children()[0]).prop('selected', 'selected');

1

আমার জন্য এটি কেবল তখন কাজ করেছিল যখন আমি নিম্নলিখিত কোডটি যুক্ত করেছি:

.change();

আমার জন্য এটি কেবল তখনই কাজ করেছিল যখন আমি নিম্নলিখিত কোডটি যুক্ত করেছি: যেহেতু আমি ফর্মটি "রিসেট" করতে চেয়েছিলাম, অর্থাৎ, ফর্মের সমস্ত নির্বাচনের প্রথম বিকল্পগুলি নির্বাচন করুন, আমি নিম্নলিখিত কোডটি ব্যবহার করেছি:

$('form').find('select').each(function(){ $(this).val($("select option:first").val()); $(this).change(); });


1

ব্যবহার করুন:

$("#selectbox option:first").val()

দয়া করে এই জেএসফিডেলে কাজের সহজ সন্ধান করুন


15, 25, বা নির্দিষ্ট পাঠ্য সহ অবস্থান সম্পর্কে কী? : ডি
মার্সেলো আগিমোভেল

কল করা .val()তালিকার প্রথম বিকল্পটির মান পায়। এটি আসল প্রশ্নে জিজ্ঞাসা করা হয়নি, আসলে এটি প্রথম বিকল্পটি (নির্বাচিত করা) নির্বাচন করে না।
ফানকা

1

আমার জন্য, কেবলমাত্র যখন আমি নীচের কোডের লাইনটি যুক্ত করি তখন এটি কাজ করে

$('#target').val($('#target').find("option:first").val());


0

আপনি যদি নির্বাচিত উপাদানটির jQuery অবজেক্টটি সংরক্ষণ করছেন:

var jQuerySelectObject = $("...");

...

jQuerySelectObject.val(jQuerySelectObject.children().eq(0).val());


0

আপনি dropdownএটি ব্যবহার করে যে কোনও বিকল্প নির্বাচন করতে পারেন ।

// 'N' can by any number of option.  // e.g.,  N=1 for first option
$("#DropDownId").val($("#DropDownId option:eq(N-1)").val()); 

0

$('select#id').val($('#id option')[index].value)

আপনি নির্বাচন করতে চান এমন নির্দিষ্ট উপাদান সহ নির্দিষ্ট নির্বাচন ট্যাগ আইডি এবং সূচী দিয়ে আইডিটি প্রতিস্থাপন করুন।

অর্থাত

<select class="input-field" multiple="multiple" id="ddlState" name="ddlState">
                                        <option value="AB">AB</option>
                                        <option value="AK">AK</option>
                                        <option value="AL">AL</option>
</select>

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

$('select#ddlState').val($('#ddlState option')[0].value)

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.