JQuery সহ একটি ড্রপ-ডাউন তালিকার নির্বাচিত মান পরিবর্তন করুন

Question

জ্ঞাত মান সহ আমার একটি ড্রপ-ডাউন তালিকা রয়েছে। আমি যা করার চেষ্টা করছি তা হ'ল ড্রপ ডাউন তালিকাটি একটি নির্দিষ্ট মানতে সেট করা যা আমি জানি যে jQuery ব্যবহার করে বিদ্যমান । নিয়মিত জাভাস্ক্রিপ্ট ব্যবহার করে আমি এমন কিছু করব:

ddl = document.getElementById("ID of element goes here");
ddl.value = 2; // 2 being the value I want to set it too.

তবে, আমার jQuery দিয়ে এটি করা দরকার , কারণ আমি আমার নির্বাচক (বোকা ASP.NET ক্লায়েন্ট আইডি ...) এর জন্য একটি সিএসএস ক্লাস ব্যবহার করছি ।

আমি চেষ্টা করেছি এমন কয়েকটি জিনিস এখানে:

$("._statusDDL").val(2); // Doesn't find 2 as a value.
$("._statusDDL").children("option").val(2) // Also failed.

আমি কীভাবে এটি jQuery দিয়ে করতে পারি ?

---

হালনাগাদ

এটি সক্রিয় হিসাবে, আমার সাথে এটি প্রথমবার ছিল:

$("._statusDDL").val(2);

আমি যখন ঠিক উপরে একটি সতর্কতা রাখি তখন এটি ঠিকঠাক কাজ করে তবে আমি যখন সতর্কতাটি সরিয়ে ফেলে এবং এটি পুরো গতিতে চালাতে দেই তখন আমি ত্রুটিটি পাই

নির্বাচিত সম্পত্তি সেট করা যায়নি। অবৈধ সূচক

আমি নিশ্চিত নই যে এটি jQuery বা ইন্টারনেট এক্সপ্লোরার 6 এর সাথে একটি বাগ (আমি ইন্টারনেট এক্সপ্লোরার 6 অনুমান করছি ), তবে এটি মারাত্মক বিরক্তিকর।

Comments

এখানে সমস্যাটি আই 6 এর সাথে একটি সমস্যা হিসাবে শেষ হয়েছিল। আমি নির্বাচিত উপাদানটির জন্য নতুন বিকল্প উপাদান তৈরি করছিলাম এবং তারপরে সদ্য নির্মিত বিকল্প বিকল্পগুলির মধ্যে একটিতে মান সেট করার চেষ্টা করছি। আইও 6 ভুলভাবে অপেক্ষা করে যতক্ষণ না এটি স্ক্রিপ্ট থেকে নিয়ন্ত্রণ ফিরে না পেয়ে ডমটিতে নতুন কার্যকর উপাদানগুলি কার্যকরভাবে তৈরি করতে কার্যকরভাবে ঘটেছিল তা হ'ল আমি ড্রপ ডাউন তালিকাগুলি এখনও বিদ্যমান ছিল না এমনগুলির মধ্যে সেট করার চেষ্টা করছিলাম, যদিও তাদের থাকা উচিত ছিল।

— ফাইরোহ

আপনি খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করতে পারেনdd1 = document.getElementsByClassName('classname here'); dd1.value = 2;

— ব্যবহারকারী 2144406

javascripttstutorial.com/blog/…

Answer 1

jQuery এর ডকুমেন্টেশন বলে:

[jQuery.val] সমস্ত রেডিও বোতাম, চেকবাক্সগুলি পরীক্ষা করে বা নির্বাচন করে এবং মানগুলির সেটের সাথে মেলে এমন বিকল্পগুলি নির্বাচন করে।

এই আচরণটি jQueryসংস্করণে 1.2এবং তারপরে রয়েছে।

আপনি সম্ভবত এটি চান:

$("._statusDDL").val('2');

Comments

