Dropdown componenet issue | Community
Skip to main content
mudaliar847906
mudaliar847906
Level 2
Aug 24, 2021 10:31 AM UTC
Solved

Dropdown componenet issue

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Ritesh_Mittal
Ritesh_MittalAccepted solution
New Participant
Aug 24, 2021 12:31 PM UTC

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 reply

3 replies

BrianKasingli
BrianKasingli
New Participant
Aug 26, 2021 4:17 PM UTC

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

Translate
    Ritesh_Mittal
    Ritesh_MittalAccepted solution
    New Participant
    Aug 24, 2021 12:31 PM UTC

    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>

    Translate
      Asutosh_Jena_
      Asutosh_Jena_
      New Participant
      Aug 24, 2021 10:56 AM UTC

      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!

      Translate
        Terms & ConditionsAccessibility statement

        Loading footer...