নির্বাচিত বাক্সের নির্বাচিত বিকল্প সেট করুন


352

আমি এমন একটি বিকল্প সেট করতে চাই যা পৃষ্ঠা লোডে প্রদর্শিত হতে আগে নির্বাচিত হয়েছিল। আমি নিম্নলিখিত কোড দিয়ে চেষ্টা করেছিলাম:

$("#gate").val('Gateway 2');

সঙ্গে

<select id="gate">
    <option value='null'>- choose -</option>
    <option value='gateway_1'>Gateway 1</option>
    <option value='gateway_2'>Gateway 2</option>
</select>

কিন্তু এই কাজ করে না। কোন ধারনা?


10
বাস্তবে এটি কীভাবে কাজ করা উচিত, আপনি কী ডকুমেন্টে মান সেট করার বিষয়ে নিশ্চিত? প্রস্তুতি ()? নির্বাচন কোডটি এখনও প্রস্তুত না হলে কোডটি কার্যকর করা হবে।
মরফ

উত্তর:


495

এটি অবশ্যই কাজ করা উচিত। এখানে একটি ডেমো রয়েছে । আপনি নিজের কোডটি একটিতে রেখেছেন তা নিশ্চিত করুন $(document).ready:

$(function() {
    $("#gate").val('gateway_2');
});

4
ঠিক আছে, আমি তালিকাটি বাদ দিলে তা হাইলাইট করা হয় তবে তালিকার প্রথম উপাদান হিসাবে প্রদর্শিত হয় না
113

2
আহ আমি এটিকে ডকুমেন্টের প্রস্তুত ফাংশনে ঘোষণা করি নি ... ধন্যবাদ!

7
"সিলেক্টেড" এ "সিলেক্টড" এ্যাট্রিবিউট সেট করার মতো ভাল নয়।
অ্যাডাল

6
@ অ্যাডাল কেন এটি 'নির্বাচিত' এ 'সিলেক্টেড' এ্যাট্রিবিউট সেট করার মতো ভাল নয়?
শান

26
অন্য কেউ যদি অবাক 'Gateway 2'হয়ে যায় তবে ফাংশনটিতে পাস করা তার বিকল্পের সাথে নির্বাচিত বিকল্পটির বৈশিষ্ট্যের valমানের সাথে মেলে value। আমি কী বলতে চাইছি তার উদাহরণের জন্য এই জেএসফিডালটি দেখুন , যা ডারিনের ডেমোর খুব হালকা সম্পাদিত সংস্করণ।
কেনি এভিট

166
$(document).ready(function() {
    $("#gate option[value='Gateway 2']").prop('selected', true);
    // you need to specify id of combo to set right combo, if more than one combo
});

37

$('#gate').val('Gateway 2').prop('selected', true);


2
$('#your-select-box-id :nth-child(2)').prop('selected', true)ড্রপ-বাক্সের ভিজ্যুয়াল আপডেটের সাথে যা কাজ করে তার সাথে খুব মিল ।
বড় সমৃদ্ধ

আমার পক্ষে কাজ করেছে এমন একজনই। সন্দেহযুক্ত কারণ আমি একটি পছন্দসই নির্বাচন লাইব্রেরি ব্যবহার করছি।
লুই এম।

15

আমি jQuery .val () পদ্ধতিটি ব্যবহার করে একটি গুরুত্বপূর্ণ অপূর্ণতা পেয়েছি।

<select id="gate"></select>
$("#gate").val("Gateway 2");

যদি এই নির্বাচন বাক্সটি (বা অন্য কোনও ইনপুট অবজেক্ট) কোনও ফর্মে থাকে এবং ফর্মটিতে একটি রিসেট বোতাম ব্যবহৃত হয়, যখন রিসেট বোতামটি ক্লিক করা হবে তখন সেট মানটি সাফ হয়ে যাবে এবং আপনার প্রত্যাশা অনুযায়ী প্রারম্ভিক মানটিতে পুনরায় সেট হবে না।

এটি আমার পক্ষে সবচেয়ে ভাল কাজ করে বলে মনে হচ্ছে।

নির্বাচন বাক্সের জন্য

<select id="gate"></select>
$("#gate option[value='Gateway 2']").attr("selected", true);

পাঠ্য ইনপুট জন্য

<input type="text" id="gate" />
$("#gate").attr("value", "your desired value")

টেক্সেরিয়া ইনপুটগুলির জন্য

<textarea id="gate"></textarea>
$("#gate").html("your desired value")

চেকবক্স বাক্সগুলির জন্য

<input type="checkbox" id="gate" />
$("#gate option[value='Gateway 2']").attr("checked", true);

রেডিও বোতামের জন্য

<input type="radio" id="gate" value="this"/> or <input type="radio" id="gate" value="that"/>
$("#gate[value='this']").attr("checked", true);

12
  $("#form-field").val("5").trigger("change");

