অ্যাজাক্স সহ 2.0.0 প্রাথমিক মান নির্বাচন করুন

Question 1

আমার কাছে একটি নির্বাচন 2 ভি 4.0.0 আছে একটি অ্যাজাক্স অ্যারে থেকে পপুলেট করা। আমি যদি সিলেক্ট 2 এর মানটি সেট করি তবে আমি জাভাস্ক্রিপ্ট ডিবাগিংয়ের মাধ্যমে দেখতে পাচ্ছি যে এটি সঠিক আইটেমটি নির্বাচন করেছে (আমার ক্ষেত্রে # 3), তবে এটি নির্বাচিত বাক্সে প্রদর্শিত হয়নি, এটি এখনও স্থানধারকটি দেখাচ্ছে। এখানে চিত্র বর্ণনা লিখুন

যদিও আমার এমন কিছু দেখা উচিত: এখানে চিত্র বর্ণনা লিখুন

আমার ফর্ম ক্ষেত্রগুলিতে:

<input name="creditor_id" type="hidden" value="3">
<div class="form-group minimal form-gap-after">
    <span class="col-xs-3 control-label minimal">
        <label for="Creditor:">Creditor:</label>
    </span>
    <div class="col-xs-9">
        <div class="input-group col-xs-8 pull-left select2-bootstrap-prepend">
            <select class="creditor_select2 input-xlarge form-control minimal select2 col-xs-8">
                <option></option>
            </select>
        </div>
    </div>
</div>

আমার জাভাস্ক্রিপ্ট:

var initial_creditor_id = "3";
$(".creditor_select2").select2({
    ajax: {
       url: "/admin/api/transactions/creditorlist",
       dataType: 'json',
       delay: 250,
       data: function (params) {
           return {
                q: params.term,
                c_id: initial_creditor_id,
                page: params.page
           };
       },
       processResults: function (data, page) {
            return {
                results: data
            };
       },
       cache: true
   },
   placeholder: "Search for a Creditor",
   width: "element",
   theme: "bootstrap",
   allowClear: true
   }).on("select2:select", function (e) {
      var selected = e.params.data;
      if (typeof selected !== "undefined") {
           $("[name='creditor_id']").val(selected.creditor_id);
           $("#allocationsDiv").hide();
           $("[name='amount_cash']").val("");
           $("[name='amount_cheque']").val("");
           $("[name='amount_direct']").val("");
           $("[name='amount_creditcard']").val("");
        }
    }).on("select2:unselecting", function (e) {
        $("form").each(function () {
            this.reset()
        });
        ("#allocationsDiv").hide();
        $("[name='creditor_id']").val("");
    }).val(initial_creditor_id);

আমি কীভাবে নির্বাচিত বাক্সটিকে স্থানধারকের চেয়ে নির্বাচিত আইটেমটি প্রদর্শন করতে পারি? আমি কি সম্ভবত এজেএক্স জেএসএন প্রতিক্রিয়ার অংশ হিসাবে এটি পাঠাচ্ছি?

অতীতে, সিলেক্ট 2-তে একটি বিকল্প প্রয়োজন যা ডিভাইসলেকশন নামে পরিচিত যা সংজ্ঞায়িত হয়েছিল যখনই কোনও কাস্টম ডেটা উত্স ব্যবহৃত হচ্ছিল, উপাদানটির প্রাথমিক নির্বাচনের জন্য নির্ধারিত করার অনুমতি দেয়। এটি আমার জন্য v3.5-তে দুর্দান্ত কাজ করেছে worked

Question 2

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

.val(initial_creditor_id).trigger('change');

আপনার সমস্যাটি ঠিক করা উচিত এবং আপনার এখনই ইউআই আপডেটটি দেখা উচিত।

এটি ধরে নেওয়া হচ্ছে যে আপনার কাছে <option>ইতিমধ্যে একটি valueরয়েছে initial_creditor_id। আপনি যদি সিলেক্ট 2, এবং ব্রাউজারটি না করেন তবে স্যুইচ করার কোনও বিকল্প নেই বলে, এবং সিলেক্ট 2 নতুন মানটি সনাক্ত করতে পারে না বলে মানটি আসলে পরিবর্তন করতে সক্ষম হবে না। আমি লক্ষ্য করেছি যে আপনার <select>কেবলমাত্র একটি একক বিকল্প রয়েছে, প্লেসহোল্ডারের জন্য একটি, যার অর্থ আপনাকে <option>নিজেই নতুন তৈরি করতে হবে ।

var $option = $("<option selected></option>").val(initial_creditor_id).text("Whatever Select2 should display");

এবং তারপরে এটি সংযোজন করুন <select>যা আপনি নির্বাচন 2 শুরু করেছিলেন। আপনাকে বাইরের উত্স থেকে পাঠ্যটি পেতে হতে পারে, এটিই initSelectionখেলতে আসার জন্য ব্যবহৃত হয়, যা সিলেক্ট ২.০.০.০ সহ এখনও সম্ভব। স্ট্যান্ডার্ড সিলেক্টের মতো, এর অর্থ আপনাকে মানটি পুনরুদ্ধার করতে AJAX অনুরোধ করতে হবে এবং তারপরে <option>সামঞ্জস্য করার জন্য ফ্লাইতে পাঠ্যটি সেট করতে হবে।

var $select = $('.creditor_select2');

$select.select2(/* ... */); // initialize Select2 and any events

var $option = $('<option selected>Loading...</option>').val(initial_creditor_id);

$select.append($option).trigger('change'); // append the option and update Select2

$.ajax({ // make the request for the selected data object
  type: 'GET',
  url: '/api/for/single/creditor/' + initial_creditor_id,
  dataType: 'json'
}).then(function (data) {
  // Here we should have the data object
  $option.text(data.text).val(data.id); // update the text that is displayed (and maybe even the value)
  $option.removeData(); // remove any caching data that might be associated
  $select.trigger('change'); // notify JavaScript components of possible changes
});

যদিও এটি অনেকগুলি কোডের মতো দেখতে পারে, আপনি সমস্ত পরিবর্তন হয়েছে কিনা তা নিশ্চিত করতে আপনি সিলেক্টড -2 নির্বাচন করা বাক্সের জন্য ঠিক এটিই করবেন।

Question 3

আমি যা করেছি তা আরও পরিষ্কার এবং দুটি অ্যারে করা দরকার:

একটিতে আইডি এবং একটি পাঠ্য সহ অবজেক্টের একটি তালিকা রয়েছে (আমার ক্ষেত্রে এটির আইডি এবং নামটি আপনার টেমপ্লেটের ফলাফলের উপর নির্ভর করে) (এটি আপনি অ্যাজাক্স কোয়েরি থেকে পান)
দ্বিতীয়টি হ'ল আইডির একটি অ্যারে (নির্বাচনের মান)

আমি প্রথম অ্যারের ডেটা হিসাবে এবং দ্বিতীয়টি ভাল হিসাবে ব্যবহার করে সিলেক্ট 2 সূচনা করি।

পরামিতি হিসাবে আইডির একটি ডিক হিসাবে একটি উদাহরণ কাজ করে: নাম।

function initMyList(values) {
    var selected = [];
    var initials = [];

    for (var s in values) {
        initials.push({id: s, name: values[s].name});
        selected.push(s);
    }

    $('#myselect2').select2({
        data: initials,
        ajax: {
            url: "/path/to/value/",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    term: params.term,
                    page: params.page || 1,
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;

                return {
                    results: data.items,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: true
        },
        minimumInputLength: 1,
        tokenSeparators: [",", " "],
        placeholder: "Select none, one or many values",
        templateResult: function (item) { return item.name; },
        templateSelection: function (item) { return item.name; },
        matcher: function(term, text) { return text.name.toUpperCase().indexOf(term.toUpperCase()) != -1; },
    });

    $('#myselect2').val(selected).trigger('change');
}

আপনি আজাক্স কলগুলি ব্যবহার করে আদ্যক্ষেত্রের মানটি খাওয়াতে পারবেন এবং সিলেক্ট 2 ইনিশিয়ালাইজেশন করার জন্য jquery প্রতিশ্রুতি ব্যবহার করুন।

Question 4

এটা আমার জন্য কাজ ...

JQuery ব্যবহার করবেন না, কেবল এইচটিএমএল: আপনি নির্বাচিত হিসাবে প্রদর্শিত বিকল্প বিকল্পটি তৈরি করুন । আইডি যদি এটি সিলেক্ট্র ডেটাতে থাকে তবে এটি স্বয়ংক্রিয়ভাবে নির্বাচিত হবে।

<select id="select2" name="mySelect2">
  <option value="mySelectedValue">
        Hello, I'm here!
  </option>
</select>

নির্বাচন করুন 2.org - পূর্বনির্ধারিত পূর্বনির্ধারিত মান

Question 5

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

আমি গভীর খনন করে নিম্নলিখিতগুলি পেয়েছি: https://github.com/select2/select2/issues/3620

উদাহরণ:

$dropDown.val(1).trigger('change.select2');

Question 6

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

$('#mySelect').select2({
    ajax: {
        url: endpoint,
        dataType: 'json',
        data: [
            { // Each of these gets processed by fnRenderResults.
                id: usersId,
                text: usersFullName,
                full_name: usersFullName,
                email: usersEmail,
                image_url: usersImageUrl,
                selected: true // Causes the selection to actually get selected.
            }
        ],
        processResults: function(data) {

            return {
                results: data.users,
                pagination: {
                    more: data.next !== null
                }
            };

        }
    },
    templateResult: fnRenderResults,
    templateSelection: fnRenderSelection, // Renders the result with my own style
    selectOnClose: true
});

Question 7

আপনি যদি একটি টেম্পলেট নির্বাচন এবং এজ্যাক্স ব্যবহার করছেন তবে এই উত্তরগুলির মধ্যে কিছু কাজ নাও করতে পারে। দেখে মনে হয় যে কোনও নতুন optionউপাদান তৈরি করা এবং সেটিংস স্থাপন করা valueএবং textটেম্পলেট পদ্ধতিটি সন্তুষ্ট করবে না যখন আপনার ডেটা অবজেক্টগুলি আইডি এবং পাঠ্যের চেয়ে অন্য মানগুলি ব্যবহার করে।

আমার জন্য যা কাজ করেছে তা এখানে:

$("#selectElem").select2({
  ajax: { ... },
  data: [YOUR_DEFAULT_OBJECT],
  templateSelection: yourCustomTemplate
}

এখানে জেএসফিডেলটি দেখুন: https://jsfiddle.net/shanabus/f8h1xnv4

আমার ক্ষেত্রে, processResultsযেহেতু আমার ডেটাতে প্রয়োজনীয় idএবং textক্ষেত্রগুলি অন্তর্ভুক্ত ছিল না আমাকে তা করতে হয়েছিল । আপনার যদি এটি করার দরকার হয় তবে একই কাজটির মাধ্যমে আপনার প্রাথমিক নির্বাচনটি চালানো দরকার। তাই ভালো:

$(".js-select2").select2({
  ajax: {
    url: SOME_URL,
    processResults: processData
  },
  data: processData([YOUR_INIT_OBJECT]).results,
  minimumInputLength: 1,
  templateSelection: myCustomTemplate
});

function processData(data) {
  var mapdata = $.map(data, function (obj) {      
    obj.id = obj.Id;
    obj.text = '[' + obj.Code + '] ' + obj.Description;
    return obj;
  });
  return { results: mapdata }; 
}

function myCustomTemplate(item) {
     return '<strong>' + item.Code + '</strong> - ' + item.Description;
}

Question 8

সমাধান অনুসন্ধানের জন্য কয়েক ঘন্টা ব্যয় করার পরে, আমি নিজের তৈরি করার সিদ্ধান্ত নিয়েছি। তিনি হলেন:

 function CustomInitSelect2(element, options) {
            if (options.url) {
                $.ajax({
                    type: 'GET',
                    url: options.url,
                    dataType: 'json'
                }).then(function (data) {
                    element.select2({
                        data: data
                    });
                    if (options.initialValue) {
                        element.val(options.initialValue).trigger('change');
                    }
                });
            }
        }

এবং আপনি এই ফাংশনটি ব্যবহার করে নির্বাচনগুলি শুরু করতে পারেন:

$('.select2').each(function (index, element) {
            var item = $(element);
            if (item.data('url')) {
                CustomInitSelect2(item, {
                    url: item.data('url'),
                    initialValue: item.data('value')
                });
            }
            else {
                item.select2();
            }
        });

এবং অবশ্যই, এখানে এইচটিএমএল:

<select class="form-control select2" id="test1" data-url="mysite/load" data-value="123"></select>

Question 9

একটি সাধারণ এবং শব্দার্থক সমাধানের জন্য আমি এইচটিএমএলের প্রাথমিক মানটি সংজ্ঞায়িত করতে পছন্দ করি, উদাহরণস্বরূপ:

<select name="myfield" data-placeholder="Select an option">
    <option value="initial-value" selected>Initial text</option>
</select>

তাই আমি যখন কল করি $('select').select2({ ajax: {...}});তখন প্রাথমিক মান হয় initial-valueএবং এর বিকল্প পাঠ্য Initial text।

আমার বর্তমান সিলেক্ট 2 সংস্করণটি 4.0.3 , তবে আমি মনে করি এটি অন্যান্য সংস্করণগুলির সাথে একটি দুর্দান্ত সামঞ্জস্যতা রয়েছে।

Question 10

https://github.com/select2/select2/issues/4272 কেবল এটিই আমার সমস্যার সমাধান করেছে। এমনকি আপনি বিকল্প দ্বারা ডিফল্ট মান সেট করেন, আপনাকে অবজেক্টটি ফর্ম্যাট করতে হবে, এতে পাঠ্যের বৈশিষ্ট্য রয়েছে এবং এটি আপনার বিকল্পটিতে আপনি প্রদর্শন করতে চান। সুতরাং, আপনার ফর্ম্যাট ফাংশনটি ||খালি নয় এমন বৈশিষ্ট্যটি বেছে নিতে ব্যবহার করতে হবে।

Question 11

আমি এই উত্তরটি মূলত যুক্ত করছি কারণ আমি উপরে মন্তব্য করতে পারি না! আমি দেখেছি এটি @ নিকি এবং তার জেসফিডেল, https://jsfiddle.net/57co6c95/ এর মন্তব্য ছিল , যা শেষ পর্যন্ত আমার পক্ষে এই কাজটি করেছে।

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

$option.text(data[0].text).val(data[0].id);

বরং

$option.text(data.text).val(data.id);

Question 12

সিলেক্ট ২.০.৩ এর জন্য ডি প্রাথমিক ইলেক্টেড মান সহ সাধারণ এজ্যাক্স কম্বো তৈরি করুন

<select name="mycombo" id="mycombo""></select>                   
<script>
document.addEventListener("DOMContentLoaded", function (event) {
    selectMaker.create('table', 'idname', '1', $("#mycombo"), 2, 'type');                                
});
</script>

গ্রন্থাগার .js

var selectMaker = {
create: function (table, fieldname, initialSelected, input, minimumInputLength = 3, type ='',placeholder = 'Select a element') {
    if (input.data('select2')) {
        input.select2("destroy");
    }
    input.select2({
        placeholder: placeholder,
        width: '100%',
        minimumInputLength: minimumInputLength,
        containerCssClass: type,
        dropdownCssClass: type,
        ajax: {
            url: 'ajaxValues.php?getQuery=true&table=' + table + '&fieldname=' + fieldname + '&type=' + type,
            type: 'post',
            dataType: 'json',
            contentType: "application/json",
            delay: 250,
            data: function (params) {
                return {
                    term: params.term, // search term
                    page: params.page
                };
            },
            processResults: function (data) {
                return {
                    results: $.map(data.items, function (item) {
                        return {
                            text: item.name,
                            id: item.id
                        }
                    })
                };
            }
        }
    });
    if (initialSelected>0) {
        var $option = $('<option selected>Cargando...</option>').val(0);
        input.append($option).trigger('change'); // append the option and update Select2
        $.ajax({// make the request for the selected data object
            type: 'GET',
            url: 'ajaxValues.php?getQuery=true&table=' + table + '&fieldname=' + fieldname + '&type=' + type + '&initialSelected=' + initialSelected,
            dataType: 'json'
        }).then(function (data) {
            // Here we should have the data object
            $option.text(data.items[0].name).val(data.items[0].id); // update the text that is displayed (and maybe even the value)
            $option.removeData(); // remove any caching data that might be associated
            input.trigger('change'); // notify JavaScript components of possible changes
        });
    }
}
};

এবং পিএইচপি সার্ভার পাশ

<?php
if (isset($_GET['getQuery']) && isset($_GET['table']) && isset($_GET['fieldname'])) {
//parametros carga de petición
parse_str(file_get_contents("php://input"), $data);
$data = (object) $data;
if (isset($data->term)) {
    $term = pSQL($data->term);
}else{
    $term = '';
}
if (isset($_GET['initialSelected'])){
    $id =pSQL($_GET['initialSelected']);
}else{
    $id = '';
}
if ($_GET['table'] == 'mytable' && $_GET['fieldname'] == 'mycolname' && $_GET['type'] == 'mytype') {

    if (empty($id)){
        $where = "and name like '%" . $term . "%'";
    }else{
         $where = "and id= ".$id;
    }

    $rows = yourarrayfunctionfromsql("SELECT id, name 
                    FROM yourtable
                    WHERE 1 " . $where . "
                    ORDER BY name ");
}

$items = array("items" => $rows);
$var = json_encode($items);
echo $var;
?>

Question 13

হাই প্রায় এটি ছেড়ে দিচ্ছিল এবং 3.5.1.1 নির্বাচন করতে ফিরে যান। তবে শেষ পর্যন্ত উত্তর পেয়ে গেলাম!

$('#test').select2({
    placeholder: "Select a Country",
    minimumResultsForSearch: 2,
    ajax: {
        url: '...',
        dataType: 'json',
        cache: false,
        data: function (params) {
                var queryParameters = {
                    q: params.term
                }
                return queryParameters;
        },
        processResults: function (data) {
            return {
                results: data.items
            };
        }
    }
});

var option1 = new Option("new",true, true);

$('#status').append(option1);

$('#status').trigger('change');

কেবলমাত্র নিশ্চিত হয়ে নিন যে নতুন বিকল্পটি সিলেক্ট 2 বিকল্পগুলির মধ্যে একটি। আমি এটি একটি জসন দ্বারা পেয়েছি।