jQuery সেট নির্বাচন সূচী

259

আমার একটি নির্বাচন বাক্স আছে:

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
  <option value="3">Number 3</option>
  <option value="4">Number 4</option>
  <option value="5">Number 5</option>
  <option value="6">Number 6</option>
  <option value="7">Number 7</option>
</select>

আমি এটির নির্বাচিত সূচকের ভিত্তিতে বিকল্পগুলির মধ্যে একটি "নির্বাচিত" হিসাবে সেট করতে চাই।

উদাহরণস্বরূপ, আমি যদি "3 নম্বর" সেট করার চেষ্টা করছি, আমি এটি চেষ্টা করছি:

$('#selectBox')[3].attr('selected', 'selected');

তবে এটি কাজ করে না। আমি jQuery ব্যবহার করে এর সূচীর উপর ভিত্তি করে নির্বাচিত হিসাবে কোনও বিকল্প কীভাবে সেট করতে পারি?

ধন্যবাদ!

jquery  jquery-selectors 
— বোল্টক্লক
সূত্র
2
এটি আপনার আগের প্রশ্নের মতো প্রায় একই: স্ট্যাকওভারফ্লো.com
— কোবি
— জৈব অ্যাডভোকেট

উত্তর:

451

দ্রষ্টব্য : উত্তরটি jQuery 1.6.1+ এর উপর নির্ভরশীল

$('#selectBox :nth-child(4)').prop('selected', true); // To select via index
$('#selectBox option:eq(3)').prop('selected', true);  // To select via value

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

$('#selectBox option').eq(3).prop('selected', true);

আপনি যদি নির্দিষ্ট সূচকটি বাছাইয়ের উপর নির্ভর না করে মানটি ব্যবহার করতে চান তবে আপনি আরও সংশ্লেষ / পঠনযোগ্য হতে পারেন :

$("#selectBox").val("3");

দ্রষ্টব্য: .val(3) এই উদাহরণটির জন্যও কাজ করে, তবে অ-সংখ্যাসূচক মানগুলি অবশ্যই স্ট্রিং হওয়া উচিত, তাই আমি ধারাবাহিকতার জন্য একটি স্ট্রিং বেছে নিয়েছি।
(যেমন <option value="hello">Number3</option>আপনার ব্যবহারের প্রয়োজন .val("hello"))

— আঙ্গুরের ছিরড়া
সূত্র
7
+1 - দ্বিতীয় বিকল্পটি আমার পক্ষে কাজ করেছিল। জন কুগেলম্যানের নির্বাচিত উত্তর আইআই 7 এ আমার পক্ষে কার্যকর হয়নি।
— পি.ব্রেইন.ম্যাকি
2
দুঃখের বিষয়, এই কোনও উপায়ই আমার জন্য পরিবর্তন () ইভেন্টের সূচনা করে না। আমার কাছে $ ('# সিলেক্টবক্স') রয়েছে। পরিবর্তন (ফাংশন () {সতর্কতা ('পরিবর্তিত')});
— মাইক জোন্স
28
@ মিকেজোনস - এটি ডিজাইনের মাধ্যমে। আপনি যখন প্রোগ্রামিয়ালি কোনও নির্বাচিত বিকল্প সেট করছেন, আপনি সর্বদা বাউন্ড চেঞ্জ ইভেন্টটি ট্রিগার করা নাও চান (কোনও পৃষ্ঠা লোড ইভেন্টের মতো) আপনার ক্ষেত্রে আপনি কেবল $ ('# সিলেক্টবক্স') কল করতে পারেন change পরিবর্তন (); আপনি called ('# সিলেক্টবক্স') কল করার পরে ভাল ("3");
— মার্কাস পোপ
2
প্রথম বিকল্পটি 0 বা 1?
— লি মায়াদোর
3
আমি মনে করেছি এটি উত্তরসূচক jQuery 1.6.1 উল্লেখ করা উচিত, একটি উপাদান এর বুলিয়ান বৈশিষ্ট্য পরিবর্তনের জন্য প্রস্তাবিত পদ্ধতি .prop()বরং হয় .attr()।
— ডেভলশনে
113

এটিও দরকারী হতে পারে, তাই আমি ভেবেছিলাম আমি এটি এখানে যুক্ত করব।