এই কাজটি কি selectগোপন থাকলে ( display: none;)? আমি এটি ঠিক কাজ করতে পারি না ...

— প্যাডেল

এটি আমাকে $('._statusDDL [value="2"]').attr('selected',true);ধন্যবাদ মত স্টাফ লেখার থেকে বাঁচিয়েছে !

— তুলসী

@ নর্দেস যা নির্বাচিত মান প্রাপ্ত হলে কেস হবে। এই ক্ষেত্রে এটি নির্বাচিত মানটি বা আরও সঠিকভাবে, নির্বাচিত বিকল্পটি সেট করছে setting

— জন পি

@ জেএল: .change()ড্রপডাউন তালিকার সামনের অংশে বিকল্পটি দেখতে আপনাকে যুক্ত করতে হবে, যেমন$('#myID').val(3).change();

— কাই নোক

চেইন অফ দ্য চেঞ্জ () পরিবর্তন করতে হবে। আমি ভেবেছিলাম মন্তব্যগুলির মাধ্যমে না পড়া পর্যন্ত আমি এই সমাধানটি কাজ না করে উন্মাদ হয়ে যাচ্ছি।

— ডেভিড বাউকুম

Answer 2

লুকানো ক্ষেত্রের সাথে আপনার এটি ব্যবহার করতে হবে:

$("._statusDDL").val(2);
$("._statusDDL").change();

অথবা

$("._statusDDL").val(2).change();

Comments

আপনি দয়া করে ব্যাখ্যা করতে পারেন কেন লুকানো ক্ষেত্রগুলির জন্য আপনাকে কেন ঘটনাস্থলের পরিবর্তন দরকার?

— স্যামুয়েল

@ সামুয়েল: কারণ আপনি যদি jQuery এর সাহায্যে একটি নির্বাচনের নির্বাচিত বিকল্প পরিবর্তন করেন তবে পরিবর্তনটি ট্রিগার হয় না, সুতরাং একটি ম্যানুয়াল ট্রিগার প্রয়োজন।

— মেশিনাদিক্ট

ড্রপবক্সের মান পরিবর্তন করার পরে যদি আপনার পরিবর্তনের ইভেন্টের দরকার হয় তবে মান নির্ধারণের পরে আপনাকে পরিবর্তন ফাংশনটি কল করতে হবে।

— tver3305

আমার পরিবর্তনের ঘটনাটি আগুনের জন্য বিশেষত প্রয়োজন তাই এটি আমার পক্ষে সবচেয়ে সহায়ক

— রোহান

Answer 3

কেবল একটি এফওয়াইআই, এটি সম্পাদন করার জন্য আপনার সিএসএস ক্লাস ব্যবহার করার দরকার নেই।

ক্লায়েন্টের সঠিক নিয়ন্ত্রণের নাম পেতে আপনি নিম্নলিখিত কোডের লাইনটি লিখতে পারেন:

$("#<%= statusDDL.ClientID %>").val("2");

এএসপি.এনইটি নিয়ন্ত্রণ আইডিটিকে jQuery এর মধ্যে সঠিকভাবে রেন্ডার করবে।

Comments

এটি কেবল তখনই কাজ করে যখন আপনার জাভাস্ক্রিপ্টটি। এসপিএক্স বা .্যাসাক্স মার্কআপের অভ্যন্তরে রয়েছে এবং যখন এটি জেএসএস ফাইলে নেই তেমন নয় here এছাড়াও, আপনার প্রয়োগগুলিতে আপনার নিয়ন্ত্রণগুলি কত গভীরভাবে বাসা বেঁধেছে তার উপর নির্ভর করে (আমার ক্ষেত্রে তারা প্রায় 10 স্তর গভীর ছিল) ক্লায়েন্টআইডি অবিশ্বাস্যভাবে দীর্ঘ হতে পারে এবং খুব বেশি উদারভাবে ব্যবহার করা হলে প্রকৃতপক্ষে আপনার জাভাস্ক্রিপ্টের আকারে উল্লেখযোগ্য ব্লোট যুক্ত করতে পারে। আমি আমার মার্কআপটিকে যতটা সম্ভব ছোট রাখার চেষ্টা করি, যদি সম্ভব হয়।

