কোনও <সিলেক্ট> jQuery ব্যবহার করে বিকল্প যুক্ত করা হচ্ছে?

Question

optionJQuery ব্যবহার করে একটি ড্রপডাউন যোগ করার সবচেয়ে সহজ উপায় কী ?

এই কাজ করবে?

$("#mySelect").append('<option value=1>My option</option>');

Comments

অথবা $("#mySelect").html(....)নতুন বিকল্পগুলির সাথে বর্তমান বিকল্পগুলি প্রতিস্থাপন করতে ব্যবহার করুন।

— ড্যান ডিপ্লো

Answer 1

এটি IE8 তে কাজ করেনি (এখনও এফএফ-তে করেছে):

$("#selectList").append(new Option("option text", "value"));

এই কাজটি করেছেন:

var o = new Option("option text", "value");
/// jquerify the DOM object 'o' so we can use the html method
$(o).html("option text");
$("#selectList").append(o);

Comments

আইই 8 নিয়ে আমার সমস্যা ছিল, তবে আপনার কোডটি আমার পক্ষে কাজ করেছে, আপনাকে ধন্যবাদ!

— আলেকজান্দ্রি এল টেলিস

এছাড়াও নিশ্চিত যে display: table;হয় না নির্বাচন-উপাদানের শৈলী হিসাবে প্রয়োগ করা হয়েছে। এটি

— জেএস

আপনি যদি আগ্রহী হন তবে ফায়ারফক্স, ক্রোমে অপশন () কীভাবে বিকল্পগুলি কাজ করে না সে সম্পর্কিত এই বাগটি এখানে রয়েছে তবে আইই তে নয়: bugs.jquery.com/ticket/1641

— জ্যাকডেভ

+1 - অবজেক্টটি 'jquerify' না করে আমার জন্য কাজ করেছেন। var o = new Option('option text', 'value'); o.innerHTML = 'option text'; document.getElementById('selectList').appendChild(o);

— অস্ট

এর সাথে "ডেটা-এক্সএক্সএক্সএক্সএক্স" মান যুক্ত করার উপায় আছে?

— পেদ্রো

Answer 2

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

$('#mySelect').append($('<option>', {
    value: 1,
    text: 'My option'
}));

আপনি যদি আইটেমের সংগ্রহ থেকে বিকল্পগুলি যুক্ত করে থাকেন তবে আপনি নিম্নলিখিতটি করতে পারেন:

$.each(items, function (i, item) {
    $('#mySelect').append($('<option>', { 
        value: item.value,
        text : item.text 
    }));
});

Comments

এইচটিএমএল স্ট্রিং তৈরি এবং এটি সংযোজন করার তুলনায় আপনি প্রচুর বিকল্প যুক্ত করতে পারলে এটি বেশ ধীর হয়ে যাবে

— ক্লিক করুন

IE তে অনেকগুলি সমাধানের বিপরীতে কাজ করে

— ড্যান্সস উইথবাম্বু

@ রপitems={option1:{value:1,text:1},option2:{value:2,text:2}}

— গামেলিলা

ধন্যবাদ @ ডুলে, তবে আমি কীভাবে ডিফল্টরূপে নতুন বিকল্পটি নির্বাচন করতে পারি?

— লর্ড_জবা

{নির্বাচিত: সত্য}

— jmadsen

Answer 3

আপনি নিম্নলিখিত সিনট্যাক্স ব্যবহার করে বিকল্প যুক্ত করতে পারেন, এছাড়াও আপনি আরও তথ্যের জন্য jQuery এ ওয়েল হ্যান্ডেল বিকল্পটিতে যেতে পারেন ।

1. $('#select').append($('<option>', {value:1, text:'One'}));

2. $('#select').append('<option value="1">One</option>');

3. var option = new Option(text, value); $('#select').append($(option));

Comments

প্রথম এক $ ( "# SectionNames") এ পরিবর্তিত হবে পরিশেষে যোগ ($ ( '<বিকল্প>', {মান: 1, পাঠ্য: "এক"})।

— EthenHY

অপশন ট্যাগটিতে দ্বিতীয়টির একটি ভুল বৈশিষ্ট্য রয়েছে ( valueপরিবর্তে val)। সঠিক কোড হতে হবে$('select').append('<option value="1">One</option>');

— টড

ধন্যবাদ দিপু :))

— ফক্স

Answer 4

