JQuery සමඟ ජාවාස්ක්‍රිප්ට් වස්තුවක් ලෙස තෝරා ගැනීමකට විකල්ප එකතු කිරීමට හොඳම ක්‍රමය කුමක්ද?

<select>JQuery භාවිතා කරමින් ජාවාස්ක්‍රිප්ට් වස්තුවකින් විකල්ප එකතු කිරීම සඳහා හොඳම ක්‍රමය කුමක්ද?

මට කිරීමට ප්ලගිනයක් අවශ්‍ය නොවන දෙයක් මම සොයමි, නමුත් එහි ඇති ප්ලගීන ගැනද මම උනන්දු වෙමි.

මම කළේ මෙයයි:

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

පිරිසිදු / සරල විසඳුමක්:

මෙය මතම්සා හි පිරිසිදු කළ හා සරල කළ අනුවාදයකි :

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

Matdumsa හි වෙනස්වීම්: (1) උපග්‍රන්ථය () ​​තුළ ඇති විකල්පය සඳහා සමීප ටැගය ඉවත් කර ඇති අතර (2) ගුණාංග / ගුණාංග සිතියමකට ගෙන ගියේ උපග්‍රන්ථයේ දෙවන පරාමිතිය ලෙස ය.

වෙනත් පිළිතුරු වලට සමානව, jQuery ආකාරයෙන්:

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value", key)
                    .text(value)); 
});

var output = [];

$.each(selectValues, function(key, value)
{
  output.push('<option value="'+ key +'">'+ value +'</option>');
});

$('#mySelect').html(output.join(''));

මේ ආකාරයට ඔබ "DOM ස්පර්ශ කරන්න" එක් වරක් පමණි.

නවතම රේඛාව $ ('# mySelect') බවට පරිවර්තනය කළ හැකිදැයි මට විශ්වාස නැත. Html (output.join ('')) මම jQuery අභ්‍යන්තරයන් නොදන්නා නිසා (සමහර විට එය html () හි සමහර විග්‍රහයන් කරයි. ක්‍රමය)

මෙය තරමක් වේගවත් හා පිරිසිදුයි.

