Personnalisation de l'interface de Multiselect dans Magento

Question

Ma liste de sélection multiple est très importante, il est difficile de déterminer quelles options sont sélectionnées, je souhaite la modifier en quelque chose comme suit, est-ce possible? Il peut être n'importe où, mais j'ai actuellement un type d'attribut "Customer_Address" personnalisé "Multiselect",

Je crée mon attribut comme celui-ci mon script SQL,

    <?php

$installer = $this;

$installer->startSetup();

$installer->addAttribute('customer_address', 'additional_managers', array(
    'label' => 'Additional Store/Site Managers',
    'visible' => true,
    'required' => false,
    'type' => 'varchar',
    'input' => 'multiselect',
    'source' => 'abc_districtmanager/address_attribute_source_districtmanager',
    'onclick' => 'getSelectValues(this)',
    'user_defined' => 1,
    'position' => 100
));

$used_in_forms = array(
     'adminhtml_customer_address',
     'customer_address_edit',
     'customer_register_address'
    );

$attribute = Mage::getSingleton('eav/config')->getAttribute('customer_address', 'additional_managers');
$attribute->setData('used_in_forms', $used_in_forms); 
$attribute->save();

$installer->endSetup();

Answer 1

J'ai eu mon but avec une légère interface modifiée en utilisant jQuery "choisi".

Télécharger jQuery choisi choisi.jquery.js et chrosen.css., placez ces fichiers dans votre conception, ajoutez-les à votre module dans un fichier .xml respecté, dans la tête comme

     <reference name="head">
        <!--            Adding js and css to use "chosen" instead of "select" for "multiselect" input types-->
        <action method="addItem">
            <type>skin_js</type>
            <name>js/chosen.jquery.js</name>
        </action>
        <action method="addItem">
            <type>skin_css</type>
            <name>css/chosen.css</name>
        </action>
    </reference>

Faites attention à Chemin de fichiers , après cela, dans votre vue respectée ( .phtml ) Utilisez

<script type="text/javascript">

jQuery(document).ready(function ($) {
    $(".myClass").chosen();
});

Cela changera l'interface des éléments ayant une classe "mycass", une sortie peut aimer cela

Answer 2

Vous pouvez atteindre cette fonctionnalité en dessous du code

<select onchange="getSelectValues(this)"></select>



    function getSelectValues(select) {

          var options = select && select.options;
          var opt;

          for (var i=0, iLen=options.length; i<iLen; i++) {
            opt = options[i];

            if (opt.selected) {
               opttext +=opt.text+'<br />';
            }
          }
          document.getElementById('showdiv').innerHtml=opttext;
        }

faire avec prototype

$("_itemNaNadditional_managers").invoke('observe', 'change', function() {

    var options = $("_itemNaNadditional_managers").options;
              var opt;

              for (var i=0, iLen=options.length; i<iLen; i++) {
                opt = options[i];

                if (opt.selected) {
                   opttext +=opt.text+'<br />';
                }
              }
              document.getElementById('showdiv').innerHtml=opttext;

});