Dropdown componenet issue

[mudaliar847906]

Hi Team,

I have developed drop down component in that dropdown values are dynamic it is working finer for me in some scenarios additional option value is getting like below 

I need to remove that highlighted option based by checking the value how i can archive this  

Kindly help on this

[Asutosh_Jena_]

Hi @mudaliar847906 

It seems like you are using some jquery function to populate the value and there is some tertiary operation written in your code which is failing because of undefined value.

Can you please share the block of code which is used to populate the data here? Ideally you need to perform null or undefined check before appending the value to dropdown value attribute.

Thanks!

[Ritesh_Mittal · Accepted solution]

Hi @mudaliar847906 ,

Its an Angular JS behavior. You need to put initial value in your controller, like below

$scope.form.type = $scope.typeOptions[0].value;

See the thread

https://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select

Just try this example, here also you will see empty option

https://www.w3schools.com/angular/tryit.asp?filename=try_ng_select

Code snippet

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">
<option>Choose your number</option>

</select>

</div>

<script>
var app = angular.module('myApp', []);
$scope.form.type = $scope.typeOptions[0].value;

app.controller('myCtrl', function($scope) {
$scope.names = ["One", "Two", "Three"];
});
</script>

[BrianKasingli]

@mudaliar847906,

You can easily remove HTML from the DOM, using this line of code below using Javascript&colon;

document.getElementById('billPeriodValue.value').children[0].remove();

However, if you created customer code, using sightly or JSP, then I suggest you to update your view logic, and have that first index item of <option> in the <select> to be removed; therefore no JavaScript is needed.

Can you please explain how this <select> is being setup?