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


951

আমার selectকিছু ক্ষেত্র আছে এতে কিছু অপশন রয়েছে। এখন আমার optionsjQuery এর মধ্যে একটি নির্বাচন করা উচিত । কিন্তু কিভাবে আমি যে যখন আমি শুধু জানি করতে পারেন valueএর optionনির্বাচিত হবে?

আমি নিম্নলিখিত এইচটিএমএল আছে:

<div class="id_100">
  <select>
    <option value="val1">Val 1</option>
    <option value="val2">Val 2</option>
    <option value="val3">Val 3</option>
  </select>
</div>

আমার মান সহ বিকল্পটি নির্বাচন করতে হবে val2। কিভাবে এই কাজ করা যেতে পারে?

এখানে একটি ডেমো পৃষ্ঠা: http://jsfiddle.net/9Stxb/


একাধিক নির্বাচনের জন্য ভাল (['5', '4', '8']) ড্রপডাউন ব্যবহারের জন্য মূল্য ('5') ব্যবহার করুন পূর্ণ ডেমো freakyjolly.com/…
কোড স্পাই

উত্তর:


1533

একটি সহজ উপায় আছে যার জন্য আপনাকে বিকল্প ট্যাগে যেতে হবে না:

$("div.id_100 select").val("val2");

এই jQuery পদ্ধতিটি দেখুন


18
এটি এফএফ-তে বাগের কারণ হতে পারে (কমপক্ষে) খালি নির্বাচন বাক্সে
জোনাথন

21
প্রশ্নের পোস্টারটি দিয়ে শুরু হয়: "আমার কয়েকটি বিকল্পের সাথে আমার একটি নির্বাচন ক্ষেত্র আছে ..." সুতরাং এটি খালি নয়, সুতরাং সমাধানটি সঠিক থাকে।
pinghsien422

8
@JamesCazzetta Val একটি অ্যারের পাঠান: .val(["Multiple2", "Multiple3"])api.jquery.com/val/#val-value
স্কিপাইলট

132
.val(x).change();নির্বাচনের অন-চেঞ্জ ইভেন্টটি ট্রিগার করার জন্য আমাকে ম্যানুয়ালি কল করতে হয়েছিল, মনে হচ্ছে এটি ভাল () সেট করে দেয় না fire
স্কিপাইলট

16
সতর্কতা অবলম্বন করুন: ভাল () বিকল্পগুলি বিদ্যমান না এমন মান নির্ধারণ করতে পারে।
ড্যানিয়েল

429

মান 'ভাল 2' সহ একটি বিকল্প নির্বাচন করতে:

$('.id_100 option[value=val2]').attr('selected','selected');

5
পছন্দসই মানটি বিকল্প হতে পারে বা নাও করতে পারে তবে এটিই সেরা সমাধান এবং যদি এটি কোনও বিকল্প না হয় তবে আপনি পরিবর্তন করতে চান না। আপনি যদি নির্বাচিতটিতে ব্যবহার .val()করেন এবং এমন মান বাছাই করার চেষ্টা করেন যা সেখানে নেই তবে এটি সমস্ত কিছু নির্বাচন থেকে নির্বাচিত করবে।
ওয়ালি আল্টম্যান

সম্মত হন - এটি সর্বাধিক মার্জিত বিকল্প - পরিষ্কার এবং বিন্দুতে। নিশ্চিত না যে "প্রোপ" সমস্ত ক্ষেত্রে আরও ভাল কাজ করে (ব্রাউজারগুলি)। তবে এটি অবশ্যই আপনার জন্য সহজ অনুসন্ধান করে।
লি ফুলার 21

