javascript - 如何在闪电 UI 中重置组合框？

Question

**我的照明 UI 中有两个组合框，其中包含一组选项。如果其他组合框中的选项已更改，我想重置一个组合框。

如何在 Salesforce Lightning UI 中动态重置组合框中的选项？**

Answer 1

这是一个完整的自定义方法。闪电组件：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 控制器：comboboxExpController.js

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

JS 助手：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;
}
})

希望它可以帮助你。谢谢你。

Answer 2

不确定 saleforce，但这里是如何使用 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>