বিকল্পের নাম বা মানটি যদি গতিশীল হয় তবে আপনাকে এতে বিশেষ অক্ষরগুলি পালানোর বিষয়ে চিন্তা করতে হবে না; এটিতে আপনি সাধারণ ডোম পদ্ধতি পছন্দ করতে পারেন:

var s= document.getElementById('mySelect');
s.options[s.options.length]= new Option('My option', '1');

Comments

আমার কাছে এত সহজ লাগছে না !!

— আপভোট

এটি জাভাস্ক্রিপ্টের ভাষায় সহজ, jquery মানুষের জন্য জিনিসগুলি খুব সহজ করে

— তুলেছে

document.getElementById ('mySelect')। add (নতুন অপশন ('আমার অপশন', '1')); //

— আইই 8

Answer 5

বিকল্প 1-

আপনি এটি চেষ্টা করতে পারেন-

$('#selectID').append($('<option>',
 {
    value: value_variable,
    text : text_variable
}));

এটার মত-

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append($('<option>',
     {
        value: i,
        text : "Option "+i 
    }));
}

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

<select id='mySelect'></select>

বিকল্প 2-

অথবা এটি ব্যবহার করে দেখুন-

$('#selectID').append( '<option value="'+value_variable+'">'+text_variable+'</option>' );

এটার মত-

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append( '<option value="'+i+'">'+'Option '+i+'</option>' );
}

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

<select id='mySelect'></select>

Answer 6

এটি খুব সহজ:

$('#select_id').append('<option value="five" selected="selected">Five</option>');

অথবা

$('#select_id').append($('<option>', {
                    value: 1,
                    text: 'One'
                }));

Answer 7

এটা ভাল কাজ করে।

যদি একাধিক বিকল্প উপাদান যুক্ত করা হয়, তবে আমি প্রতিটি উপাদানগুলিতে সংযোজন সম্পাদনের বিপরীতে একবার অ্যাপেন্ড সম্পাদন করার পরামর্শ দেব।

Answer 8

$("#myselect").append(new Option("text", "text"));আইও doing + এ যে কারণেই করা আমার পক্ষে কাজ করছে না

আমাকে ব্যবহার করতে হয়েছিল $("#myselect").html("<option value='text'>text</option>");

Comments

