Refreshing Select html tag

Using JavaScript with Hype
1

basically I’m calling the below JavaScript function to dynamically add Options to an html tag (Dropdown) and after adding all options I would like to set a specific value or index to be selected, its working and actually the required option is selected but not showing as selected in the dropdown box (green box).

For testing purposes I’ve set option 4 to be selected by default as example and it’s not showing as selected in required dropdown (green)

but if I click on the dropdown box option 4 is selected, so its like I need to refresh the dropdown or something I’ve tried something like ctl.refresh() and ctl.reload() and didn’t work?

function addOptions(id)
{ var res=#server(…SetComponents(id))#
var ctl = document.getElementById(‘Component’);
var dt=res.split(‘|’)
var vals=dt[0].split(‘^’)
var display=dt[1].split(‘^’)
for (var i=1; i<vals.length; I++)
{
var opt = document.createElement(‘option’);
opt.value = vals[i];
opt.innerHTML =display[I]
ctl.appendChild(opt);
if (i==3)
{opt.selected=true;}

} ctl.options.selectedIndex=3; }
//$(‘#Component’).prop(‘selectedIndex’,1);

//ctl.options.selectedIndex=3;

Screen2
Screen1

I’ve tried diffrent code and yes they seems to select a specific option as required but not showing as default selected at the top of the list ?
Thanks

2

Can you please post an example of your file.

3

As @MarkHunte said… but here a try half blind:


function addOptions(id) {
    var res = #server(…SetComponents(id))#;
    var ctl = document.getElementById('Component');
    var dt = res.split('|');
    var vals = dt[0].split('^');
    var display = dt[1].split('^');

    // Clear existing options
    ctl.innerHTML = '';

    // Add new options
    for (var i = 0; i < vals.length; i++) {
        var opt = document.createElement('option');
        opt.value = vals[i];
        opt.innerHTML = display[i];
        ctl.appendChild(opt);

        // Select option 4 (index 3) by default
        if (i == 3) {
            opt.selected = true;
        }
    }

    // Explicitly set the selected index to 3
    ctl.selectedIndex = 3;

    // Trigger change event to ensure the UI updates
    var event = new Event('change', { bubbles: true });
    ctl.dispatchEvent(event);
}

Key Points in the Updated Function:

  1. Clearing Existing Options:

    • ctl.innerHTML = ''; wipes out any old options.

  2. Adding New Options:

    • The loop adds options and selects the 4th one with if (i == 3).

  3. Setting Selected Index:

    • ctl.selectedIndex = 3; explicitly sets the selected option to the 4th one.

  4. Triggering Change Event:

    • var event = new Event('change', { bubbles: true }); creates and dispatches a change event to update the UI.

Note:

  • Make sure the id you pass in is correct and that the server response is what you expect.
1 Like
4

Thank you very much Max your advise worked, so to what I can see the - var event = new Event('change', { bubbles: true }); - refreshed the dropdown and showed the selected value correctly
My understanding is that the bubble event for an element should reflect on all parent elements inside the child element but I tried to apply it in another function where after getting the values and trying to set them in the corresponding values in my three dropdowns and yes its the same thing the values are set in dropdowns correctly but fail to refresh the dropdowns to show them up to the user UI, so how can I refresh a dropdown to show the selected value?

function getme(wo)
	{
		var wo=document.getElementById("WOs").value
		document.getElementById('Kit').value=wo;
	
		var res=#server(..getWOTree(wo))#;
		var prod=res.split('|')[0];
		var asset=res.split('|')[1];
		var comp=res.split('|')[2];
		document.getElementById('ProdLine').value = prod;
		document.getElementById('Asset').value = asset;
		document.getElementById('Component').value = comp;
				  var event = new Event('change', { bubbles: true });
	

		
	}

Thanks

5

Maybe this helps:

function getme(wo) {
    var wo = document.getElementById("WOs").value;
    document.getElementById('Kit').value = wo;

    var res = #server(..getWOTree(wo))#;
    var prod = res.split('|')[0];
    var asset = res.split('|')[1];
    var comp = res.split('|')[2];

    var prodLineDropdown = document.getElementById('ProdLine');
    var assetDropdown = document.getElementById('Asset');
    var componentDropdown = document.getElementById('Component');

    prodLineDropdown.value = prod;
    assetDropdown.value = asset;
    componentDropdown.value = comp;

    var event = new Event('change', { bubbles: true });

    prodLineDropdown.dispatchEvent(event);
    assetDropdown.dispatchEvent(event);
    componentDropdown.dispatchEvent(event);
}
1 Like