Add Image and label dynamically inside the dropdown

[newcoder]

Hi ,

I have a dropdown and data is coming from VDE in JSON format. I have added values and unit in the dropdown list. But need to add icons and N/P value in the dropdown . So in the dropdown i need to add container(div/span) for adding icon and P/N value. Kindly help me
The code i am using is :

<select id="UP_AFDuration_vals" class="PD_active_main editRPFlag Displayable Selectable ApplicableAtInitialInterrogation Applicable PreviouslyApplicable ApplicableAfterProgram" onchange="hightlightAutoManualValues(this)" style="display: inline-block;"><option value="0.5">0.5 min</option><option value="1">1 min</option><option value="2" selected="">2 min</option><option value="6">6 min</option><option value="10">10 min</option><option value="20">20 min</option><option value="30">30 min</option><option value="60">60 min</option></select>

function defineUpValOpts(upValList, selectedVal) {
    
    var upOptArray = [];
    
    if (upValList !== undefined && upValList.length != 0) {
        
        for (var i = 0; i < upValList.length; i++) {
            
            var optTxt;
            var optVal;
            var upOpt;
            
            // evaluate drop-down value for special handling of "DOUBLE" value
            processParamValue(upValList[i]);
            
            if (upValList[i].unit) {
                optTxt = upValList[i].parameterValue + ' ' + upValList[i].unit;
            } else {
                optTxt = upValList[i].parameterValue;
            }
            
            optVal = upValList[i].parameterValue;
            
            if (upValList[i].parameterValue === selectedVal) {
                upOpt = new Option(optTxt, optVal, true, true);
            } else {
                upOpt = new Option(optTxt, optVal);
            }
            
            upOptArray.push(upOpt);
        }
    } else {
        console.warn('List of values, for defining a UPs Option List, was null or empty');
    }
    
    return upOptArray;
}

Thanks in advance

 

[MeMate]

Yes you can. But not on a pure drop box (select element).

What i do actually is to hide the select element and create my own right above it. Thereyoucan add icons, spans, divs img or whatever u need.

If you just need to add something after a onchange event )your hightlightAutoManualValues), than you might do it with css and js.

Example:

<style>
.row{display:flex;}
.mSel{width:90% !important;}
.mBox{width:10% !important;}
</style>
<script>
function hightlightAutoManualValues(t){
     var imageoricon=///get_your_span_img_orwhatever_here_according_to_your_value_orsetthisto&nbsp;
     var box=document.getElementById(t.id+'_box');
    box.innerHTML=imageoricon
}
</script>
<div class="row">
<select id="UP_AFDuration_vals" class="mSel PD_active_main editRPFlag Displayable Selectable ApplicableAtInitialInterrogation Applicable PreviouslyApplicable ApplicableAfterProgram" onchange="hightlightAutoManualValues(this)" style="display: inline-block;"><option value="0.5">0.5 min</option><option value="1">1 min</option><option value="2" selected="">2 min</option><option value="6">6 min</option><option value="10">10 min</option><option value="20">20 min</option><option value="30">30 min</option><option value="60">60 min</option></select>
<div id="UP_AFDuration_vals_box" class="mBox"></div>
</div>

 

[newcoder]

Yes you can. But not on a pure drop box (select element).

What i do actually is to hide the select element and create my own right above it. Thereyoucan add icons, spans, divs img or whatever u need.

If you just need to add something after a onchange event )your hightlightAutoManualValues), than you might do it with css and js.

Example:

<style>
.row{display:flex;}
.mSel{width:90% !important;}
.mBox{width:10% !important;}
</style>
<script>
function hightlightAutoManualValues(t){
     var imageoricon=///get_your_span_img_orwhatever_here_according_to_your_value_orsetthisto&nbsp;
     var box=document.getElementById(t.id+'_box');
    box.innerHTML=imageoricon
}
</script>
<div class="row">
<select id="UP_AFDuration_vals" class="mSel PD_active_main editRPFlag Displayable Selectable ApplicableAtInitialInterrogation Applicable PreviouslyApplicable ApplicableAfterProgram" onchange="hightlightAutoManualValues(this)" style="display: inline-block;"><option value="0.5">0.5 min</option><option value="1">1 min</option><option value="2" selected="">2 min</option><option value="6">6 min</option><option value="10">10 min</option><option value="20">20 min</option><option value="30">30 min</option><option value="60">60 min</option></select>
<div id="UP_AFDuration_vals_box" class="mBox"></div>
</div>

Thanks for the reply.