# Dynamic Options

**URL:** <https://forum.pinegrow.com/t/dynamic-options/2898>\
**Category:** Third Party Plugins\
**Created:** [March 29, 2019, 8:27pm UTC](https://forum.pinegrow.com/t/dynamic-options/2898 "2019-03-29T20:27:01Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![smemis](https://avatars.discourse-cdn.com/v4/letter/s/6de8d8/32.png) [@smemis](https://forum.pinegrow.com/u/smemis)\
**Post date:** [March 29, 2019, 8:27pm UTC](https://forum.pinegrow.com/t/dynamic-options/2898/1 "2019-03-29T20:27:02Z")

</div>

Hi,  
I want to dynamically change select options but i can not.

How can i do, please check my code and help me.

thanks

var attributeoptions = [{  
key: ‘icon’,  
name: ‘icon’  
},  
{  
key: ‘title’,  
name: ‘title’  
},  
{  
key: ‘description’,  
name: ‘description’  
},  
{  
key: ‘link’,  
name: ‘link’  
},  
{  
key: ‘target’,  
name: ‘target’  
},  
{  
key: ‘id’,  
name: ‘id’  
},  
{  
key: ‘class’,  
name: ‘class’  
},  
{  
key: ‘style’,  
name: ‘style’  
},  
];

var shortcodestartx = new PgComponentType(‘zh.shortcodestartx’, ‘Shortcode STARTx’);  
shortcodestartx.selector = ‘\*’;  
shortcodestartx.parent\_selector = ‘body’;  
shortcodestartx.tags = ‘major’;  
shortcodestartx.sections = {  
‘zh.shortcodestartx’: {  
name: ‘SHORTCODE OPTIONSx’,  
fields: {  
‘zh.shortcodestartx.funcnamex’: {  
type: ‘select’,  
action: ‘apply\_css’,  
name: ‘Namex’,  
live\_update: true,  
options: function (xyz, pgel) {  
var xparent = pgel.closest(‘code.shortcode’);

```
                if (xparent.tagName != 'code') {
                    return attributeoptions;
                } else {

                    /*
                    array('icon' => '','title' => '','description' => '','link' => '','target' => '','id' => '','class' => '','style' => ''),
                    */
                    var x = xparent.html().split('array(');
                    var x1 = x[1].split('),')[0];
                    var xmatch = (x1.replace(/\s/g, '')).split(" ").join("").split("'").join("").split(",").join("").split("=>");
                    console.warn(xmatch);
                    var result = [];
                    for (var i = 0; i < xmatch.length - 1; i++) {
                        result.push({
                            key: xmatch[i] + "-test",
                            name: xmatch[i] + "-test"
                        });
                    }
                    return result;
                }
            },
            name: 'Attributes',
            get_value: function (pgel) {
                return 'title --not implement yet';
            }

        },
        set_value: function (pgel, value, values, oldValue, eventType) {
            return 'title -- not implement yet';
        }
    }
}

```

};

f.addComponentType(shortcodestartx);

---

<div class="post-metadata">

**Author:** ![smemis](https://avatars.discourse-cdn.com/v4/letter/s/6de8d8/32.png) [@smemis](https://forum.pinegrow.com/u/smemis)\
**Post date:** [March 31, 2019, 10:22am UTC](https://forum.pinegrow.com/t/dynamic-options/2898/2 "2019-03-31T10:22:15Z")

</div>

I’m happy now 🙂  
But I need a little trick on option item selected.  
How can i option item value selected?  
My little plugin code is

var shortcodestartx = new PgComponentType(‘zh.shortcodestartx’, ‘Shortcode STARTx’);  
shortcodestartx.selector = ‘\*’;  
shortcodestartx.parent\_selector = ‘body’;  
[//shortcodestartx.tags](https://shortcodestartx.tags) = ‘major’;  
shortcodestartx.sections = {  
‘zh.shortcodestartx’: {  
name: ‘SHORTCODE OPTIONSx’,  
fields: {  
‘zh.shortcodestartx.funcnamex’: {  
type: ‘select’,  
action: ‘custom’,  
name: ‘Variable Name’,  
show\_empty : true,  
live\_update: true,  
async\_options\_function: true,  
fill\_list\_on\_open: true,  
options: function(pgel){  
var xparent = pinegrow.selectedElements.getLastSelected();  
if(xparent.tagName==‘code’){  
return [];  
}  
while(xparent.tagName!=‘code’){  
xparent = xparent.parent;  
if(xparent.tagName==‘body’ || xparent.tagName==‘code’){  
break;  
}  
}  
if(xparent.tagName!=‘code’){  
return [];//attributeoptions;  
}else{  
var x = xparent.html().split(‘array(’);  
var x0 = x[0];  
var x1 = x[1].split(’),’)[0];  
var xmatch = (x1.replace(/\s/g, ‘’)).split(" “).join(”").split("’").join("").split(",").join("").split("=\>");  
var result = [];  
for(var i=0;i\<xmatch.length-1;i++){  
result.push(  
{  
key: xmatch[i],  
name: xmatch[i]  
}  
);  
}  
return result;  
}  
},  
get\_value: function (pgel) {  
if(pgel.attr(‘wp-call-function’) !=’’){  
return pgel.attr(‘wp-call-function’);  
}  
return ‘’;  
},  
set\_value: function (pgel, value, values, oldValue, eventType) {

```
                if(value) {
                    pgel.attr('wp-call-function', value);
                } else {
                    if(pgel.attr('wp-call-function') != '') {
                        pgel.removeAttr('wp-call-function');
                    }
                }
                return value;
            }
        }
    }
}

```

};