— ফাইরোহ

@ y0mbo তবে আপনি এমভিসিতে চলে গেলেও আপনার জাভাস্ক্রিপ্টের জন্য আপনার বাহ্যিক .JS ফাইলগুলি ব্যবহার করা উচিত যাতে ব্রাউজারগুলি এবং প্রক্সি সার্ভারগুলি পারফরম্যান্সের জন্য এটি ক্যাশে করতে পারে।

— 7wp

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

— লয়েডফিলিপস

যদি আপনি ওও-স্টাইলের জাভাস্ক্রিপ্ট তৈরি করেন তবে আপনি আপনার ক্লায়েন্ট আইডিগুলি আপনার অবজেক্টের কনস্ট্রাক্টরে পাস করতে পারেন। অবজেক্ট কোড সমস্তই একটি বাহ্যিক জেএস ফাইলে থাকে তবে আপনি এটিকে আপনার এসপেক্স কোড থেকে ইনস্ট্যান্ট করেন।

— মাইকসিগ

আমি শীঘ্রই এএসপি নিয়ন্ত্রণগুলিতে ক্লায়েন্টআইডিএমড = "স্ট্যাটিক" সেট করব যাতে আপনি জানেন যে IDটি আপনার নির্দিষ্ট করা আইডি হবে। আপনি যদি সেই নিয়ন্ত্রণটি কোনও পুনরায় পুনরায় স্থাপন করতে চান তবে আপনাকে সতর্কতা অবলম্বন করতে হবে। msdn.microsoft.com/en-us/library/…

— শাওসন

Answer 4

শুধু চেষ্টা করুন

$("._statusDDL").val("2");

এবং সাথে না

$("._statusDDL").val(2);

Answer 5

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

ঘটনাটি যদি না হয় তবে বিষয়গুলি আরও জটিল।

করার পড়া একটি ড্রপ ডাউন তালিকা নির্বাচিত সূচক, আপনি এই ব্যবহার করবেন:

$("#dropDownList").prop("selectedIndex");

করতে সেট একটি ড্রপ ডাউন তালিকা নির্বাচিত সূচক, আপনি এই ব্যবহার করবেন:

$("#dropDownList").prop("selectedIndex", 1);

নোট করুন যে প্রোপ বৈশিষ্ট্যটির জন্য JQuery v1.6 বা তার পরে প্রয়োজন।

আসুন দেখুন কীভাবে আপনি এই দুটি ফাংশন ব্যবহার করবেন।

ধরুন আপনার কাছে মাসের নামের তালিকা রয়েছে।

<select id="listOfMonths">
  <option id="JAN">January</option>
  <option id="FEB">February</option>
  <option id="MAR">March</option>
</select>

আপনি একটি "পূর্ববর্তী মাস" এবং "পরবর্তী মাস" বোতাম যুক্ত করতে পারেন, যা বর্তমানে নির্বাচিত ড্রপ ডাউন তালিকার আইটেমটি দেখায় এবং এটি আগের / পরের মাসে পরিবর্তন করে:

<button id="btnPrevMonth" title="Prev" onclick="btnPrevMonth_Click();return false;" />
<button id="btnNextMonth" title="Next" onclick="btnNextMonth_Click();return false;" />

এবং এখানে জাভাস্ক্রিপ্ট যা এই বোতামগুলি চালিত হবে:

function btnPrevMonth_Click() {
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    if (selectedIndex > 0) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex - 1);
    }
}
function btnNextMonth_Click() {
    //  Note:  the JQuery "prop" function requires JQuery v1.6 or later
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    var itemsInDropDownList = $("#listOfMonths option").length;

    //  If we're not already selecting the last item in the drop down list, then increment the SelectedIndex
    if (selectedIndex < (itemsInDropDownList - 1)) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex + 1);
    }
}

