#101797
yavordashew
Member

Hi Tullio,
Thank you for contacting us!
In your case I would recommend you to use the dataSource property of the component and then set the value-member to the value and also the display-member to the value that will be displayed like in the following code snippet:

        <smart-combo-box
                        id = 'combobox'
                        selectionMode="zeroOrOne"
                        class="elemento_combobox_valore"
                        name="e681760908"
                        value-member='value'
                        display-member = 'label'
                        filterable=""
                        optional="true"
                        type="combo"
                        selected-indexes='[0]'
                        desc="ProdottoFERRETTI"
                        onchange="mostraAlertMsgOption(this); "
                        onfocus="on_focus(this)"
                        placeHolder = "LAN"
        >
        </smart-combo-box>
	<script>
        window.onload = function (){
            let comboboxMemberValue = document.getElementById('combobox')
            comboboxMemberValue.dataSource =
                    [{
                        label: "Andrew",
                        value: 1222,
                        group: "Product Owners"
                    },
                    {
                        label: "Natalia",
                        value: 2222,
                        group: "Developers"
                    }];
                comboboxMemberValue.addEventListener('change', ()=>{
                    alert( comboboxMemberValue.selectedValues)
                })
        }
    </script>

Or if that doesn’t suits you we have made another code snippet for you which showcases you how to achieve the functionality you aim to


        <smart-combo-box selectionMode="zeroOrOne"
                        class="elemento_combobox_valore"
                        name="e681760908"
                        value-member='value'
                        filterable=""
                        optional="true"
                        type="combo"
                        selected-indexes='[0]'
                        desc="ProdottoFERRETTI"
                        onchange="mostraAlertMsgOption(this); "
                        onfocus="on_focus(this)"
                        placeHolder = "  LAN">
            <smart-list-item style="background-color: transparent;" alert_msg="" value="111111113">1231</smart-list-item>
            <smart-list-item style="background-color: transparent;" alert_msg="" value="LAN1223">Lang</smart-list-item>
        </smart-combo-box>
	<script>
        function on_focus() {
        }
        function mostraAlertMsgOption(){
            const combobox = document.querySelector('smart-combo-box');
            console.log( combobox.selectedValues)
        };
        function reloadFunction (){
            window.location.reload();
        }
 

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/