Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Dropdown componenet issue

Avatar

Level 2

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 

mudaliar847906_0-1629800972018.png

 

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

 

Kindly help on this

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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>

View solution in original post

3 Replies

Avatar

Community Advisor

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!

Avatar

Correct answer by
Community Advisor

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>

Avatar

Community Advisor

@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?