JSON ডেটা সহ কীভাবে একটি ড্রপ ডাউন তালিকা তৈরি করতে হবে তা দেখানোর জন্য নিম্নলিখিত সাইটটিও দরকারী is

http://mikesknowledgebase.com/pages/Services/WebServices-Page8.htm

ভাই !!

আশাকরি এটা সাহায্য করবে.

Answer 6

কিছু সমাধান দেখার পরে, এটি আমার পক্ষে কাজ করেছিল।

আমার কাছে কয়েকটি মান সহ একটি ড্রপ-ডাউন তালিকা রয়েছে এবং আমি অন্য ড্রপ-ডাউন তালিকা থেকে একই মানটি নির্বাচন করতে চাই ... সুতরাং প্রথমে আমি selectIndexআমার প্রথম ড্রপ-ডাউনের একটি ভেরিয়েবল রাখি।

var indiceDatos = $('#myidddl')[0].selectedIndex;

তারপরে, আমি আমার দ্বিতীয় ড্রপ-ডাউন তালিকায় সেই সূচকটি নির্বাচন করি।

$('#myidddl2')[0].selectedIndex = indiceDatos;

বিঃদ্রঃ:

আমি অনুমান করি এটি হ'ল সংক্ষিপ্ত, নির্ভরযোগ্য, সাধারণ এবং মার্জিত সমাধান।

কারণ আমার ক্ষেত্রে, আমি মান বৈশিষ্ট্যের পরিবর্তে নির্বাচিত বিকল্পের ডেটা অ্যাট্রিবিউট ব্যবহার করছি। সুতরাং প্রতিটি বিকল্পের জন্য যদি আপনার অনন্য মূল্য না থাকে তবে উপরের পদ্ধতিটি হ'ল সংক্ষিপ্ত এবং মিষ্টি !!

Comments

এটি সঠিক উত্তর, এবং প্রত্যেকে 'সিলেক্ট ইন্ডেক্স' তাত্ক্ষণিকভাবে বলেন নি, তাদের আরও ভাল জানা উচিত। হুররে ডোম এপিআই এবং সেই লোকেরা যারা এটি লিখেছিল পাথরের যুগে।

— vsync

Answer 7

আমি জানি এটি একটি পুরানো প্রশ্ন এবং উপরোক্ত সমাধানগুলি কিছু ক্ষেত্রে বাদে ঠিক কাজ করে।

মত

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

সুতরাং আইটেম 4 ব্রাউজারে "নির্বাচিত" হিসাবে প্রদর্শিত হবে এবং এখন আপনি 3 হিসাবে মান পরিবর্তন করতে এবং "আইটেম 3" আইটেম 4 এর পরিবর্তে নির্বাচিত হিসাবে দেখাতে চান। উপরের সমাধানগুলি অনুসারে যদি আপনি ব্যবহার করেন তবে

jQuery("#select_selector").val(3);

আপনি সেই আইটেমটি ব্রাউজারে নির্বাচিত হিসাবে দেখতে পাবেন B তবে আপনি যখন পিএইচপি বা এস্পে ডেটা প্রক্রিয়াকরণ করবেন, আপনি নির্বাচিত মানটি "4" হিসাবে পাবেন reason কারণ, আপনার এইচটিএমএল দেখতে এটির মতো দেখাবে।

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3" selected="selected">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

এবং এটি বিভাজন পাশের ভাষায় "4" হিসাবে শেষ মানটি পায়।

এই রেগার্ডে আমার শেষ সমাধান

newselectedIndex = 3;
jQuery("#select_selector option:selected").removeAttr("selected");
jQuery("#select_selector option[value='"+newselectedIndex +"']").attr('selected', 'selected');  

সম্পাদনা : "+ newselectedIndex +" এর আশেপাশে একক উদ্ধৃতি যুক্ত করুন যাতে একই কার্যকারিতা অ-সংখ্যাসূচক মানের জন্য ব্যবহৃত হতে পারে।