var selectValues = {
  "1": "test 1",
  "2": "test 2"
};
var $mySelect = $('#mySelect');
//
$.each(selectValues, function(key, value) {
  var $option = $("<option/>", {
    value: key,
    text: value
  });
  $mySelect.append($option);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect"></select>

jQuery

var list = $("#selectList");
$.each(items, function(index, item) {
  list.append(new Option(item.text, item.value));
});

වැනිලා ජාවාස්ක්‍රිප්ට්

var list = document.getElementById("selectList");
for(var i in items) {
  list.add(new Option(items[i].text, items[i].value));
}

ඔබට පැරණි IE අනුවාදයන්ට සහය දැක්වීමට අවශ්‍ය නොවන්නේ නම්, Optionඉදිකිරීම්කරු භාවිතා කිරීම පැහැදිලිවම යා යුතු මාර්ගයයි, කියවිය හැකි සහ කාර්යක්ෂම විසඳුමක් :

$(new Option('myText', 'val')).appendTo('#mySelect');

එය ක්‍රියාකාරීත්වයට සමාන නමුත් වඩා පිරිසිදු:

$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');

මෙය වඩා හොඳ පෙනුමක්, කියවීමේ හැකියාව ලබා දෙයි, නමුත් වෙනත් ක්‍රමවලට වඩා මන්දගාමී වේ.

$.each(selectData, function(i, option)
{
    $("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});

ඔබට වේගය අවශ්‍ය නම්, වේගවත්ම (පරීක්‍ෂා කරන ලද) ක්‍රමය මෙයයි, අරාව භාවිතා කිරීම, නූල් සම්මුතියක් නොව, එක් උපග්‍රන්ථ ඇමතුමක් පමණක් භාවිතා කිරීම.

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});

$('#selectBox').append(auxArr.join(''));

පැරණි @ ජොෂ්පෙරිගේ පිළිතුරේ ශෝධනයක් :

සරල .අපෙන්ඩ් ද අපේක්ෂිත පරිදි ක්‍රියාත්මක වන බව පෙනේ ,

$("#mySelect").append(
  $.map(selectValues, function(v,k){

    return $("<option>").val(k).text(v);
  })
);

හෝ කෙටි,

$("#mySelect").append(
  $.map(selectValues, (v,k) => $("<option>").val(k).text(v))
  // $.map(selectValues, (v,k) => new Option(v, k)) // using plain JS
);

මෙම පිළිතුරු සියල්ලම අනවශ්‍ය ලෙස සංකීර්ණ බව පෙනේ. ඔබට අවශ්‍ය වන්නේ:

var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
        options[options.length] = new Option(value, key);
});

එය සම්පූර්ණයෙන්ම හරස් බ්‍රව්සරයට අනුකූල වේ.

අවවාද කරන්න ... මම ඇන්ඩ්‍රොයිඩ් 2.2 (සයනොජන් 7.0.1) දුරකථනයක (ටී-මොබයිල් ජී 2) ෆෝන්ගෑප් 1.0.0 සමඟ jQuery මොබයිල් 1.0 බී 2 භාවිතා කරමි .එසේම වැඩ කිරීමට .append () ක්‍රමය ලබා ගැනීමට නොහැකි විය. මට පහත පරිදි .html () භාවිතා කිරීමට සිදු විය:

var options;
$.each(data, function(index, object) {
    options += '<option value="' + object.id + '">' + object.stop + '</option>';
});

$('#selectMenu').html(options);

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

 $('#choose_schedule').get(0).innerHTML = output.join('');

මම පරීක්ෂණ කිහිපයක් කර ඇති අතර මෙය වේගවත්ම කාර්යය කරන බව මම විශ්වාස කරමි. : පී

මයික්‍රොසොෆ්ට් ටෙම්ප්ලේටින් ප්‍රවේශය භාවිතා කරමින් ප්‍රවේශයක් ඇත, එය දැනට jQuery හරයට ඇතුළත් කිරීමේ යෝජනාව යටතේ පවතී. සැකිලි භාවිතා කිරීමේදී වැඩි බලයක් ඇත, එබැවින් සරලම අවස්ථාව සඳහා එය හොඳම විකල්පය නොවනු ඇත. වැඩි විස්තර සඳහා ස්කොට් ගුගේ පෝස්ටුවේ විශේෂාංග දක්වයි.

පළමුව templating JS ගොනු, ලබා ගත හැකි වේ github .

<script src="Scripts/jquery.tmpl.js" type="text/javascript" />

ඊළඟට අච්චුවක් සකසන්න

<script id="templateOptionItem" type="text/html">
    <option value=\'{{= Value}}\'>{{= Text}}</option>
</script>

ඔබේ දත්ත සමඟ .render () ක්‍රමය අමතන්න

var someData = [
    { Text: "one", Value: "1" },
    { Text: "two", Value: "2" },
    { Text: "three", Value: "3"}];

$("#templateOptionItem").render(someData).appendTo("#mySelect");

මම මෙම ප්‍රවේශය වඩාත් විස්තරාත්මකව බ්ලොග් කර ඇත.

මම මේ වගේ දෙයක් හදලා, අජැක්ස් හරහා ඩ්‍රොප් ඩවුන් අයිතමයක් පූරණය කරනවා . ඉහත ප්‍රතිචාරය ද පිළිගත හැකි නමුත් වඩා හොඳ කාර්ය සාධනයක් සඳහා හැකි තරම් කුඩා DOM වෙනස් කිරීම සැමවිටම හොඳ ය.

එබැවින් එක් එක් අයිතමය ලූපයක් තුළට එකතු කරනවාට වඩා ලූපයක් තුළ අයිතම එකතු කර එය අවසන් වූ පසු එය එකතු කිරීම වඩා හොඳය.

$(data).each(function(){
    ... Collect items
})

එය එකතු කරන්න,

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

හෝ ඊටත් වඩා හොඳයි

$('#select_id').html(items);

සරලම ක්‍රමය නම්:

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");

අනෙක් බොහෝ පිළිතුරු eachශ්‍රිතය භාවිතා කරන්නේ නැවත නැවත යෙදීම සඳහා ය selectValues. මේ සඳහා එක් එක් මූලද්‍රව්‍යය සඳහා උපග්‍රන්ථය කැඳවිය යුතු අතර ඒවා එක් එක් එකතු කළ විට ප්‍රත්‍යාවර්තයක් අවුලුවන.

මෙම පිළිතුර වඩාත් මුග්ධ ක්‍රියාකාරී ක්‍රමයකට යාවත්කාලීන කිරීම (නූතන ජේඑස් භාවිතා කරමින්) appendඑක් වරක් පමණක් ඇමතීමට හැකි අතර, සිතියම සහ optionමූලද්‍රව්‍ය සාදන්නා භාවිතා කරමින් මූලද්‍රව්‍ය සමූහයක් නිර්මාණය කර ඇත.Option

OptionDOM මූලද්‍රව්‍යයක් භාවිතා කිරීමෙන් ක්‍රියාකාරී ඇමතුම් ඉහළින් අඩු කළ optionයුතු අතර එය නිර්මාණය කිරීමෙන් පසු මූලද්‍රව්‍යය යාවත්කාලීන කිරීමට අවශ්‍ය නොවන අතර jQuery හි විග්‍රහ කිරීමේ තර්කනය ක්‍රියාත්මක නොවිය යුතුය.

$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))

