मैं अपने प्रोजेक्ट में select2 का उपयोग करने का प्रयास कर रहा हूं।

निम्नलिखित स्क्रीनशॉट में, मैं उपयोगकर्ता द्वारा ADD More बटन पर क्लिक करने के बाद गतिशील रूप से सोशल मीडिया अनुभाग (select2, input और remove btn) को डुप्लिकेट करना चाहता हूं:

enter image description here

विरोध से बचने के लिए, मैं क्लिक ईवेंट की शुरुआत में destroy सभी के लिए ईवेंट select2 पर कॉल कर रहा हूं. फिर, मैं तत्वों की नकल करूंगा। फिर, मैं select2 को फिर से इनिशियलाइज़ करूँगा। लेकिन, यह हमेशा केवल एक चयन को select2 में बदल देगा।

निम्न स्क्रीनशॉट में, आप देख सकते हैं कि डुप्लिकेट किए गए चयन select2 में परिवर्तित नहीं हुए हैं:

enter image description here

निम्नलिखित स्निपेट कोड समस्या दिखाता है:

<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<button onclick="duplicate_select();">duplicate</button>
<br/><br/>
<select class="selection" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

<script>
$(document).ready(function() {
    $('.selection').select2();
});

function duplicate_select ()
{
    //Destroy all active select2
    $(".selection").each(function (index, value) {
        var temp_selecte2 = $(value).select2();
        temp_selecte2.select2('destroy');
    });

    //Get First Select Node that I want to duplicate
    var first_node = $('.selection').first().prop('outerHTML');
    
    //Add new node to the body
    $('body').append(first_node);
    
    
    //Re-initialize all select2
    $(".selection").each(function (index, value) {
        var temp = $(value).select2();
        //temp.select2();
    });
    
    //Following codes is not working too
    //$(".selection").select2();
}
</script>

</body>
</html>

क्या आप कृपया मुझे मार्गदर्शन कर सकते हैं कि मैं इस समस्या को कैसे हल कर सकता हूं और सभी डुप्लिकेट किए गए चुनिंदा तत्वों को दोबारा शुरू कर सकता हूं?

1
Reza Amya 20 फरवरी 2019, 02:44

1 उत्तर

सबसे बढ़िया उत्तर

समस्या इसलिए होती है क्योंकि Select2 को विशिष्ट होने के लिए चुनिंदा टैग की आवश्यकता होती है, select2() विधि data-select2-id नामक एक विशेषता का उपयोग करके इसकी पहचान करती है, केवल एक चीज जो आपको करने की आवश्यकता है वह है उस विशेषता को संशोधित करना।

आपकी समस्या को या तो विशेषता को हटाकर या एक अद्वितीय सेट करके ठीक किया जा सकता है। अद्वितीय सेट करने के लिए बस temp.attr('data-select2-id', new Date().getTime()) लाइन जोड़ें, लेकिन इसे हटाने का अनुशंसित तरीका temp.removeAttr('data-select2-id') है

<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<button onclick="duplicate_select();">duplicate</button>
<br/><br/>
<select class="selection" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

<script>
$(document).ready(function() {
    $('.selection').select2();
});

function duplicate_select ()
{
    //Destroy all active select2
    $(".selection").each(function (index, value) {
        var temp_selecte2 = $(value).select2();
        temp_selecte2.select2('destroy');
    });

    //Get First Select Node that I want to duplicate
    var first_node = $('.selection').first().prop('outerHTML');
    
    //Add new node to the body
    $('body').append(first_node);
    
    
    //Re-initialize all select2
    $(".selection").each(function (index, value) {
        var temp = $(value);
        temp.removeAttr('data-select2-id');
        // temp.attr('data-select2-id', new Date().getTime()); // <-- this works too
        temp.select2();
    });
}
</script>

</body>
</html>
2
Luis Limas 20 फरवरी 2019, 14:56