সুতরাং আমি যা করি তা হল নির্বাচিত বৈশিষ্ট্যটি সরানো এবং তারপরে নতুনটিকে নির্বাচিত হিসাবে তৈরি করুন।

আমি @ স্ট্রেজার, @ y0mbo, @ISIK এবং অন্যদের মতো সিনিয়র প্রোগ্রামারদের কাছ থেকে এ সম্পর্কে মন্তব্যগুলির প্রশংসা করব

Answer 8

যদি আমাদের কাছে "ডেটা শ্রেণিবদ্ধকরণ" শিরোনাম সহ ড্রপডাউন থাকে:

<select title="Data Classification">
    <option value="Top Secret">Top Secret</option>
    <option value="Secret">Secret</option>
    <option value="Confidential">Confidential</option>
</select>

আমরা এটিকে একটি পরিবর্তনশীল হিসাবে পেতে পারি:

var dataClsField = $('select[title="Data Classification"]');

তারপরে অন্য ভেরিয়েবলের মানটি ড্রপডাউনটিতে রাখতে চাই:

var myValue = "Top Secret";  // this would have been "2" in your example

তারপরে আমরা যে ক্ষেত্রটি রেখেছি তা ব্যবহার করতে পারি, এটির dataClsFieldজন্য একটি অনুসন্ধান myValueকরতে এবং এটি ব্যবহার করে নির্বাচন করতে পারি .prop():

dataClsField.find('option[value="'+ myValue +'"]').prop('selected', 'selected');

অথবা, আপনি কেবল ব্যবহার করতে পারেন .val(), তবে আপনার নির্বাচকটি .কেবল তখনই ব্যবহার করা যেতে পারে যদি এটি ড্রপডাউনটিতে কোনও শ্রেণীর সাথে মেলে এবং আপনার প্রথম বন্ধকের অভ্যন্তরের মানটির সাথে উদ্ধৃতি ব্যবহার করা উচিত, বা আমরা আগে সেট করা পরিবর্তনশীলটি ব্যবহার করতে পারি:

dataClsField.val(myValue);

Answer 9

সুতরাং আমি এটি পরিবর্তন করেছি যাতে এটি এখন সেটটাইমআউট ব্যবহার করে 300 মিলিসেকেন্ড পরে কার্যকর করে। এখন কাজ করা বলে মনে হচ্ছে।

একটি অ্যাজাক্স কল থেকে ডেটা লোড করার সময় আমি এটিতে বহুবার চলে এসেছি। আমিও। নেট ব্যবহার করি এবং jQuery নির্বাচনকারী ব্যবহার করার সময় ক্লায়েন্টআইডের সাথে সামঞ্জস্য হতে সময় লাগে। আপনার যে সমস্যাটি হচ্ছে তা সংশোধন করতে এবং কোনও setTimeoutসম্পত্তি যুক্ত করা এড়াতে , আপনি কেবল " async: false" অ্যাজাক্স কলটিতে রাখতে পারেন, এবং এটি ডিওমকে আপনার নির্বাচিত সামগ্রীতে যুক্ত হওয়া জিনিসগুলি ফিরে পেতে যথেষ্ট সময় দেবে। নীচে একটি ছোট নমুনা:

$.ajax({
    type: "POST",
    url: document.URL + '/PageList',
    data: "{}",
    async: false,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        var pages = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

        $('#locPage' + locId).find('option').remove();

        $.each(pages, function () {
            $('#locPage' + locId).append(
                $('<option></option>').val(this.PageId).html(this.Name)
            );
        });
    }
});

Answer 10

কেবল একটি নোট - এএসপি.নেট ক্লায়েন্ট আইডি দ্বারা অবরুদ্ধ আইটেমগুলি দখল করতে আমি jQuery এ ওয়াইল্ডকার্ড নির্বাচনকারীদের ব্যবহার করছি - এটি আপনাকেও সহায়তা করতে পারে:

<asp:DropDownList id="MyDropDown" runat="server" />