ඔබ කර්මාන්තශාලා උපයෝගිතා ශ්‍රිතයක් කළහොත් විකල්ප වස්තුවක් අලුත් කරන විට මෙය තවදුරටත් සරල කළ හැකිය:

const newoption = (...args) => new Option(...args)

එවිට මෙය කෙලින්ම ලබා දිය හැකිය map:

$('mySelect').append($.map(selectValues, newoption))

පෙර සූත්රය

appendවිචල්‍ය තර්ක සංඛ්‍යාවක් ලෙස සම්මත අගයන් සම්මත කිරීමට ඉඩ දෙන හෙයින් , අපට optionමූලද්‍රව්‍ය සිතියම් ලැයිස්තුව කලින් නියම කර ඒවා භාවිතා කිරීමෙන් තනි ඇමතුමක තර්ක ලෙස එකතු කළ හැකිය apply.

$.fn.append.apply($('mySelect'), $.map(selectValues, (k, v) => $("<option/>").val(k).text(v)));

JQuery හි පසු සංස්කරණ වලදී appendද අරාව තර්කයක් පිළිගන්නා බව පෙනේ, මෙය තරමක් සරල කළ හැකිය:

$('mySelect').append($.map(selectValues, (k, v) => $("<option/>").val(k).text(v)))

function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('<option></option>').val(option.value).html(option.name));   
    });          
}   

එය jQuery 1.4.1 සමඟ හොඳින් ක්‍රියා කරයි.

ASP.NET MVC සහ jQuery සමඟ ගතික ලැයිස්තු භාවිතා කිරීම සඳහා සම්පූර්ණ ලිපිය සඳහා:

MVC සහ jQuery සමඟ ගතික තේරීම් ලැයිස්තු

ක්‍රෝම් හි මෙම විසඳුම සමඟ වර්ග කිරීමේ ගැටළුවක් ඇත (jQuery 1.7.1) (ක්‍රෝම් වස්තු ගුණාංග නම / අංකය අනුව වර්ග කරයිද?) එබැවින් ඇණවුම තබා ගැනීමට (ඔව්, එය වස්තු අනිසි ලෙස භාවිතා කිරීම), මම මෙය වෙනස් කළෙමි:

