JQuery - মানের উপর নির্ভর করে ড্রপডাউন আইটেমটি কীভাবে নির্বাচন করবেন


86

আমি এন্ট্রিগুলির মূল্যের উপর ভিত্তি করে পরিবর্তন করতে একটি ড্রপডাউন (নির্বাচন) সেট করতে চাই।

আমার আছে

<select id="mySelect">
  <option value="ps">Please Select</option>
  <option value="ab">Fred</option>
  <option value="fg">George</option>
  <option value="ac">Dave</option>
</select>

এবং আমি জানি যে আমি ড্রপডাউনটি পরিবর্তন করতে চাই যাতে "fg" এর মান সহ বিকল্পটি নির্বাচন করা যায়। আমি কীভাবে JQuery এর সাথে এটি করতে পারি?


আমি ভেবেছিলাম এটি খুব সহজ, তবে কাজ করে নি বলে মনে হয়। আমার ধারণা এটি ডিবাগ করার সময়।
ডাব্লু


4
আপনার শিরোনামটি কিছুটা বিভ্রান্তিকর। আপনি একটি ড্রপডাউন নির্বাচন করছেন না, আপনি একটি ড্রপডাউনতে একটি বিকল্প নির্বাচন করছেন ... এজন্য এমন 7 টি উত্তর রয়েছে যা আমাকে মোটেও সহায়তা করে না ...
ব্যবহারিক 1566694

@ ইউজার1566694 আপনি যদি প্রযুক্তিগত পেতে চান তবে এটি আসলে ড্রপডাউন বলা হয় না, এটি একটি "নির্বাচন করুন"
ডাব্লু

উত্তর:


156

আপনার ব্যবহার করা উচিত

$('#dropdownid').val('selectedvalue');

এখানে একটি উদাহরণ:

$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
    <option value=''>- Please choose -</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='selectedvalue'>There we go!</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>


21
উপরের সাথে একমত আপনার কোড অনুসারে, এটি হবে$('#mySelect option[value="fg"]').attr('selected', true)
মার্টাভিস পি

আমার ভুল. আমি দেখেছি এটি কিছু ক্ষেত্রে কার্যকর হয় না তবে এটি স্পষ্টভাবে পোড়ায়।
মার্টাভিস পি।

4
আমি শুধু এই সঙ্গে যত্নবান হবে। এটি <সलेक्ट> ট্যাগে 'পরিবর্তন' ইভেন্টটি ট্রিগার করে না। আপনি যদি এই ইভেন্টটি ব্যবহার না করে থাকেন তবে এটি ঠিক আছে।
চাদ ফিশার

4
@ চ্যাডফিশার আপনি যদি পরিবর্তন ইভেন্টটি ব্যবহার করে থাকেন তবে এটিকে ট্রিগার করুন$('#dropdownid').val('selectedvalue').trigger('change');
লিয়াম

প্রকৃতপক্ষে ট্রিগার পরিবর্তন সাহায্য করে যখন আপনি মডেল আপডেটের মতো নির্দিষ্ট ক্রিয়া সম্পাদন করতে কিছু ফলোআপ কোড লিখেছিলেন, এমনকি ডিএসির পরিবর্তনের ইভেন্টে এএসপি নেটওয়াল মডেল আপডেটগুলিও ঘটে। +1
ডিভ তিওয়ারি



8

আপনি এই jQuery কোডটি ব্যবহার করতে পারেন যা আমি এটি ব্যবহার করতে eaiser মনে করি:

$('#your_id [value=3]').attr('selected', 'true');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="your_id" name="name" class="form-control input-md">
  <option value="1">Option #1</option>
  <option value="2">Option #2</option>
  <option value="3">Option #3</option>
  <option value="4">Option #4</option>
  <option value="5">Option #5</option>
  <option value="6">Option #6</option>
  <option value="7">Option #7</option>
</select>


7
 $('#mySelect').val('ab').change();

 // or

 $('#mySelect').val('ab').trigger("change");

4
বা $ ('# মাই সিলেক্ট')। ভাল ('আব')। ট্রিগার ("পরিবর্তন") ;; আপনি যদি নির্বাচন 2 প্লাগইন ব্যবহার করছেন তবে।
বৈভব জৈন

4
। بدل () আমাকে আমার এএসপি নেটওয়ান এমভিসি মডেল বৈশিষ্ট্য আপডেট করতে সহায়তা করেছে। উত্তর করার জন্য ধন্যবাদ.
ডিভ তিওয়ারি

আপনাকে ধন্যবাদ ... .ট্রিগার ('পরিবর্তন') পুরোপুরি কাজ করে!
লুইসাও



2

উত্তর দিতে দেরি হতে পারে তবে কমপক্ষে কেউ একজন সহায়তা পাবেন।

আপনি দুটি বিকল্প চেষ্টা করতে পারেন:

আপনি যখন সূচক মানের উপর ভিত্তি করে নির্ধারিত করতে চান তখন এটিই ফলাফল, যেখানে '0' সূচক হয়।

 $('#mySelect').prop('selectedIndex', 0);

এটি সর্বশেষ jquery দিয়ে অবমূল্যায়ন করা হয়েছে বলে 'অ্যাটর' ব্যবহার করবেন না।

আপনি যখন বিকল্প মানের উপর নির্ভর করে নির্বাচন করতে চান তবে এটি চয়ন করুন:

 $('#mySelect').val('fg');

যেখানে 'fg' হ'ল বিকল্প মান


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

1

$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
    <option value=''>- Please choose -</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='selectedvalue'>There we go!</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>


1

এই কোডটি আমার পক্ষে কাজ করেছে:

$(function() {
    $('[id=mycolors] option').filter(function() { 
        return ($(this).text() == 'Green'); //To select Green
    }).prop('selected', true);
});