$("[id* = 'MyDropDown']").append("<option value='-1'>&nbsp;</option>"); //etc

আইডি * ওয়াইল্ডকার্ডটি নোট করুন - নামটি "ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ মাইড্রপডাউন" হলেও এটি আপনার উপাদানটি সন্ধান করবে

Answer 11

আমি ক্লায়েন্ট আইডিগুলি পেতে এর জন্য একটি বর্ধিত ফাংশন ব্যবহার করি:

$.extend({
    clientID: function(id) {
        return $("[id$='" + id + "']");
    }
});

তারপরে আপনি এ জাতীয় jQuery এএসপি.নেট নিয়ন্ত্রণগুলি কল করতে পারেন:

$.clientID("_statusDDL")

Answer 12

অন্য বিকল্পটি হ'ল। নেট এ নিয়ন্ত্রণ প্যারাম ক্লায়েন্টআইডি = "স্ট্যাটিক" সেট করা এবং তারপরে আপনি যে আইডি সেট করেছেন তার দ্বারা আপনি জিকুয়ারিতে অবজেক্টটি অ্যাক্সেস করতে পারবেন।

Answer 13

<asp:DropDownList id="MyDropDown" runat="server" />

ব্যবহার $("select[name$='MyDropDown']").val()।

Comments

আপনি যদি নামের সাথে মিলে থাকেন তবে আপনি $সম্ভবত এটি মুছে ফেলতে পারেন তাই এটি একটি 'শেষ' নয়। তবে আপনার পরামর্শটি কেবলমাত্র একটি শ্রেণীর নামের সাথে মিলের চেয়ে দ্রুত। এমনকি দ্রুত হলেও হতে পারে element.classnameবা #idname।

— অ্যালেক

Answer 14

আপনি কীভাবে ড্রপ ডাউন তালিকায় মানগুলি লোড করছেন বা কোন মানটি নির্বাচন করবেন তা নির্ধারণ করছেন? আপনি যদি এজাক্স ব্যবহার করে এটি করছেন, তবে বাছাই হওয়ার আগে আপনার বিলম্ব হওয়ার কারণটি হ'ল কারণ প্রশ্নটিতে থাকা লাইনটি কার্যকর হওয়ার সময় মানগুলি লোড করা হয়নি। এটি স্থিতি নির্ধারণের আগে আপনি যখন লাইনে একটি সতর্কতা বিবৃতি রাখেন তখন এটি কেন কাজ করে তাও ব্যাখ্যা করবে যেহেতু সতর্কতা কার্যটি ডেটা লোড হতে যথেষ্ট বিলম্ব করবে।

আপনি যদি jQuery এর আজাক্স পদ্ধতিগুলির মধ্যে একটি ব্যবহার করে থাকেন তবে আপনি একটি কলব্যাক ফাংশন নির্দিষ্ট করতে পারেন এবং তারপরে $("._statusDDL").val(2);আপনার কলব্যাক ফাংশনটিতে রাখতে পারেন।

এটি সমস্যাটি হ্যান্ডেল করার আরও নির্ভরযোগ্য উপায় হতে পারে যেহেতু আপনি নিশ্চিত হতে পারেন যে ডেটা প্রস্তুত হওয়ার সময় পদ্ধতিটি কার্যকর হয়েছিল, এমনকি এটি যদি 300 এমএসের বেশি সময় নেয় তবে।

Answer 15

<asp:DropDownList ID="DropUserType" ClientIDMode="Static" runat="server">
     <asp:ListItem Value="1" Text="aaa"></asp:ListItem>
     <asp:ListItem Value="2" Text="bbb"></asp:ListItem>
</asp:DropDownList>

ClientIDMode = "স্ট্যাটিক"

$('#DropUserType').val('1');

Answer 16

আমার ক্ষেত্রে আমি .attr () পদ্ধতিটি ব্যবহার করে এটি কাজ করতে সক্ষম হয়েছি।

$("._statusDDL").attr("selected", "");