আপনি যদি আইটেমটির মানের উপর ভিত্তি করে কোনও মান নির্বাচন করতে চান এবং সেই আইটেমের সূচক না হয়ে থাকেন তবে আপনি নিম্নলিখিতটি করতে পারেন:

আপনার নির্বাচন তালিকা:

<select id="selectBox">
    <option value="A">Number 0</option>
    <option value="B">Number 1</option>
    <option value="C">Number 2</option>
    <option value="D">Number 3</option>
    <option value="E">Number 4</option>
    <option value="F">Number 5</option>
    <option value="G">Number 6</option>
    <option value="H">Number 7</option>
</select>

জ্যাকোয়ারি:

$('#selectBox option[value=C]').attr('selected', 'selected');

$('#selectBox option[value=C]').prop('selected', true);

নির্বাচিত আইটেমটি এখন "নম্বর 2" হবে।

— dnoxs
সূত্র
দ্রষ্টব্য: $ () এর পরে একটি অতিরিক্ত আন্ডারস্কোর রয়েছে ... অন্যথায়, এটি দুর্দান্তভাবে কাজ করে
— ডাস্টি জে
1
+1 আমি ঠিক এটি কাজ করতে পারিনি, তবে এ থেকে অবশেষে এটি নিম্নলিখিত সংশ্লেষের সাথে কাজ করতে পেরেছি: $ ("# সিলেক্টবক্স বিকল্প [মান = 'সি']") [0]। নির্বাচিত = সত্য;
— ওয়েজ গ্রান্ট
5
.attr('selected', 'selected')কিছুটা ব্রাউজার বিভ্রান্ত হতে পারে (একই সাথে তারা ডোমটিতে কয়েকটি আইটেম চিহ্নিত করতে শুরু করে selected=selected"। যদি আপনাকে নির্বাচিত মানটি আরও প্রায়শই পরিবর্তন করতে হয় তবে উদাহরণস্বরূপ একটি বোতামে) এটি একই নির্বাচনের ক্ষেত্রে কয়েকবার ব্যবহার করা উচিত নয় aware ক্লিক করুন) .prop('selected', true)মার্ক হিসাবে প্রস্তাবিত হিসাবে ব্যবহার করুন । - এই সমস্যাটির কারণে - এখন খুব ব্যথা হয়েছে - এবং সময় নষ্ট হয়েছে
— টম ফিঙ্ক
66

পরিবর্তে এটি চেষ্টা করুন:

$("#selectBox").val(3);
— ক্রিস ব্র্যান্ডসমা
সূত্র
2
এটি এক উপাদান থেকে অন্য মৃতকে অনুলিপি করে তোলে!
— সনি
টাইপো: "সিলেক্ট বক্সের পরে আপনি একটি উদ্ধৃতি মিস করছেন
— নীলস বম
1
এটি সহজ এবং সহজবোধ্য। আমি এই সমাধানটিকে অনেক বেশি পছন্দ করি।
— ড্যান বেলিফ
এটি ক্রোমে কাজ করে তবে IE9 এর সাথে আমার পক্ষে কাজ করে না। আমি ব্যবহার করি: $ ('# সিলেক্টবক্স অপশন') [3] .সেলেক্ট = সত্য; (উত্তর উত্তর)।
— সিডারলফ
FWIW, এটি আমার জন্য ক্রোমেও কাজ করে না। ": নবম-শিশু" উত্তরটি আমার পক্ষে কাজ করেছে।
— জে টেইলর 21
50

এমনকি সহজ:

$('#selectBox option')[3].selected = true;
— শন
সূত্র
1
এটি আমার পক্ষে কাজ করেছে, আমিও ভ্যালু নয়, আইএনডেক্সের মাধ্যমে নির্বাচন করা দরকার।
— অ্যালান
1
এই উত্তরটি আমাকে যা প্রয়োজন তা দিয়েছিল .. নাম অনুসারে নির্বাচন করার চেষ্টা করার সময় আমি নির্বাচকটির 'বিকল্প' অংশটি অনুপস্থিত ছিলাম ('নির্বাচন [নাম = "নির্বাচন_নাম"] বিকল্প) [সূচি]] নির্বাচিত = সত্য;
— স্মিথ স্মিথি
16 
# Set element with index
$("#select option:eq(2)").attr("selected", "selected");

# Set element by text
$("#select").val("option Text").attr("selected", "selected");

আপনি যখন সেট নির্বাচনের শীর্ষ উপায়গুলির সাথে নির্বাচন করতে চান, আপনি
$('#select option').removeAttr('selected');পূর্ববর্তী নির্বাচনগুলি মুছে ফেলার জন্য ব্যবহার করতে পারেন ।

# Set element by value
$("#select").val("2");

# Get selected text
$("#select").children("option:selected").text();  # use attr() for get attributes
$("#select option:selected").text(); # use attr() for get attributes 

# Get selected value
$("#select option:selected").val();
$("#select").children("option:selected").val();
$("#select option:selected").prevAll().size();
$("option:selected",this).val();

# Get selected index
$("#select option:selected").index();
$("#select option").index($("#select option:selected"));

# Select First Option
$("#select option:first");

# Select Last Item
$("#select option:last").remove();


# Replace item with new one
$("#select option:eq(1)").replaceWith("<option value='2'>new option</option>");

# Remove an item
$("#select option:eq(0)").remove();
— এম রোস্তামী
সূত্র
+1 এর জন্য: $ ('# বিকল্প নির্বাচন করুন') remove 'নির্বাচিত' আইটেমটি শীর্ষে ফিরতে সহজ বিকল্প, বা কোনও সংজ্ঞায়িত নির্বাচন নয়।
— মাইকেল ট্রাউ
11

কী বুঝতে গুরুত্বপূর্ণ তা হল যে val()কোনও selectউপাদানটির জন্য নির্বাচিত বিকল্পটির মান প্রদান করে তবে selectedIndexজাভাস্ক্রিপ্টের মতো উপাদানের সংখ্যা নয় ।

আপনার সাথে বিকল্পটি নির্বাচন value="7"করতে সহজভাবে ব্যবহার করতে পারেন:

$('#selectBox').val(7); //this will select the option with value 7.

বিকল্পটি অনির্বাচিত করতে খালি অ্যারে ব্যবহার করুন:

$('#selectBox').val([]); //this is the best way to deselect the options

এবং অবশ্যই আপনি একাধিক বিকল্প নির্বাচন করতে পারেন *:

$('#selectBox').val([1,4,7]); //will select options with values 1,4 and 7

* তবে একাধিক বিকল্প নির্বাচন করতে, আপনার <select>উপাদানটির একটি MULTIPLEবৈশিষ্ট্য থাকতে হবে অন্যথায় এটি কাজ করবে না।

— নামবিহীন
সূত্র
11

প্রোপ ('নির্বাচিত') নিয়ে আমার সর্বদা সমস্যা ছিল, নিম্নলিখিতগুলি সবসময় আমার জন্য কাজ করে:

//first remove the current value
$("#selectBox").children().removeAttr("selected");
$("#selectBox").children().eq(index).attr('selected', 'selected');
— hellojebus
সূত্র
8

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

$('select#mySelect').prop('selectedIndex', optionIndex);

শেষ পর্যন্ত, একটি। পরিবর্তন ইভেন্ট ট্রিগার:

$('select#mySelect').prop('selectedIndex', optionIndex).change();
— NicolasBernier
সূত্র
4

বিশেষ দ্রষ্টব্য: 

$('#selectBox option')[3].attr('selected', 'selected')

ভুল, অ্যারে ডিফারেন্স আপনাকে ডোম অবজেক্ট দেয়, জেকারি আইটেমটি দেয় না, সুতরাং এটি টাইপআরারের সাথে ব্যর্থ হবে, উদাহরণস্বরূপ এফএফ এর সাথে: "$ ('# সিলেক্টবক্স অপশন') [3] .attr () কোনও ফাংশন নয় । "

— slh777
সূত্র
4

মার্কের এবং জন কুগেলম্যানের উত্তরগুলি পরিষ্কার করতে, আপনি এটি ব্যবহার করতে পারেন:

$('#selectBox option').eq(3).attr('selected', 'selected')

get() নির্দিষ্টভাবে যদি ব্যবহার করা হয় তবে এটি কাজ করবে না কারণ এটি DOM অবজেক্ট পেয়েছে, jQuery অবজেক্ট নয়, সুতরাং নিম্নলিখিত সমাধানটি কাজ করবে না:

$('#selectBox option').get(3).attr('selected', 'selected')

eq()নির্দিষ্ট সূচী দিয়ে উপাদানটির জন্য jQuery সেট ফিল্টার পায়। এটা পরিষ্কার $($('#selectBox option').get(3))। এটি এতটা দক্ষ নয়। $($('#selectBox option')[3])আরও দক্ষ ( পরীক্ষার কেস দেখুন )।

যদিও আপনার আসলে jQuery অবজেক্টের দরকার নেই। এটি কৌশলটি করবে:

$('#selectBox option')[3].selected = true;

http://api.jquery.com/get/

http://api.jquery.com/eq/

অন্য একটি অত্যন্ত গুরুত্বপূর্ণ বিষয়:

"নির্বাচিত" বৈশিষ্ট্যটি কীভাবে আপনি নির্বাচিত রেডিও বোতামটি নির্দিষ্ট করেন না (ফায়ারফক্স এবং ক্রোমে অন্তত)। "পরীক্ষিত" বৈশিষ্ট্যটি ব্যবহার করুন:

$('#selectBox option')[3].checked = true;

চেক-বাক্সগুলির জন্য একই।

— Spycho
সূত্র
4

১.৪.৪ এ আপনি একটি ত্রুটি পেয়েছেন: $ ("# সিলেক্টবক্স অপশন") [৩] .এটিআরটি কোনও ফাংশন নয়

এইটা কাজ করে: $('#name option:eq(idx)').attr('selected', true);

#nameনির্বাচন করা আইডিটি কোথায় এবং idxআপনি পছন্দ করতে চান বিকল্প বিকল্প।

— মিকাঃ ফ্লেচার
সূত্র
4

খাঁটি জাভাস্ক্রিপ্ট সিলেক্ট ইনডেক্স অ্যাট্রিবিউট হ'ল সঠিক উপায় কারণ এটি খাঁটি জাভাস্ক্রিপ্ট এবং ক্রস ব্রাউজারে কাজ করে:

$('#selectBox')[0].selectedIndex=4;

এখানে দুটি ড্রপডাউন সহ অন্যটি সেট করতে একটি জসফিডাল ডেমো রয়েছে:

<select onchange="$('#selectBox')[0].selectedIndex=this.selectedIndex">
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
</select>

আপনি যা চান সেটি অপশন ট্যাগের "নির্বাচিত" অ্যাট্রিবিউটটি থাকলে ( এখানে ফ্রিডালটি দেওয়া আছে ) আপনি নির্বাচিত ইনডেক্স পরিবর্তন করার আগেও এই কল করতে পারেন :

$('#selectBox option').removeAttr('selected')
   .eq(this.selectedIndex).attr('selected','selected');
— jacmkno
সূত্র
2 
//funcion para seleccionar por el text del select
var text = '';
var canal = ($("#name_canal").val()).split(' ');
$('#id_empresa option').each(function(i, option) {
        text = $('#id_empresa option:eq('+i+')').text();
        if(text.toLowerCase() == canal[0].toLowerCase()){
            $('#id_empresa option:eq('+i+')').attr('selected', true);
        }
    });
— andrwsv
সূত্র
2

আমি প্রায়শই এটি কার্যকর করতে ট্রিগার ('পরিবর্তন') ব্যবহার করি

$('#selectBox option:eq(position_index)').prop('selected', true).trigger('change');

আইডি সিলেক্ট করুন = সিলেক্টড এ 1 এবং পজিশন ইনডেক্স = 0 (সিলেক্ট ফ্রাইস্ট অপশন):

$('#selectA1 option:eq(0)').prop('selected', true).trigger('change');
— ল্য থানহ এনজিও
সূত্র
1 
$('#selectBox option').get(3).attr('selected', 'selected')

উপরেরটি ব্যবহার করার সময় আমি ওয়েবকিটটিতে (ক্রোম) এই বলে ত্রুটি পেতে থাকি:

"আনকাচড টাইপ এরির: অবজেক্ট # এর কোনও পদ্ধতি 'অ্যাটর' নেই"

এই বাক্য গঠনটি ত্রুটিগুলি থামিয়ে দেয়। 

$($('#selectBox  option').get(3)).attr('selected', 'selected');
— benembery
সূত্র
1

নির্বাচিত তালিকার মানটির উপর ভিত্তি করে আইটেমটি নির্বাচন করুন (বিশেষত বিকল্পের মানগুলিতে যদি কোনও জায়গা বা অদ্ভুত অক্ষর থাকে তবে) কেবল এটি করে:

$("#SelectList option").each(function () {
    if ($(this).val() == "1:00 PM")
        $(this).attr('selected', 'selected');
});

এছাড়াও, যদি আপনার একটি ড্রপডাউন থাকে (একাধিক নির্বাচনের বিপরীতে) আপনি break;এমনটি করতে চাইতে পারেন যাতে আপনি প্রথম-মান-ওভাররাইট করা হবে না।

— Nexxas
সূত্র
1

আমার এমন একটি সমাধান দরকার যা জেএস ফাইলটিতে কোনও হার্ড কোডিং মান নেই; ব্যবহার selectedIndex। প্রদত্ত সমাধানগুলির বেশিরভাগই একটি ব্রাউজারকে ব্যর্থ করে। এটি FF10 এবং IE8 এ কাজ করে বলে মনে হচ্ছে (অন্য সংস্করণে অন্য কেউ পরীক্ষা করতে পারে)

$("#selectBox").get(0).selectedIndex = 1;
— জাঁ মার্ক
সূত্র
1

আপনি যদি কেবল কোনও আইটেমের নির্দিষ্ট বৈশিষ্ট্যের উপর ভিত্তি করে কোনও আইটেম নির্বাচন করতে চান তবে [প্রপ = ভ্যাল] প্রকারের jQuery বিকল্পটি সেই আইটেমটি পাবে। এখন আমি সূচকটি সম্পর্কে চিন্তা করি না আমি কেবল আইটেমটির মান দিয়ে চেয়েছিলাম।

$('#mySelect options[value=3]).attr('selected', 'selected');
— codeguy
সূত্র
1

আমিও একই সমস্যার মুখোমুখি হয়েছি। প্রথমে আপনাকে ইভেন্টগুলির মধ্য দিয়ে যেতে হবে (অর্থাত্ প্রথম কোন ইভেন্টটি ঘটছে)।

উদাহরণ স্বরূপ:

প্রথম ঘটনা বিকল্প সহ নির্বাচন বক্স উৎপাদিত হয়।

দ্বিতীয় ঘটনাটি এমন Val কোন ফাংশন ব্যবহার করে ডিফল্ট বিকল্প () ইত্যাদি নির্বাচন করা হয়

আপনার অবশ্যই নিশ্চিত হওয়া উচিত যে দ্বিতীয় ইভেন্টটি প্রথম ইভেন্টের পরে ঘটবে ।

এই নাও দুটি ফাংশন বলে দেয় অর্জন generateSelectbox () নির্বাচন (বক্স genrating জন্য) selectDefaultOption ()

আপনি তা নিশ্চিত করার জন্য প্রয়োজন selectDefaultOption () বলা উচিত শুধুমাত্র সঞ্চালনের পর (generateSelectbox)

— মনি
সূত্র
0

আপনি পরিবর্তনশীল মান পরিবর্তনশীল হিসাবে সেট করতে পারেন পাশাপাশি বিকল্প নির্বাচন করা হবে You আপনি কোড অনুসরণ করার চেষ্টা করতে পারেন

কোড:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

      $(function(){
            $('#allcheck').click(function(){
             // $('#select_option').val([1,2,5]);also can use multi selectbox
              // $('#select_option').val(1);
               var selectoption=3;
           $("#selectBox>option[value="+selectoption+"]").attr('selected', 'selected');
    });

});

এইচটিএমএল কোড:

   <select id="selectBox">
       <option value="0">Number 0</option>
       <option value="1">Number 1</option>
       <option value="2">Number 2</option>
       <option value="3">Number 3</option>
       <option value="4">Number 4</option>
       <option value="5">Number 5</option>
       <option value="6">Number 6</option>
       <option value="7">Number 7</option>
 </select> <br>
<strong>Select&nbsp;&nbsp; <a style="cursor:pointer;" id="allcheck">click for select option</a></strong>

— রাম লখন যাদব
সূত্র
-2

কিছুদিন:

$("#selectBox").attr("selectedIndex",index)

যেখানে সূচকটি পূর্ণসংখ্যা হিসাবে নির্বাচিত সূচক।

— Csaba
সূত্র
এই কোড $ ( '# selectBox') কাজ করে ঠেকনা ({selectedIndex: desiredIndex})।
— jurijcz
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.