1
আপনি যদি এর চারপাশে কিছু তথ্য অন্তর্ভুক্ত করেন তবে ভাল হত। এটি কীভাবে করা উচিত তার একটি দুর্দান্ত উদাহরণ, যদি আপনার কাছে কোড রয়েছে যা নির্বাচনের পরিবর্তনের জন্য পর্যবেক্ষণ করছে।
sean.boyer

6

এটা ঠিক কাজ করে। এই ঝাঁকুনি দেখুন: http://jsfiddle.net/kveAL/

এটি সম্ভব যে আপনি কোনও $(document).ready()হ্যান্ডলারের মধ্যে আপনার jQuery ঘোষণা করতে হবে ?

এছাড়াও, আপনার আইডি থাকতে পারে এমন দুটি উপাদান থাকতে পারে?



6

আমারও একই সমস্যা ছিল।

সমাধান: একটি রিফ্রেশ যুক্ত করুন।

$("#gate").val('Gateway 2');
$("#gate").selectmenu('refresh');

3
এটি কেবল জ্যাকুয়েরই সিলেকম্যানু-র জন্য, মানক এইচটিএমএল নয়
স্টুয়ার্টডটনেট

3

আমি জানি যে উত্তরগুলির বিভিন্ন পুনরাবৃত্তি রয়েছে তবে এখন এর জন্য jquery বা অন্য কোনও বাহ্যিক গ্রন্থাগার প্রয়োজন হয় না এবং কেবল নীচের সাথে খুব সহজেই সম্পাদন করা যায়।

document.querySelector("#gate option[value='Gateway 2']").setAttribute('selected',true);
<select id="gate">
    <option value='null'>- choose -</option>
    <option value='Gateway 1'>Gateway 1</option>
    <option value='Gateway 2'>Gateway 2</option>
</select>


দুর্দান্ত সমাধান তবে দেখে মনে হচ্ছে এটি পূর্বে নির্বাচিত বিকল্পগুলি থেকে নির্বাচিত বৈশিষ্ট্যটিকে সরিয়ে দেয় না
ঘন্টা

3

কিছু ক্ষেত্রে হতে পারে

$('#gate option[value='+data.Gateway2+']').attr('selected', true);

1

আমার সমস্যা

get_courses(); //// To load the course list
$("#course").val(course); //// Setting default value of the list

আমারও একই প্রশ্ন ছিল . আপনার কোড থেকে একমাত্র পার্থক্য হ'ল আমি একটি এজ্যাক্স কলের মাধ্যমে নির্বাচিত বাক্সটি লোড করছি এবং অজ্যাক্স কলটি কার্যকর হওয়ার সাথে সাথেই আমি নির্বাচিত বাক্সটির ডিফল্ট মান সেট করেছিলাম

সমাধান

get_courses();
   setTimeout(function() {
     $("#course").val(course);
  }, 10);

1
আপনি সমস্যাটি সঠিকভাবে বিশ্লেষণ করেছেন, তবে সমাধানটি খারাপ এবং ভঙ্গুর। আপনাকে আপনার
অজ্যাক্স কলটির

-1

আমার একটি সমস্যা হয়েছিল যেখানে কলটির আগে একটি সিনট্যাক্স ত্রুটির কারণে মানটি সেট করা হয়নি।

$("#someId").value(33); //script bailed here without showing any errors Note: .value instead of .val
$("#gate").val('Gateway 2'); //this line didn't work.

কল করার আগে সিনট্যাক্স ত্রুটিগুলি পরীক্ষা করুন।


4
সিনট্যাক্স ত্রুটিগুলি যাচাইয়ের জন্য এটি মনে করিয়ে দেওয়া যতটা দরকারী, এটি কোনও উত্তর নয়।
শটগান নিনজা


-2
// Make option have a "selected" attribute using jQuery

var yourValue = "Gateway 2";

$("#gate").find('option').each(function( i, opt ) {
    if( opt.value === yourValue ) 
        $(opt).attr('selected', 'selected');
});

1
এটি নির্বাচিত মানকে
ছাড়িয়ে যাবে

.attr()এই উত্তরটি পোস্ট হওয়ার আগে থেকেই প্লাস এটির পক্ষে ভুল উপায়।
অ্যাসপেক্স

-2

@ রিক্সে এবং @ কোরাহ যোগ করুন (উভয়ই!)

এজেএক্সের সাহায্যে অপশনগুলি তৈরি করার সময় নথিটি ready প্রস্তুতি তালিকা তৈরির আগেই ট্রিগার হতে পারে, তাই

এটি কাজ করে না

$(document).ready(function() {
    $("#gate").val('Gateway 2');
});

এটা করে

একটি সময়সীমা কাজ করে তবে @ রিক্সডে যেমন বলা হয়েছে এটি ভঙ্গুর (আমার আসলে 10 মিমি অবধি 20 মিমি দরকার ছিল)। এটি এজেএক্স ফাংশনের মতো এটি ফিট করা ভাল:

$("#someObject").change(function() {
    $.get("website/page.php", {parameters}, function(data) {
        $("#gate").append("<option value='Gateway 2'">" + "Gateway 2" + "</option>");
        $("#gate").val('Gateway 2');
    }, "json");
});
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.