4
এছাড়াও, আমি ব্যবহার করেছি $("select[name=foo] option[value=bar]).attr('selected','selected');যা আমি পরীক্ষিত সমস্ত ব্রাউজারের জন্যও ভাল কাজ করে।
লি ফুলার

1
আমি এই উত্তরটি গ্রহণযোগ্য উত্তরের চেয়ে ভাল পছন্দ করি কারণ: এলিমেন্ট.উটার এইচটিএমএল এটির সাথে আপডেট হয়, যদিও এটি গৃহীত উত্তরের সাথে নয়।
হোল্ডঅফহাঙ্গার

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

331

change()মানটি নির্বাচন করার পরে ইভেন্টটি ব্যবহার করুন । ডক্স থেকে:

যদি ক্ষেত্রটি বিষয়বস্তু পরিবর্তন না করে ফোকাস হারায়, ইভেন্টটি ট্রিগার করা হবে না। ইভেন্টটি ম্যানুয়ালি ট্রিগার করতে, .change()তর্ক ছাড়াই প্রয়োগ করুন :

$("#select_id").val("val2").change();

আরও তথ্য। পরিবর্তন () এ


22
এটি আরও অনেকগুলি উপভোগের দাবিদার এবং শীর্ষের সাথে সম্পর্কিত। তার সঠিক ভাবে, কোন বাজে কাজে ব্যস্ত prop, attrইত্যাদি এবং সমস্ত ঘটনা সঠিকভাবে progagates।
পলিগনোম

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

ভুল হয়েছে !!! এই পরিবর্তনটি অন্যান্য সমস্ত ড্রপডাউনগুলিকে ইভেন্টগুলি পরিবর্তন হিসাবে কল করে ... অন্যান্য ড্রপডাউনগুলি পরিবর্তন ইভেন্টগুলি কল করা থেকে কীভাবে এড়ানো যায়
ড্যানিয়েল এ সতীশ কুমার

1
আপনার যদি ইতিমধ্যে কোনও শ্রোতা পরিবর্তন করতে বাধ্য থাকে তবে এটি অসীম লুপের কারণ হবে।
কিওয়ার্টজম্যান

1
আমার নির্বোধ ড্রপডাউনলিস্ট মানটি পরিবর্তনের জন্য চেষ্টা করার জন্য কিছুটা সময় সংগ্রাম করা হয়েছিল, এই সমাধানটি কেবলমাত্র কাজ করেছিল! ধন্যবাদ, বন্ধু!
এক্সলেওক

57

প্রথমে সমস্তটি নির্বাচন করুন এবং নির্বাচনযোগ্য বিকল্পগুলি ফিল্টার করুন:

$('.id_100 option')
     .removeAttr('selected')
     .filter('[value=val1]')
         .attr('selected', true)

2
নির্বাচিত বৈশিষ্ট্যের মান একটি খালি স্ট্রিং বা হতে পারে selected। মানে .prop()?
rink.attendant.6

2
ভাল উত্তর. স্বীকৃত উত্তরটি খালি নির্বাচনের সাথে শেষ হয়, যখন বিকল্পগুলির মধ্যে মান বিদ্যমান না থাকে।
রাউলি রাজান্ডে 31'15

5
শীর্ষে, সেরা এখানে। ভবিষ্যতের ব্যবহারের জন্য আমি মনে করি আমাদের এটারের পরিবর্তে প্রপ ব্যবহার করা উচিত।
ড্যানিয়েল

আমি এই সমাধানটি অনেক পছন্দ করি। আমি ভাবছি যদিও এটি আরও ভাল, পারফরম্যান্স-ভিত্তিক, যদি নির্বাচককে ".id_100> বিকল্প" হিসাবে পরিবর্তন করা হয়
হিল

43
<select name="contribution_status_id" id="contribution_status_id" class="form-select">
    <option value="1">Completed</option>
    <option value="2">Pending</option>
    <option value="3">Cancelled</option>
    <option value="4">Failed</option>
    <option value="5">In Progress</option>
    <option value="6">Overdue</option>
    <option value="7">Refunded</option>

মান অনুসারে মুলতুবি স্থিতিতে সেট করা

   $('#contribution_status_id').val("2");

36

আমার জন্য নিম্নলিখিত কাজটি করেছে

$("div.id_100").val("val2").change();

27

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

$('div.id_100  option[value="val2"]').prop("selected", true);

$('id_100').val('val2');

অপ্টিমাইজড নয়, তবে নিম্নলিখিত যুক্তি কিছু ক্ষেত্রে কার্যকর।

$('.id_100 option').each(function() {
    if($(this).val() == 'val2') {
        $(this).prop("selected", true);
    }
});

আমি সরাসরি এই পদ্ধতিটি ভাল () সেট করার চেয়ে পছন্দ করি। আমি বৈশিষ্ট্যটিও সেট করতে চাই - ডিবাগিংয়ে সহায়তা করে। this (এটি) .attr ("নির্বাচিত", "নির্বাচিত")
ক্রেগ জ্যাকবস

17

আপনি বৈশিষ্ট্য নির্বাচনকারী ব্যবহার করে কোনও বৈশিষ্ট্য এবং এর মান [attributename=optionalvalue]নির্বাচন করতে পারেন, সুতরাং আপনার ক্ষেত্রে আপনি বিকল্পটি নির্বাচন করতে পারেন এবং নির্বাচিত বৈশিষ্ট্যটি সেট করতে পারেন।

$("div.id_100 > select > option[value=" + value + "]").prop("selected",true);

valueআপনি যে মানটি নির্বাচন করতে চান তা কোথায় ।

আপনার যদি পূর্বের কোনও নির্বাচিত মানগুলি মুছে ফেলার দরকার হয় তবে এটি যদি একাধিকবার ব্যবহার করা হয় তবে আপনাকে কিছুটা পরিবর্তন করতে হবে যাতে প্রথমে নির্বাচিত বৈশিষ্ট্যটি অপসারণ করা যায়

$("div.id_100 option:selected").prop("selected",false);
$("div.id_100 option[value=" + value + "]")
        .prop("selected",true);

15

সেরা উপায় এটির মতো:

$(`#YourSelect option[value='${YourValue}']`).prop('selected', true);

ক্রোম-এ, $('<select>').val('asdf')বর্তমানে নির্বাচিত বিকল্পটি প্রদর্শন করতে সেটিং সেলেক্ট আপডেট করে না। এই উত্তরটি এই সমস্যার সমাধান করেছে।
জোশুয়া বার্নস

যদিও এটি খুব বেশি কাজ করবে তবে $ ('<নির্বাচন করুন')। ওভেল ('এস্যাসেফ') ক্রোমে ভাল কাজ করছে 79.0.3945.88
কিউমাস্টার

14

একটি সহজ উত্তর হ'ল, HTML এ

<select name="ukuran" id="idUkuran">
    <option value="1000">pilih ukuran</option>
    <option value="11">M</option>
    <option value="12">L</option>
    <option value="13">XL</option>
</select>

jquery এ, বোতাম বা যাই হোক না কেন নীচে ফাংশন কল করুন

$('#idUkuran').val(11).change();

এটি সহজ এবং 100% কাজ করে, এটি আমার কাজ থেকে নেওয়া ... :) এটির সাহায্য আশা করি ..