optionValues0 = {"4321": "option 1", "1234": "option 2"};

මේකට

optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};

එවිට $. සෑම එකක්ම පෙනෙනු ඇත:

$.each(optionValues0, function(order, object) {
  key = object.id;
  value = object.value;
  $('#mySelect').append($('<option>', { value : key }).text(value));
}); 

සෑම තැනකම එකම කේතය පුනරාවර්තනය කරනවා වෙනුවට, ඔබේම jQuery ශ්‍රිතය ලිවීම වඩාත් යෝග්‍ය යැයි මම යෝජනා කරමි:

jQuery.fn.addOption = function (key, value) {
    $(this).append($('<option>', { value: key }).text(value));
};

විකල්පයක් එක් කිරීමට පහත සඳහන් දේ කරන්න:

$('select').addOption('0', 'None');

ඔබට පහත කේතය සමඟ ඔබේ json අරාව හරහා නැවත යෙදිය හැකිය

$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");

පෙර පිළිතුරු සියල්ලම වලංගු පිළිතුරු වුවද - පළමුවෙන්ම මේ සියල්ල ලේඛනයකට එකතු කිරීම සුදුසු විය හැකිය, පසුව එම ලේඛන කැබැල්ල මූලද්‍රව්‍යයක් ලෙස එකතු කරන්න ...

මේ සම්බන්ධයෙන් ජෝන් රෙසිග්ගේ අදහස් බලන්න ...

පහත දැක්වෙන පරිදි:

var frag = document.createDocumentFragment();

for(item in data.Events)
{
    var option = document.createElement("option");

    option.setAttribute("value", data.Events[item].Key);
    option.innerText = data.Events[item].Value;

    frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);

1. $.each a ට වඩා මන්දගාමී වේ for වේ
2. සෑම අවස්ථාවකදීම, DOM තේරීමක් ලූපයේ හොඳම පුහුණුව නොවේ $("#mySelect").append();

එබැවින් හොඳම විසඳුම පහත දැක්වේ

JSON දත්ත respනම්

[
    {"id":"0001", "name":"Mr. P"},
    {"id":"0003", "name":"Mr. Q"},
    {"id":"0054", "name":"Mr. R"},
    {"id":"0061", "name":"Mr. S"}
]

එය භාවිතා කරන්න

var option = "";
for (i=0; i<resp.length; i++) {
    option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);

එය කළ හැකි තවත් ක්‍රමයක්:

var options = [];    
$.each(selectValues, function(key, value) {
    options.push($("<option/>", {
        value: key,
        text: value
    }));
});
$('#mySelect').append(options);

if (data.length != 0) {
    var opts = "";
    for (i in data)
        opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";

    $("#myselect").empty().append(opts);
}

මෙය යෝධ නූලක් තැනීමෙන් පසු එක් වරක් පමණක් DOM හසුරුවයි.

අයිතමය මා විසින් පළමු තීරුව වෙත එකතු කරන්න: මම ද්විමාන පෙලගැස්මක් සමඟ කළ දේ innerHTMLපිළිබඳ <option>. දෙවන තීරුව i, එකතු කරනු record_id ඇත valueපිළිබඳ <option>:

1. PHP

   $items = $dal->get_new_items(); // Gets data from the database
   $items_arr = array();
   $i = 0;
   foreach ($items as $item)
   {
       $first_name = $item->first_name;
       $last_name = $item->last_name;
       $date = $item->date;
       $show = $first_name . " " . $last_name . ", " . $date;
       $request_id = $request->request_id;
       $items_arr[0][$i] = $show;
       $items_arr[1][$i] = $request_id;
       $i++;
   }
   
   echo json_encode($items_arr);

