using catStyleFromCustomSelect

by Gerald Gillespie

HTML

<script src="https://support.kace.com/jkuery/www/js/jquery.catStyleFromCustomSelect.js"></script>
<div>
    <table>
        <tr>
            <td>with plugin</td>
            <td class="inputFormat" colspan="3">
                <select style="width:300px;" id="fields[custom_field_value0]" name="fields[custom_field_value0]">
                    <option selected="" value="" title="Please select one...">Please select one...</option>
                    <option value="tier1::tier2::tier3" title="tier1::tier2::tier3">tier1::tier2::tier3</option>
                    <option value="tier1::tier2::tier3b" title="tier1::tier2::tier3b">tier1::tier2::tier3b</option>
                    <option value="tier1b::tier2::tier3a">tier1b::tier2::tier3a</option>
                    <option value="tier1b::tier2::tier3b">tier1b::tier2::tier3b</option>
                    <option value="tier1c::tier2a::tier3">tier1c::tier2a::tier3</option>
                    <option value="tier1c::tier2b::tier3">tier1c::tier2b::tier3</option>
                    <option value="tier1c::tier2c">tier1c::tier2c</option>
                    <option value="tier1c::tier2d">tier1c::tier2d</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>without plugin</td>
            <td class="inputFormat" colspan="3">
                <select style="width:300px" id="fields[custom_field_value1]" name="fields[custom_field_value0]">
                    <option selected="" value="" title="Please select one...">Please select one...</option>
                    <option value="tier1::tier2::tier3" title="tier1::tier2::tier3">tier1::tier2::tier3</option>
                    <option value="tier1::tier2::tier3b" title="tier1::tier2::tier3b">tier1::tier2::tier3b</option>
                    <option value="tier1b::tier2::tier3a">tier1b::tier2::tier3a</option>
                    <option value="tier1b::tier2::tier3b">tier1b::tier2::tier3b</option>
                    <option...

CSS

textarea { font-size : 8px }

JavaScript

var describeElements = function (elClass, $obj) {
    var $temp = $obj.closest('td').find('input[type="hidden"]')
        .clone().wrapAll('<div/>').parent();
    var $temp2 = $obj.closest('td').find('select')
        .clone().wrapAll('<div/>').parent();
    $(elClass + ':first').val($temp.html());
    $(elClass + ':last').val($temp2.html());
    $temp.remove();
    $temp2.remove();
}

var catParms = {
    defOptionTxt: 'Please select one...', // */  false , // false is not OEM
    autoSelect: true, // deprecated.  always true now -> false didn't make sense due to best practices on branch lengths
    style: {
        width: '300px',
        display: 'block'
    }, // 5.4 defaults for category
    splitValTxt: "val" // doesn't matter for a custom field
};

// chain it jquery-style on the OEM custom field
$('#fields\\[custom_field_value0\\]').catStyleFromCustomSelect(catParms);

$custom = $('select[id*="value0"]:last');
$custom.closest('td')
    .on('change', 'select', function () {
    describeElements('.textarea1', $(this));

}) // end on bubbled change
describeElements('.textarea1', $custom);


var statusParms = {
    defOptionTxt: false, //  false , // false is OEM on built-in fields
    autoSelect: true, // deprecated.  always true now -> false didn't make sense due to best practices on branch lengths
    style: {
        width: '300px',
        display: 'block'
    }, // 5.4 defaults for category
    splitValTxt: "txt" // doesn't matter for a custom field
};

$('#fields\\[status_id\\]').catStyleFromCustomSelect(statusParms);

$sel = $('select[id*="status"]:last');
$sel.closest('td')
    .on('change', 'select', function () {
    describeElements('.textarea2', $(this));

}) // end on bubbled change
.find('select:last').trigger('change');