আপনার ডিফল্ট মান 1000? কেন ""
ভুডোকোড

2
এটি একটি
alচ্ছিক

14

এটিকে উচ্ছেদ করার কোনও কারণ নেই, আপনি যা করছেন তা হ'ল কোনও সম্পত্তি অ্যাক্সেস করা এবং সেট করা। এটাই.

ঠিক আছে, তাই কিছু বেসিক ডোম: আপনি যদি সরাসরি জাভাস্ক্রিপ্টে এটি করতেন তবে আপনি এটি করতেন:

window.document.getElementById('my_stuff').selectedIndex = 4;

তবে আপনি এটি সরাসরি জাভাস্ক্রিপ্ট দিয়ে করছেন না, আপনি এটি jQuery দিয়ে করছেন। এবং jQuery এ, আপনি কোনও সম্পত্তি সেট করতে .prop () ফাংশনটি ব্যবহার করতে চান, সুতরাং আপনি এটি এর মতো করুন:

$("#my_stuff").prop('selectedIndex', 4);

যাইহোক, কেবল আপনার আইডিটি অনন্য কিনা তা নিশ্চিত করুন। অন্যথায়, আপনি কেন এই কাজ করেননি তা ভেবে আপনার দেওয়ালে মাথা বেঁধে যাবেন।


12

এটি করার সহজতম উপায় হ'ল:

এইচটিএমএল

<select name="dept">
   <option value="">Which department does this doctor belong to?</option>
   <option value="1">Orthopaedics</option>
   <option value="2">Pathology</option>
   <option value="3">ENT</option>
</select>

jQuery এর

$('select[name="dept"]').val('3');

আউটপুট: এটি ENT সক্রিয় করবে ।


12

change()নির্বাচন মান নির্ধারণের পরে এটি ব্যবহার করা ভাল ।

$("div.id_100 select").val("val2").change();

