What is the method for retrieving the chosen option from a dropdown menu?

Question

What is the method for retrieving the chosen option from a dropdown menu?

I'm currently working on an angularjs form where I need to pass definition.clazz to a js function. In my controller, I have the following js function:

$scope.createData=function(clazz){
// do stuff
}

Below is a snippet of the form:

<select  class="form-control" id="type" name="type" ng-model="definition.clazz">
    <option value="PrimitiveType" 
            ng-selected="type.type=='PRIMITIVE'">
        PrimitiveType
    </option>
    <option value="EnumerationType"
            ng-selected="type.type=='ENUM'">
        EnumerationType
    </option>
</select> 
<button type="button" 
        class="btn btn-primary"
        ng-click="createData(definition.clazz)">
    Create Data   
</button>

However, when I click the "Create Data" button, the ng-model is not set and even printing definition.clazz in console log shows nothing. How can I retrieve the selected value from the select element? Any help would be appreciated.

javascript angularjs

Answer 1

Answer №1

Perhaps you should consider utilizing ng-options as an alternative approach. It is likely that ng-model necessitates its use within the select element.

Answer 2

Perhaps you should consider utilizing ng-options as an alternative approach. It is likely that ng-model necessitates its use within the select element.

Answer 3

Answer №2

Give this a shot:

<select class="form-control" 
          id="type" 
          name="type" 
          ng-model="definition.clazz" 
          ng-options="option in ['PrimitiveType','EnumerationType']">  

</select>

Answer 4

Give this a shot:

<select class="form-control" 
          id="type" 
          name="type" 
          ng-model="definition.clazz" 
          ng-options="option in ['PrimitiveType','EnumerationType']">  

</select>

Answer 5

Answer №3

Hello @Pracede, do you believe this solution is the one you're aiming for?

Check out how the ng-model value appears in the console:

 

       var app = angular.module("app", []).controller('appCtrl', ['$scope',
          function($scope) {
            //$scope.type ={type="PRIMITIVE"}; // the tricky part?
            
            $scope.type = {};
            $scope.type.type="";
               
            $scope.createData = function(clazz) {
    if(clazz==undefined)
      {
        console.log("SELECT THE TYPE");
        return;
      }              

if(clazz=='PrimitiveType')
              {
                 $scope.type.type='PRIMITIVE';
                 console.log(clazz +  ' ' + $scope.type.type); 
              }
              else
              {
                $scope.type.type='ENUM';
                console.log(clazz +  ' ' + $scope.type.type);
              }    
    }
      }
    ]);

   

  <!DOCTYPE html>
    <html ng-app="app"> 
    <head>
      <title></title>
    </head>
    
    <body ng-controller="appCtrl"> 
      <select class="form-control" id="type" name="type" ng-model="definition.clazz">
<!--<option value="PrimitiveType" ng-selected="type.type=='PRIMITIVE'">PrimitiveType</option>
    <option value="EnumerationType" ng-selected="type.type=='ENUM'">EnumerationType</option>-->
        <option value="PrimitiveType">PrimitiveType</option>
        <option value="EnumerationType">EnumerationType</option>
      </select>
      <button type="button" class="btn btn-primary" ng-click="createData(definition.clazz)">
        Create Data
      </button>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </body>   
    </html>

UPDATE: For more guidance, check out similar issues on SO: How does ng-selected work? Updating model with ng-options and ng-selected

This approach reflects my perspective and offers a potential solution to your dilemma.

You have the flexibility to adjust the type based on the option's value and determine the type within the controller's function. Thus, the use of ng-selected may not be necessary in this context (in my view).

I trust this additional insight will help propel you forward.

Answer 6

Hello @Pracede, do you believe this solution is the one you're aiming for?

Check out how the ng-model value appears in the console:

 

       var app = angular.module("app", []).controller('appCtrl', ['$scope',
          function($scope) {
            //$scope.type ={type="PRIMITIVE"}; // the tricky part?
            
            $scope.type = {};
            $scope.type.type="";
               
            $scope.createData = function(clazz) {
    if(clazz==undefined)
      {
        console.log("SELECT THE TYPE");
        return;
      }              

if(clazz=='PrimitiveType')
              {
                 $scope.type.type='PRIMITIVE';
                 console.log(clazz +  ' ' + $scope.type.type); 
              }
              else
              {
                $scope.type.type='ENUM';
                console.log(clazz +  ' ' + $scope.type.type);
              }    
    }
      }
    ]);

   

  <!DOCTYPE html>
    <html ng-app="app"> 
    <head>
      <title></title>
    </head>
    
    <body ng-controller="appCtrl"> 
      <select class="form-control" id="type" name="type" ng-model="definition.clazz">
<!--<option value="PrimitiveType" ng-selected="type.type=='PRIMITIVE'">PrimitiveType</option>
    <option value="EnumerationType" ng-selected="type.type=='ENUM'">EnumerationType</option>-->
        <option value="PrimitiveType">PrimitiveType</option>
        <option value="EnumerationType">EnumerationType</option>
      </select>
      <button type="button" class="btn btn-primary" ng-click="createData(definition.clazz)">
        Create Data
      </button>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </body>   
    </html>

UPDATE: For more guidance, check out similar issues on SO: How does ng-selected work? Updating model with ng-options and ng-selected

This approach reflects my perspective and offers a potential solution to your dilemma.

You have the flexibility to adjust the type based on the option's value and determine the type within the controller's function. Thus, the use of ng-selected may not be necessary in this context (in my view).

I trust this additional insight will help propel you forward.

What is the method for retrieving the chosen option from a dropdown menu?

Answer №1

Answer №2

Answer №3

Similar questions

Steps to resolve the Uncaught SyntaxError: Unexpected token o in JSON at position 1 issue

Whenever I refresh my website after deployment, I encounter an empty error using the MERN stack

Extract the necessary fields from the JSON Schema

Is there a way to program JavaScript to automatically close a webpage?

What is the best way to display data retrieved from an API in HTML using handlebars?

Is there a way to send me the result of the radio input (Yes/No) via email?

Overlapping pinned columns in ng-grid

Node.js is having trouble locating a module that has been installed

Tips for concealing the background HDR map display in three.js without compromising the HDRI's contribution to the lighting effects

What is the best way to align an InputAdornment IconButton with an OutlinedInput in Material-UI?

Transmit a document via ajax jquery and retrieve it on the server side with Flask

Tips for retrieving values from CheckBox in Asp.net MVC using Jquery

pressing a button unrelated to the 'close' button still triggers the close event

Is it true that the Spring MVC <input:form> does not support the use of the name attribute? This limitation could potentially pose challenges when utilizing javascript document.getElementsByName

Create a form that calculates results using user-inputted values

Adjusting size of a div as you scroll - Java Script

"Implementation of clearInterval function may not always result in clearing the interval

Node.js display a comprehensive list of currently active threads

Tips for implementing validation in a multi-step form as outlined in w3schools tutorial

Tips for choosing the default tab on Bootstrap