1

My multi select list is very large, it is difficult to find out which options are selected, I want to change it into some thing like following, is it possible? It can be any where, but currently I have a custom "customer_address" attribute type "multiselect", enter image description here

I am creating my attribute like this my sql script,

    <?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();
  • Not enough context. Where is this? Custom code? – ProxiBlue Apr 8 '16 at 9:46
  • @ ProxiBlue update the question, as said it can be any where – Abdul Ghaffar Apr 8 '16 at 9:53
  • 1
    This is related to html multi select usability in general. Take a look into: ryancramer.com/journal/entries/select_multiple specifically the example: ASMSELECT. After that you can think on integrating some solution into Magento adminhtml. Another solution I just googled: harvesthq.github.io/chosen – davidmpaz Apr 8 '16 at 9:58
  • you want to select item in my item? – Qaisar Satti Apr 8 '16 at 10:18
  • my selected items should appear in my item – Abdul Ghaffar Apr 8 '16 at 10:21
1

you can achieve this functionality by below 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;
        }

doing with 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;

});
  • I am creating an attribute of type "multiselect",its source model is "abc_districtmanager/address_attribute_source_districtmanager", from where it is being populated, and being used in "$used_in_forms = array( 'adminhtml_customer_address', 'customer_address_edit', 'customer_register_address' );" – Abdul Ghaffar Apr 8 '16 at 10:58
  • you can add js function in form field 'onchange' => 'getSelectValues(this)', – Qaisar Satti Apr 8 '16 at 11:06
  • this your form field? then add it there.. – Qaisar Satti Apr 8 '16 at 11:26
  • bro it is multiselect, how "onchange" will work – Abdul Ghaffar Apr 8 '16 at 12:22
  • the function is working for multiselect. try onchange or onclick it will work – Qaisar Satti Apr 8 '16 at 12:49
0

I got my purpose with a slight changed interface by using "Chosen" jquery.

Download Chosen Jquery chosen.jquery.js and chosen.css, place these files in your design, Add them to you module in respected .xml file, in head like

     <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>

be careful about path of files, after this, in your respected view (.phtml) use Chosen

<script type="text/javascript">

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

This will change interface of elements having class "myClass", output might like this enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.