এটি করার মাধ্যমে, কোডটি ব্যবহারকারীর দ্বারা নির্বাচনের পরিবর্তনের কাছাকাছি চলে আসবে, ব্যাখ্যাটি জেএস ফিডেলের অন্তর্ভুক্ত রয়েছে :

জেএস ফিডল


কেন? আপনি কিছুটা ব্যাখ্যা করতে পারেন?
71GA

জেএস ফিডল । পরিবর্তনের () পদ্ধতির সাহায্যে কোডটি ব্যবহারকারী দ্বারা নির্বাচনের পরিবর্তনের কাছাকাছি চলে আসবে, যখন হ্যান্ডেল করার দরকার রয়েছে অন-চেঞ্জ শ্রোতাদের।
নিক

12

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

এটি #graphtypeনির্বাচিত ট্যাগের আইডি কোথায় রয়েছে তা ভাল কাজ করে।

উদাহরণ হিসাবে ট্যাগ নির্বাচন করুন:

 <select name="site" id="site" class="form-control" onchange="getgraph1(this.options[this.selectedIndex].value);">
    <option value="" selected>Site</option> 
    <option value="sitea">SiteA</option>
    <option value="siteb">SiteB</option>
  </select>


8

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

$("div.id_100 > select > option[value=" + value + "]").attr("selected",true);

এটি আমার পক্ষে কাজ করে। আমি এই কোডটি একটি অভিনব বাক্স আপডেট ফর্মটিতে একটি মূল্য বিশ্লেষণের জন্য ব্যবহার করছি এবং অ্যাপ্লিকেশন থেকে আমার সম্পূর্ণ উত্সটি হ'ল:

jQuery(".fancybox-btn-upd").click(function(){
    var ebid = jQuery(this).val();

    jQuery.ajax({
        type: "POST",
        url: js_base_url+"manajemen_cms/get_ebook_data",
        data: {ebookid:ebid},
        success: function(transport){
            var re = jQuery.parseJSON(transport);
            jQuery("#upd-kategori option[value="+re['kategori']+"]").attr('selected',true);
            document.getElementById("upd-nama").setAttribute('value',re['judul']);
            document.getElementById("upd-penerbit").setAttribute('value',re['penerbit']);
            document.getElementById("upd-tahun").setAttribute('value',re['terbit']);
            document.getElementById("upd-halaman").setAttribute('value',re['halaman']);
            document.getElementById("upd-bahasa").setAttribute('value',re['bahasa']);

            var content = jQuery("#fancybox-form-upd").html();
            jQuery.fancybox({
                type: 'ajax',
                prevEffect: 'none',
                nextEffect: 'none',
                closeBtn: true,
                content: content,
                helpers: {
                    title: {
                        type: 'inside'
                    }
                }
            });
        }
    });
});

এবং আমার পিএইচপি কোডটি হ'ল:

function get_ebook_data()
{
    $ebkid = $this->input->post('ebookid');
    $rs = $this->mod_manajemen->get_ebook_detail($ebkid);
    $hasil['id'] = $ebkid;
    foreach ($rs as $row) {
        $hasil['judul'] = $row->ebook_judul;
        $hasil['kategori'] = $row->ebook_cat_id;
        $hasil['penerbit'] = $row->ebook_penerbit;
        $hasil['terbit'] = $row->ebook_terbit;
        $hasil['halaman'] = $row->ebook_halaman;
        $hasil['bahasa'] = $row->ebook_bahasa;
        $hasil['format'] = $row->ebook_format;
    }
    $this->output->set_output(json_encode($hasil));
}

7

.attr () কখনও কখনও পুরানো jQuery সংস্করণে কাজ করে না তবে আপনি .prop () ব্যবহার করতে পারেন :

$('select#ddlCountry option').each(function () {
    if ($(this).text().toLowerCase() == co.toLowerCase()) {
        $(this).prop('selected','selected');
        return;
    }
});

4

এটি নির্বাচন নিয়ন্ত্রণের জন্য নিশ্চিতভাবে কাজ করে :

$('select#ddlCountry option').each(function () {
if ($(this).text().toLowerCase() == co.toLowerCase()) {
    this.selected = true;
    return;
} });


4

উত্স লিঙ্ক এখানে চিত্র বর্ণনা লিখুন

