How to reset combobox in lightning UI?

Question

**I have two comboboxes in my lighting UI with a set of options. I want to reset one combobox if the options in other combobox have changed.

How to reset the options in combobox dynamically in salesforce lightning UI?**

Answer 1

Not sure about saleforce but here is how do reset select box using javascript.

function myFn(){
select_box = document.getElementById("myselectbox");
select_box.selectedIndex = -1;
}

<select id="myselectbox" onchange="myFn()">
<option id="">select</option>
<option id="1">One</option>
<option id="2">two</option>
<option id="3">three</option>
</select>

Answer 2

Here goes a complete custom approach. Lightning Component: comboboxExp.cmp

<aura:component>

<aura:attribute name="options" type="List" default="[
{'label': 'Apple', 'class': 'Apple', 'value': 'Apple'},
{'label': 'Microsoft', 'class': 'Microsoft', 'value': 'Microsoft'},
]"/>
<aura:attribute name="option2" type="List"/>

<lightning:combobox name="fonts" required="true" label="Manufacturer" placeholder="Choose a Manufacturer" options="{! v.options }" onchange="{! c.handleChange }"/>
<lightning:combobox name="fonts" required="true" label="Product" placeholder="Choose a Product" options="{! v.option2 }"/>

JS Controller: comboboxExpController.js

({
handleChange: function (cmp, event, helper) {
    helper.populateValueToSecondOption(cmp, event);
}
})

JS Helper: comboboxExpHelper.js

({
populateValueToSecondOption : function(cmp, event) {
    var selectedOptionValue = event.getParam("value");
    if (selectedOptionValue == 'Apple') {
        this.createSecondOption('Apple', cmp, event);
    }
    else {
        this.createSecondOption('Microsoft', cmp, event);
    }
},

createSecondOption : function(value, cmp, event) {
    var options = [];
    if (value == 'Apple') {
        options.push(this.createObject('iphone', 'iphone', 'iphone'));
        options.push(this.createObject('macbook', 'macbook', 'macbook')); 
    }
    else {
        options.push(this.createObject('Windows OS', 'Windows OS', 'Windows OS'));
        options.push(this.createObject('Surface book', 'Surface book', 'Surface book'));
    }
    console.log(JSON.stringify(options));
    cmp.set('v.option2', options);
},

createObject : function(value, lebel, tempclass) {
    var obj = new Object();
    obj.label = lebel;
    obj.value = value;
    obj.class = tempclass;
    return obj;
}
})

Hope it helps you. Thank you.