changing the cfselect to normal select

Question

I have a cfselect with bind attribute and the i want to convert that into to the normal select, it also has the onchange attached to it, what kind i do to return it normal jquery or javascript code

here is my code

<cfselect
    name="StatusID"
    id="StatusID"
    bind="cfc:com.getStatus()"
    bindonload="True"
    value="StatusID"
    display="StatusDescription"
    selected="#Val(qry.StatusID)#"
    data-validation="required"
    data-validation-error-msg="Status selection is required."
    onChange="CheckActive()" />

for simpler levels, i can do the <select and for the query i can just do a loop over but what about this.

Can you elaborate on that? How does it "bring" it? What does it do with it? Is it asynchronous? — mykaf, Jun 24 '22 at 13:58
the bind onload is true and the cfc is returning me the query with the two fields, statusid and statusdescription — simone, Jun 24 '22 at 14:21
Is that query used to populate the select? What part do you need to convert to JS/jQ? — mykaf, Jun 24 '22 at 14:25

Scott Bennett · Answer 1 · 2022-06-27T16:07:30.347

The bind argument on cfselect will invoke that function in your cfc, which will return some result set (Usually json, or a queryobject). That result set will be used to generate the options. Then the "value" attribute specifies which column from the cfc result set will be used in the "value" argument on the resulting "option" elements. likewise, the display argument corresponds to what will be betweeen the options start and end tags. the Selected arugment will determine which option is selected. Ther other arguments pass through to a normal select.

If you want to generate the vanilla select completely on the server side you can do something like this:

<cfscript>
    //You can do something like this to get your data from the CFC
    //myCom=CreateObject("component","com");
    //statuses=myCom.getStatus();
    
    //Since I don't have an example of what your cfc is returning, I'll assume it's a query result set like this
    statuses = queryNew("StatusID,StatusDescription","Integer,Varchar", 
                [ 
                        {StatusID=1,StatusDescription="StatusOne"}, 
                        {StatusID=2,StatusDescription="StatusTwo"}, 
                        {StatusID=3,StatusDescription="StatusThree"} 
                ]); 
                
    //also hardcoding this value because I don't have your qry result set
    
    qry = {statusid=2};
</cfscript>  

<cfoutput>
    <select
    name="StatusID"
    id="StatusID"
    data-validation="required"
    data-validation-error-msg="Status selection is required."
    onChange="CheckActive()">
        <cfloop query="statuses">
            <option value="#statuses.StatusID#" <cfif statuses.statusid eq qry.statusid>selected</cfif>>#statuses.StatusDescription#</option>
        </cfloop>
        
    </select>
    
</cfoutput>

If for some reason you actually need to generate the select on the client side via AJAX, then you will need to write some functions in js/jquery that perform the ajax calls to your cfc instead of using the built in bind expression system in coldfusions cfselect. (for example on how to do that see: Calling a CFC function in AJAX/JQuery and Populating selectlist from AJAX call to CFC)

There are also some other libraries that could make this easier like HTMX: https://htmx.org/examples/value-select/

changing the cfselect to normal select

1 Answers1