ব্যবহারের Val () জন্য jQuery মেথড একক এবং একাধিক মূল্য ড্রপডাউন নির্বাচন

    $(function () {

        $("button").click(function () {
            $("#myDropDownSingle").val('5');
            $("#myDropDownMultiple").val(['5', '4', '8']);
        });

    });

এইচটিএমএল

<p>
    <h5>Single Selection</h5>
    <select id="myDropDownSingle" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>
<p>
    <h5>Multiple Selection</h5>
    <select id="myDropDownMultiple" class="form-control" multiple>
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>

<p>
    <button>Get Value and Text on Button Click</button>
</p>

3

এটা চেষ্টা কর. সাধারণ এখনও কার্যকর জাভা স্ক্রিপ্ট + প্রাণঘাতী কম্বো jQuery।

নির্বাচন করুন উপাদান:

<select id="YourSelectComponentID">
            <option value="0">Apple</option>
            <option value="2">Banana</option>
            <option value="3">Cat</option>
            <option value="4">Dolphin</option>
</select>

নির্বাচন :

document.getElementById("YourSelectComponentID").value = 4;

এখন আপনার বিকল্প 4 নির্বাচন করা হবে। আপনি এটি করতে পারেন, ডিফল্টরূপে শুরুতে মানগুলি নির্বাচন করতে।

$(function(){
   document.getElementById("YourSelectComponentID").value = 4;
});

বা একটি সাধারণ ফাংশন তৈরি করুন এতে লাইন রাখুন এবং বিকল্পটি নির্বাচন করতে যে কোনও অনুষ্ঠানে ফাংশনটি কল করুন

JQuery + javasScript এর মিশ্রণটি যাদু করে ...


3

পুরানো পোস্ট তবে এখানে একটি সাধারণ ফাংশন যা jQuery প্লাগইনের মতো কাজ করে।

    $.fn.selectOption = function(val){
        this.val(val)
        .find('option')
        .removeAttr('selected')
        .parent()
        .find('option[value="'+ val +'"]')
        .attr('selected', 'selected')
        .parent()
        .trigger('change');

        return this;
    };

আপনি কেবল সাধারণ এই জাতীয় কিছু করতে পারেন:

$('.id_100').selectOption('val2');

রেসন কেন এটি ব্যবহার করবে কারণ আপনি নির্বাচিত স্যাটামেন্টকে ডিওমে পরিবর্তন করেছেন যা ক্রসব্রোজার সমর্থিত এবং আপনি এটি ধরতে পারলে পরিবর্তনের সূত্রপাতও করবেন।

বেসিক্যাল হিউম্যান অ্যাকশন সিমুলেশন।


2
  • আপনি গতিশীলভাবে পরিবর্তন করতে চান এমন মানটি অবশ্যই আপনার বিবেচনায় নিতে হবে, আপনার এইচটিএমএলে আপনি যে বিকল্পগুলি সংজ্ঞায়িত করছেন সেটির সাথে অবশ্যই এটি উপস্থিত থাকতে হবে case sensative। আপনি নিম্নলিখিত হিসাবে আপনার নির্বাচন বাক্সকে পরিবর্তনশীল করতে পারেন,

$("div#YOUR_ID").val(VALUE_CHANGED).change(); //value must present in options you selected otherwise it will not work


1

স্থির এইচটিএমএল পৃষ্ঠাগুলির পরিবর্তে নিয়ন্ত্রণগুলি যখন গতিশীলভাবে তৈরি করা হয় তখন সিলেক্ট ড্রপ ডাউন নিয়ন্ত্রণগুলি গতিশীলভাবে পরিবর্তিত হয় না এমন একটি সমস্যা রয়েছে বলে মনে হচ্ছে।

JQuery এ এই সমাধানটি আমার পক্ষে কাজ করেছে।

$('#editAddMake').val(result.data.make_id);
$('#editAddMake').selectmenu('refresh');

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

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


0

মানটি একটি আইডি এবং পাঠ্যটি একটি কোড হয় তখন আমি একটি ইস্যুতে প্রবেশ করি। আপনি কোডটি ব্যবহার করে মানটি সেট করতে পারবেন না তবে আইডিতে আপনার সরাসরি অ্যাক্সেস নেই।

var value;

$("#selectorId > option").each(function () {
  if ("SOMECODE" === $(this).text()) {
    value = $(this).val();
  }
});

//Do work here


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