2. JavaScript / Ajax

           function ddl_items() {
               if (window.XMLHttpRequest) {
                   // Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
                   xmlhttp=new XMLHttpRequest();
               }
               else{
                   // Code for Internet Explorer 6 and Internet Explorer 5
                   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
               }
   
               xmlhttp.onreadystatechange=function() {
               if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                   var arr = JSON.parse(xmlhttp.responseText);
                   var lstbx = document.getElementById('my_listbox');
   
                   for (var i=0; i<arr.length; i++) {
                       var option = new Option(arr[0][i], arr[1][i]);
                       lstbx.options.add(option);
                   }
               }
           };
   
           xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
           xmlhttp.send();
       }
   }

JQuery ප්ලගිනයක් මෙහි සොයාගත හැකිය: jQuery සහ AJAX භාවිතා කරමින් ස්වයංක්‍රීයව තෝරාගත් කොටු තෝරන්න .

මෙය සරල බවත් විශිෂ්ට ලෙස ක්‍රියා කරන බවත් මට පෙනී ගියේය.

for (var i = 0; i < array.length; i++) {
    $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};

JSON ආකෘතිය:

[{
    "org_name": "Asset Management"
}, {
    "org_name": "Debt Equity Foreign services"
}, {
    "org_name": "Credit Services"
}]

අජැක්ස් සාර්ථකත්වයේ පහත වැටීම සඳහා අගයන් ජනනය කිරීම සඳහා jQuery කේතය:

success: function(json) {
    var options = [];
    $('#org_category').html('');  // Set the Dropdown as Blank before new Data
    options.push('<option>-- Select Category --</option>');
    $.each(JSON.parse(json), function(i, item) {
        options.push($('<option/>',
        {
           value: item.org_name, text: item.org_name
        }));
    });
    $('#org_category').append(options);  // Set the Values to Dropdown
}

$ .Map () ශ්‍රිතය භාවිතා කරමින් ඔබට මෙය වඩාත් අලංකාර ආකාරයකින් කළ හැකිය:

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));

<!DOCTYPE html>
<html lang="en">
<head>
  <title>append selectbox using jquery</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script type="text/javascript">
    function setprice(){
        var selectValues = { "1": "test 1", "2": "test 2" };
        $.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});

    }
  </script>
</head>
<body onload="setprice();">


      <select class="form-control" id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>


</body>
</html>

ඔබගේ HTML තෝරාගත් හැඳුනුම්පත පහත පේළියට සකසන්න. මෙහි mySelectදී තෝරාගත් මූලද්‍රව්‍යයේ හැඳුනුම්පත ලෙස භාවිතා වේ.

   var options = $("#mySelect");

ඉන්පසු මෙම අවස්ථාවෙහිදී තෝරාගත් අගයන් වන වස්තුව ලබා ගෙන එය එක් එක් ලූපය සඳහා jquery වෙත සකසන්න. එය ඒ අනුව වස්තූන්ගේ වටිනාකම සහ පෙළ භාවිතා කරන අතර එය විකල්ප තේරීම් වලට පහත පරිදි එකතු කරයි.

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

පතන ලැයිස්තුව තෝරාගත් විට මෙය විකල්ප ලැයිස්තුවක් ලෙස පෙන්වනු ඇති අතර පෙළක් තෝරාගත් පසු තෝරාගත් පෙළෙහි අගය භාවිතා වේ.

උදා.

"1": "පරීක්ෂණය 1", "2": "පරීක්ෂණය 2",

පතන,

display name: test 1 -> value 1 display name: test 2 -> value 2

ඇත්ත වශයෙන්ම, වැඩිදියුණු කළ කාර්ය සාධනය ලබා ගැනීම සඳහා, විකල්ප ලැයිස්තුව වෙන වෙනම සකස් කර හැඳුනුම්පත තෝරා ගැනීම වඩා හොඳය.

var options = [];
$.each(selectValues, function(key, value) {
    options.push ($('<option>', { value : key })
          .text(value));
});
 $('#mySelect').append(options);

http://learn.jquery.com/performance/append-outside-loop/