Dropdown componenet issue | Community
Skip to main content
mudaliar847906
mudaliar847906
Level 2
August 24, 2021
Solved

Dropdown componenet issue

  • August 24, 2021
  • 3 replies
  • 949 views

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.
Best answer by Ritesh_Mittal

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>

3 replies

Asutosh_Jena_
Community Advisor
Asutosh_Jena_Community Advisor
Community Advisor
August 24, 2021

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
    Community Advisor and Adobe Champion
    Ritesh_MittalCommunity Advisor and Adobe ChampionAccepted solution
    Community Advisor and Adobe Champion
    August 24, 2021

    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
      Community Advisor and Adobe Champion
      BrianKasingliCommunity Advisor and Adobe Champion
      Community Advisor and Adobe Champion
      August 26, 2021

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

        Terms & ConditionsAccessibility statement

        Loading footer...