jQuery मल्टीसेलेक्ट मानों को किसी अन्य मल्टीसेलेक्ट

पर ले जा रहा है, इसलिए मेरे पास x मानों के साथ एक मल्टीसेलेक्ट बॉक्स है जिसे मुझे किसी अन्य मल्टीसेलेक्ट बॉक्स में स्थानांतरित करने की क्षमता की आवश्यकता है और इसके विपरीत।jQuery मल्टीसेलेक्ट मानों को किसी अन्य मल्टीसेलेक्ट

<select class="boxa" multiple="multiple"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 

<select class="boxb" multiple="multiple"> 

</select>

भी मान boxb से वापस ले जाने के boxa करने की क्षमता के साथ एक बटन पर क्लिक करने के लिए सभी boxb या boxa के मूल्यों में से एक ले जाने के लिए, की आवश्यकता।

क्या jQuery में ऐसा कुछ है या यह कोड का एक कस्टम स्निपेट है?

स्रोत

2009-06-29 Phill Pafford

crossSelect नामक एक jquery प्लगइन है जो आपको लगता है कि ऐसा करने लगता है।

jQuery में यह अंतर्निहित नहीं है, आपको या तो अपनी पसंद की प्लगइन ढूंढनी होगी और इसका उपयोग करना होगा, या अपना खुद का लिखना होगा। (और jQuery का उपयोग करने के बारे में या इसका इस्तेमाल करने नहीं निश्चित रूप से आप करते हैं, आप यह शुद्ध जावास्क्रिप्ट में लागू कर सकता है यदि आप चाहें)

स्रोत

2009-06-29 14:16:47

परफेक्ट धन्यवाद, यह मैं वास्तव में क्या जरूरत है। –

वन्यवर्ती लिंक अब मर चुका है। –

$('#boxa option').appendTo('#boxb');

स्रोत

2011-03-14 07:27:45 Vijayakrishna

$().ready(function() { 
$('#add').click(function() { 
    return !$('#select1 option:selected').remove().appendTo('#select2'); 
}); 
$('#remove').click(function() { 
    return !$('#select2 option:selected').remove().appendTo('#select1'); 
}); 
});

स्रोत

2011-12-02 13:18:53 Yasitha

+16

यह स्वीकार्य उत्तर होना चाहिए - कोई प्लगइन आवश्यक के साथ पूरी तरह से काम करता है। – ThatAintWorking

वापसी और क्या है! के लिये? –

@ alonso.torres जो झूठी वापसी के लिए है, http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html: _To पृष्ठ को जब भी शीर्ष पर स्क्रॉल करने से रोकें उपयोगकर्ता एक बटन (कुछ ब्राउज़रों में) पर क्लिक करता है, मैंने झूठी वापसी को जोड़ा; क्लिक ईवेंट हैंडलर पर ._ – ArieKanarie

प्रयास करें निम्नलिखित (http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html से लिया गया)

<html> 
<head> 
<script src="js/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $().ready(function() { 
    $('#add').click(function() { 
    return !$('#select1 option:selected').remove().appendTo('#select2'); 
    }); 
    $('#remove').click(function() { 
    return !$('#select2 option:selected').remove().appendTo('#select1'); 
    }); 
    }); 
</script> 

<style type="text/css"> 
    a { 
    display: block; 
    border: 1px solid #aaa; 
    text-decoration: none; 
    background-color: #fafafa; 
    color: #123456; 
    margin: 2px; 
    clear:both; 
    } 
    div { 
    float:left; 
    text-align: center; 
    margin: 10px; 
    } 
    select { 
    width: 100px; 
    height: 80px; 
    } 
</style> 

</head> 

<body> 
<div> 
    <select multiple id="select1"> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
    <option value="4">Option 4</option> 
    </select> 
    <a href="#" id="add">add &gt;&gt;</a> 
</div> 
<div> 
    <select multiple id="select2"></select> 
    <a href="#" id="remove">&lt;&lt; remove</a> 
</div> 
</body> 
</html>

स्रोत

2013-04-03 03:04:58

बहुत आसान समाधान। यही वह है जिसकी तलाश में मैं हूं। धन्यवाद, सीलास! – marky

मैं एक ही समस्या थी, लेकिन मैं इसके चारों ओर

<div> 
    <select multiple id="select1"> 
     <option value="1">Option 1</option> 
     <option value="2">Option 2</option> 
     <option value="3">Option 3</option> 
     <option value="4">Option 4</option> 
    </select> 
</div> 
<div> 
    <select multiple id="select2"></select> 
</div>

एक तरह से पता चला

jQuery

$('#select1').click(function() { 
    return !$('#select1 option:selected').remove().appendTo('#select2'); 
}); 

$('#select2').click(function() { 
    return !$('#select2 option:selected').remove().appendTo('#select1'); 
});

यदि कोई बटन जोड़ने चाहते हैं एक जोड़ने > > और jQuery क्लिक चयनकर्ता यहां

उदाहरण http://jsfiddle.net/diffintact/GJJQw/3/

स्रोत

2013-09-24 10:07:47 jai

यहाँ मेरी html कोड चला जाता है

<div> 
     <select multiple id="select1"> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option> 
      <option value="3">Option 3</option> 
      <option value="4">Option 4</option> 
      <option value="5">Option 5</option> 
      <option value="6">Option 6</option> 
     </select> 
     <a href="#" id="add">add &gt; &gt;</a> 
    </div> 
    <div> 
     <select multiple id="select2"></select> 
     <a href="#" id="remove">remove &lt; &lt;</a> 
    </div>

और जावास्क्रिप्ट कोड

$("#add").click(function(){ 
    $("#select1 option:selected").remove().appendTo($("#select2")); 
}) 
$("#remove").click(function(){ 
    $("#select2 option:selected").remove().appendTo($("#select1")); 
})

सुनिश्चित करें कि आपने jquery.js फ़ाइल आयात की है।

स्रोत

2015-12-18 04:50:05 Santosh

यदि आप प्लगइन के साथ ठीक हैं, तो यह प्लगइन अच्छी तरह से काम करता है।

http://crlcu.github.io/multiselect/#home

स्रोत

2016-04-12 13:32:28