আমি অ্যান্ড্রয়েড Chrome ব্রাউজারে যে একই সিনট্যাক্স (নতুন অপশন (...) (ক ফোনে ব্যবহার করছি) এবং এটি সেখানে পারেন কাজ করছে না।

— raddevus

Answer 9

পারফরম্যান্সে সহায়তার জন্য আপনার একবারে কেবল ডিওএম পরিবর্তন করার চেষ্টা করা উচিত, এরপরেও যদি আপনি অনেকগুলি বিকল্প যুক্ত করে থাকেন।

var html = '';

for (var i = 0, len = data.length; i < len; ++i) {
    html.join('<option value="' + data[i]['value'] + '">' + data[i]['label'] + '</option>');
}           

$('#select').append(html);

Comments

পারফরম্যান্সের সাহায্যে আপনার string.join()স্ট্রিংগুলি সংযুক্ত করার জন্য ব্যবহার করা উচিত

— মফিনিস

এটি একটি দুর্দান্ত সমাধান। বৈধ ফাংশন না হওয়ার উদাহরণে আমার "জয়েন ()" নিয়ে একটি সমস্যা ছিল, তবে এই সমাধানটি আপনাকে যখন সমস্ত বিকল্প যুক্ত করা হয়েছে এবং DOM আপডেট করা হচ্ছে তখন তা নির্ধারণ করার জন্য jQuery "প্রতিশ্রুতি" ব্যবহার করতে দেয়। অন্যান্য সমাধানগুলির সাথে একের পর এক বিকল্প যুক্ত করে, এটি এত সহজে করা যায় না। উদাহরণস্বরূপ শেষ পংক্তির পরিবর্তে ডিওএম পরিবর্তন সম্পূর্ণ হওয়ার পরে কেবলমাত্র পদক্ষেপ নিতে: $। (যখন (hen ('# সিলেক্ট')। অ্যাপেন্ড (এইচটিএমএল)) হয়েছে function );

— আমেরিকাস

Answer 10

$('#mySelect').empty().append('<option value=1>My option</option>').selectmenu('refresh');

Comments

আমার ভুল না হলে এই সমাধানটির জন্য কেবল jQuery নয়, jQueryUI এরও প্রয়োজন। selectmenu()jQuery মূল অংশ নয় এবং একটি jQueryUI উইজেট । এটি একেবারে ভারী হাতে সমাধান করে তোলে, না?

— ট্যাটলার

Answer 11

আমি নন jquery পদ্ধতির ব্যবহার করতে চাই:

mySelect.add(new Option('My option', 1));

Comments

আমি এটি অ-

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

হ্যাঁ, এবং যদিও আমি jquery পাওয়ার প্রশ্ন করতে পারি না, এমন কিছু ঘটনা রয়েছে যা জিনিসগুলি সহজ করে না।

— সাইওহামমুর

Answer 12

নীচের উদাহরণে প্রদর্শিত হিসাবে আপনি ড্রপডাউনতে গতিশীল বিকল্পগুলি যুক্ত করতে পারেন। এখানে এই উদাহরণে আমি অ্যারে ডেটা নিয়েছি এবং আউটপুট স্ক্রিনশট হিসাবে প্রদর্শিত অ্যারে মানটিকে ড্রপডাউনে বাঁধাই

আউটপুট:

var resultData=["Mumbai","Delhi","Chennai","Goa"]
$(document).ready(function(){
   var myselect = $('<select>');
     $.each(resultData, function(index, key) {
	     myselect.append( $('<option></option>').val(key).html(key) );
       });
      $('#selectCity').append(myselect.html());
});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>

<select  id="selectCity">

</select>

Answer 13

কোনও উত্তরে উল্লেখ করা হয়নি তবে দরকারী সেই ক্ষেত্রে আপনি সেই বিকল্পটিও নির্বাচন করতে চান, আপনি যুক্ত করতে পারেন:

var o = new Option("option text", "value");
o.selected=true;
$("#mySelect").append(o);

Comments

ধন্যবাদ, আমার জেএসন থেকে উত্পন্ন বিকল্পটি বেছে নিতে হবে এবং এটি দুর্দান্তভাবে কাজ করেছে।

— জর্জি প্যাটশাইডার

Answer 14

var select = $('#myselect');
var newOptions = {
                'red' : 'Red',
                'blue' : 'Blue',
                'green' : 'Green',
                'yellow' : 'Yellow'
            };
$('option', select).remove();
$.each(newOptions, function(text, key) {
    var option = new Option(key, text);
    select.append($(option));
});

Answer 15

দুটি উপায় আছে। আপনি এই দুটি ব্যবহার করতে পারেন।

প্রথম:

$('#waterTransportationFrom').append('<option value="select" selected="selected">Select From Dropdown List</option>');

দ্বিতীয়ত:

$.each(dataCollecton, function(val, text) {            
    options.append($('<option></option>').val(text.route).html(text.route));
});

Answer 16

আপনি যদি একটি নির্দিষ্ট সূচীতে নতুন বিকল্পটি সন্নিবেশ করতে চান তবে:

$("#my_select option").eq(2).before($('<option>', {
    value: 'New Item',
    text: 'New Item'
}));

এটি নির্বাচনের তৃতীয় আইটেম হিসাবে "নতুন আইটেম" প্রবেশ করানো হবে।

Answer 17

আপনি পাঠ্যের সাথে মান বৈশিষ্ট্য সংযোজন এবং সেট করতে পারেন:

$("#id").append($('<option></option>').attr("value", '').text(''));
$("#id").append($('<option></option>').attr("value", '4').text('Financial Institutions'));

Answer 18

আপনি বিকল্প সংযোজন এবং jquery বৈধতা ব্যবহার করার সময় আমরা কিছু সমস্যা পেয়েছি। একাধিক তালিকার জন্য আপনাকে অবশ্যই একটি আইটেম ক্লিক করতে হবে। আপনি এই কোডটি পরিচালনা করতে যুক্ত করবেন:

$("#phonelist").append("<option value='"+ 'yournewvalue' +"' >"+ 'yournewvalue' +"</option>");

$("#phonelist option:selected").removeAttr("selected"); // add to remove lase selected

$('#phonelist option[value=' + 'yournewvalue' + ']').attr('selected', true); //add new selected

Answer 19

এই সম্পর্কে কিভাবে

var numbers = [1, 2, 3, 4, 5];
var option = '';

for (var i=0;i<numbers.length;i++){
     option += '<option value="'+ numbers[i] + '">' + numbers[i] + '</option>';
    }

    $('#items').append(option);

Answer 20

এটি সেরা অভিনয়ের জন্য একটি দ্রুত পয়েন্ট quick

সর্বদা আপনি যখন অনেকগুলি বিকল্পের সাথে ডিল করছেন, একটি বড় স্ট্রিং তৈরি করুন এবং তারপরে সেরা পারফরম্যান্সের জন্য এটি 'নির্বাচন করুন' এ যুক্ত করুন

FG

var $ mySelect = $ ('# মাই সিলেক্ট'); var str = '';

$.each(items, function (i, item) {
    // IMPORTANT: no selectors inside the loop (for the best performance)
    str += "<option value='" + item.value + "'> " + item.text + "</option>";
});
// you built a big string

$mySelect.html(str); // <-- here you add the big string with a lot of options into the selector.
$mySelect.multiSelect('refresh');

আরও দ্রুত

var str = ""; 
for(var i; i = 0; i < arr.length; i++){
    str += "<option value='" + item[i].value + "'> " + item[i].text + "</option>";
}    
$mySelect.html(str);
$mySelect.multiSelect('refresh');

Answer 21

$(function () {
     var option = $("<option></option>");
     option.text("Display text");
     option.val("1");
     $("#Select1").append(option);
});

যদি আপনি কোনও অবজেক্ট থেকে ডেটা পেয়ে থাকেন তবে কেবল সেই অবজেক্টটি ফাংশনে ফরোয়ার্ড করুন ...

$(function (product) {
     var option = $("<option></option>");
     option.text(product.Name);
     option.val(product.Id);
     $("#Select1").append(option);
});

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

Answer 22

আইটেমের সংকলন সংযোজনের জন্য ডুলের উত্তরের ভিত্তিতে , একটি ওয়ান-লাইনারওfor...in বিস্ময়ের কাজ করবে:

let cities = {'ny':'New York','ld':'London','db':'Dubai','pk':'Beijing','tk':'Tokyo','nd':'New Delhi'};

for(let c in cities){$('#selectCity').append($('<option>',{value: c,text: cities[c]}))}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<select  id="selectCity"></select>

উভয় বস্তুর মান এবং সূচি অপশনগুলিতে বরাদ্দ করা হয়। এই সমাধানটি পুরানো jQuery (v1.4) তেও কাজ করে !

Answer 23

যদি আপনার নির্বাচনের ভিতরে অপ্টগ্রুপ থাকে তবে আপনি ডিওমে ত্রুটি পেয়েছেন।

আমি একটি সেরা উপায় মনে করি:

$("#select option:last").after($('<option value="1">my option</option>'));

Answer 24

ইউ বিকল্পের সাথে যুক্ত করতে কোডের নীচে চেষ্টা করতে পারেন

  <select id="mySelect"></select>

    <script>
          $("#mySelect").append($("<option></option>").val("1").html("My enter code hereoption"));
    </script>

Answer 25

$('#select_id').append($('<option>',{ value: v, text: t }));

Answer 26

প্রতিটি বাছাই করা ট্যাগ যুক্ত করার জন্য একটি বোতামের সাহায্যে আমি এটি করেছি।

$(document).on("click","#button",function() {
   $('#id_table_AddTransactions').append('<option></option>')
}

Comments

এটি কি হওয়া উচিত$(document).ready(function(){ $("#button").click(function() { $('#id_table_AddTransactions').append('<option></option>'); }); });

— বারিক ধর্মওয়ান

হ্যাঁ, আপনি ঠিক এই সম্পর্কে। আমার উত্তরে প্রস্তুত বিবৃতি অন্তর্ভুক্ত করা হয়নি কারণ, আমি কী সমস্যার সমাধান করেছি তার দিকে দৃষ্টি নিবদ্ধ করে।

— রোনাল্ড ভ্যালেরা সান্টানা

Answer 27

আপনি এটি ES6 এ করতে পারেন:

$.each(json, (i, val) => {
    $('.js-country-of-birth').append(`<option value="${val.country_code}"> ${val.country} </option>`);
  });

Answer 28

যদি কেউ এখানে আসে তবে ডেটা বৈশিষ্ট্য সহ বিকল্পগুলি যুক্ত করার উপায় খুঁজছেন

অ্যাটর ব্যবহার করে

var option = $('<option>', { value: 'the_value', text: 'some text' }).attr('family', model.family);

ডেটা ব্যবহার করে - সংস্করণ যোগ করা হয়েছে 1.2.3

var option = $('<option>', { value: 'the_value', text: 'some text' }).data('misc', 'misc-value);