এই এইচটিএমএল নির্বাচন তালিকা সহ:

<select id="mycolors">
      <option value="1">Red</option>
      <option value="2">Green</option>
      <option value="3">Blue</option>
</select>

0

আমার একটি আলাদা পরিস্থিতি রয়েছে, যেখানে ড্রপ ডাউন তালিকা মানগুলি ইতিমধ্যে হার্ড কোডেড। এখানে কেবলমাত্র 12 টি জেলা রয়েছে তাই jQuery স্বতঃসম্পূর্ণ UI নিয়ন্ত্রণ কোড দ্বারা জনপ্রিয় হয় না।

সমাধান অনেক সহজ। কারণ আমি অন্যান্য পোস্টগুলির মধ্যে ছড়িয়ে পড়েছিলাম যেখানে ধারণা করা হয়েছিল যে নিয়ন্ত্রণটি গতিশীলভাবে লোড হচ্ছে, আমার কী প্রয়োজন তা খুঁজে পাচ্ছে না এবং শেষ পর্যন্ত এটি বের করে ফেললাম।

সুতরাং যেখানে আপনার নীচের মতো এইচটিএমএল রয়েছে সেখানে নির্বাচিত সূচকটি সেট করা হয়েছে, -ড্রপড আইডি ছাড়াও ইনপুট অংশটি নোট করুন:

$('#project-locationSearch-dist-input').val('1');

                <label id="lblDistDDL" for="project-locationSearch-input-dist" title="Select a district to populate SPNs and PIDs or enter a known SPN or PID." class="control-label">District</label>
                <select id="project-locationSearch-dist" data-tabindex="1">
                    <option id="optDistrictOne" value="01">1</option>
                    <option id="optDistrictTwo" value="02">2</option>
                    <option id="optDistrictThree" value="03">3</option>
                    <option id="optDistrictFour" value="04">4</option>
                    <option id="optDistrictFive" value="05">5</option>
                    <option id="optDistrictSix" value="06">6</option>
                    <option id="optDistrictSeven" value="07">7</option>
                    <option id="optDistrictEight" value="08">8</option>
                    <option id="optDistrictNine" value="09">9</option>
                    <option id="optDistrictTen" value="10">10</option>
                    <option id="optDistrictEleven" value="11">11</option>
                    <option id="optDistrictTwelve" value="12">12</option>
                </select>

স্বতঃপূরণ নিয়ন্ত্রণ সম্পর্কে অন্য কিছু আবিষ্কার করা হ'ল এটি কীভাবে সঠিকভাবে অক্ষম করা / খালি করা যায়। আমাদের 3 টি নিয়ন্ত্রণ এক সাথে কাজ করছে, এর মধ্যে 2 টি পরস্পর একচেটিয়া:

//SPN
spnDDL.combobox({
    select: function (event, ui) {
        var spnVal = spnDDL.val();
        //fire search event
        $('#project-locationSearch-pid-input').val('');
        $('#project-locationSearch-pid-input').prop('disabled', true);
        pidDDL.empty(); //empty the pid list
    }
});
//get the labels so we have their tool tips to hand.
//this way we don't set id values on each label
spnDDL.siblings('label').tooltip();

//PID
pidDDL.combobox({
    select: function (event, ui) {
        var pidVal = pidDDL.val();
        //fire search event
        $('#project-locationSearch-spn-input').val('');
        $('#project-locationSearch-spn-input').prop('disabled', true);
        spnDDL.empty(); //empty the spn list
    }
});

এর মধ্যে কিছু পোস্টের আওতার বাইরে এবং আমি জানি না কোথায় এটি সঠিকভাবে স্থাপন করা যায়। যেহেতু এটি খুব সহায়ক এবং এটি বের করতে কিছুটা সময় নিয়েছে তাই এটি ভাগ করা হচ্ছে।

Und Und ... এর মতো নিয়ন্ত্রণ সক্ষম করতে এটি (অক্ষম, মিথ্যা) এবং না (সক্ষম, সত্য) - এটি বের করতে কিছুটা সময় নিয়েছে। :)

কেবল পোস্টটি ছাড়াও কেবলমাত্র অন্যটি বিষয়টি হ'ল:

    /*
Note, when working with the jQuery Autocomplete UI control,
the xxx-input control is a text input created at the time a selection
from the drop down is picked.  Thus, it's created at that point in time
and its value must be picked fresh.  Can't be put into a var and re-used
like the drop down list part of the UI control.  So you get spnDDL.empty()
where spnDDL is a var created like var spnDDL = $('#spnDDL);  But you can't
do this with the input part of the control.  Winded explanation, yes.  That's how
I have to do my notes or 6 months from now I won't know what a short hand note means
at all. :) 
*/
    //district
    $('#project-locationSearch-dist').combobox({
        select: function (event, ui) {
            //enable spn and pid drop downs
            $('#project-locationSearch-pid-input').prop('disabled', false);
            $('#project-locationSearch-spn-input').prop('disabled', false);
            //clear them of old values
            pidDDL.empty();
            spnDDL.empty();
            //get new values
            GetSPNsByDistrict(districtDDL.val());
            GetPIDsByDistrict(districtDDL.val());
        }
    });

সমস্ত ভাগ করা হয়েছে কারণ উড়তে এই জিনিসগুলি শিখতে খুব বেশি সময় লেগেছে। আশা করি এটি সহায়ক।


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


0

আপনি নাম অনুসারে ড্রপডাউন বিকল্প মান নির্বাচন করতে পারেন

// deom
jQuery("#option_id").find("option:contains('Monday')").each(function()
{
 if( jQuery(this).text() == 'Monday' )
 {
  jQuery(this).attr("selected","selected");
  }

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