Single select with data-description (MIP)

[Macrura]

Module In Progress...

working on an Inputfield which will allow the updating of the select description (for contextual description of the actual selected item) based on the selected option.

This module is/was mostly written by netcarver, so i'm just getting the details together and some jquery for this to work...

https://processwire.com/talk/topic/419-extending-inputfields/?p=76823

i'm thinking that the module title should probably be more specific?, like InputfieldSelectDataDescription... in case there were other 'extended' interpretations...?

module so far:

<?php

class InputfieldSelectExtended extends InputfieldSelect
{
    public static function getModuleInfo()
    {
		return array(
			'title'     => __('Select Extended', __FILE__),
			'version'   => 1,
			'summary'   => __('Selection with extended attributes. An enhancement to select', __FILE__),
			'permanent' => false,
			);
	}

	/**
	 * inputfield is loaded
	 */
	public function init() {
		// append script needed for the inputfield
		$this->config->scripts->add($this->config->urls->InputfieldSelectExtended . 'InputfieldSelectExtended.js');
	}

    /**
     * Adds an option with extended attributes that allow mutually exclusive groups.
     */
    public function addOption($value, $label = null, array $attributes = null)
    {
        if (
            is_null($value) ||
            (is_string($value) && !strlen($value))
        ) {
            return $this;
        }

        if (null === $attributes) {
            $attributes = array();
        }

        $extra_atts = $this->extendAttributes($value, $label);
        $attributes = array_merge($attributes, $extra_atts);

		return parent::addOption($value, $label, $attributes);
	}

    /**
     * Hook this and return an array with whatever extended attributes you need.
     *
     */
    public function ___extendAttributes($id, $value)
    {
        $atts = array();
        $page = wire()->pages->get($id);
        $atts['data-description'] = $page->data_description;

        return $atts;
    }
}

the js, so far - works, but doesn't account for multiple selects yet.

InputfieldSelectExtended/InputfieldSelectExtended.js

$(document).ready(function() {
  	
  	var $default = $('.InputfieldSelectExtended').prev('p.description').html();
  
    $('.InputfieldSelectExtended select').change(function(){	
    	
    	var $selected = $(this).find(':selected');
		var $description = $('.InputfieldSelectExtended').prev('p.description');	
		if($selected.data('description') == null ) $($description).html($default);
		$($description).html($selected.data('description'));
	
	}).trigger('change');
    
});

once installed you would need to add this inputfield to the list;

then select the inputfield on your page field

your selectable pages would need a data_description field.

here is the result, before option selected:

after select:

i guess once i get the module more advanced, there would be a way to get some of these things automatically setup..

also - for this to work, you need to set a description for the page select field, so there is something to replace...