Need to remove preselected value from datasource in dropdown

[Manish]

Hi.

I am using ViewBag as datasource for providing vales in dropdown called Skills

We have 9 fields like skill1, skill2.......skill9. Once we select one value at skill1 should not be displayed in dropdown skill2 and so on.

   <div id="dvSkill1" class="col-sm-4">

                        <div class="form-group label-floating is-empty">

                            <ej-drop-down-list id="ddlSkill1"  datasource="ViewBag.Skills"  ej-for="SkillId1" change="serviceList_change" 

                                               EnablePopupResize="true" Width="100%">

                                <e-drop-down-list-fields text="Name" value="Id" />

                            </ej-drop-down-list>

                        </div>

                    </div>

                    <div id="dvSkill2" class="col-sm-4">

                        <div class="form-group label-floating is-empty">

                            <ej-drop-down-list id="ddlSkill2" datasource="ViewBag.Skills" enable-filter-search="true" ej-for="SkillId2" 

                                               EnablePopupResize="true" Width="100%">

                                <e-drop-down-list-fields text="Name" value="Id" />

                            </ej-drop-down-list>

                        </div>

                    </div>

                    <div id="dvSkill3" class="col-sm-4">

                        <div class="form-group label-floating is-empty">

                            <ej-drop-down-list id="ddlSkill3" datasource="ViewBag.Skills" enable-filter-search="true" ej-for="SkillId3" 

                                               EnablePopupResize="true" Width="100%">

                                <e-drop-down-list-fields text="Name" value="Id" />

                            </ej-drop-down-list>

                        </div>

How i can implement the jquery such that the dropdown should not display preselected value? as i need to update the datasource again and again

Thanks

Manish Tiwari

[Karthikeyan Viswanathan]

Hi Manish, 

 Based on your scenario, you can clear the selected values by using cleartext public method or you can assign a null value to value property. Also, you can assign a data dynamically by using dataSource property. 

Please refer the below code example: 

<code> 

<ej-drop-down-list id="ddlSkill1"  datasource="ViewBag.Skills"  ej-for="SkillId1" change="serviceList_change"  

                                               EnablePopupResize="true" Width="100%" create="drpcreate" popup-hide="drppopuphide" popup-shown="drppopupshow" before-popup-shown="drpbeforepopupshow" change="drpvaluechange" select="drpselectchange"> 

                                <e-drop-down-list-fields text="Name" value="Id" /> 

                            </ej-drop-down-list> 

</code> 

<code> 

function drpselectchange(sender) {   var target = $("#ddlSkill2").data("ejDropDownList");       target.option({dataSource : data}); // you can change the data dynamically   target.option({value : null}); // you can remove the preselection         }

</code> 

Select – event triggers when items selected from DropDownList. 

Change – event triggers when value change. 

Create – event triggers when control created. 

Refer the below  API reference link: 

 https://help.syncfusion.com/api/js/ejdropdownlist#methods:cleartext  

https://help.syncfusion.com/api/js/ejdropdownlist#members:datasource  

https://help.syncfusion.com/api/js/ejdropdownlist#members:value  

https://help.syncfusion.com/api/js/ejdropdownlist#events:select  

Sample browser sample link: https://aspnetcore.syncfusion.com/dropdownlist/events  

Regards, 

Karthikeyan V. 

[Manish]

Thanks a lot !!!!! I got it.

[Shanmugaraja K]

Hi Manish, 

 

Most welcome, please let us know if you need any assistance. 

 

Regards, 

Shanmugaraja K