<option> click event angularjs

Question

Is there any way to bind an event to option tag in jquery or angularjs. I am specifically looking for a click event to a specific option.

Consider an example here

<select>
    <option>Last Month</option>
    <option>Last Year</option>
    <option onclick='showDatePicker()'>Custom Range</option>
</select>

I have a select dropdown in which there are three options, first two are simple whereas the thirdone is little complicated. Whenever a user chooses the Custom Range (option 3) then I need to show a bootstrap model in which I place a bootstrap custom datepicker. I can make it work by adding a change event handler to select element but then the issue arises that what if the user selects the Ccustom Range option and choose the date using datepicker and close the modal. And after that the user tries to select Custom Range option again to let say change the selected date range. Then this change event won't trigger and thus the bootstrap modal won't showup.

Important Note: We are showing the datepicker (bootstrap or any other) in a modal and once user selects the date that modal will be closed.

No, it's not possible to bind click event on option element. Use onchange event on select tag or custom selectbox. — dfsq
– dfsq, Commented Apr 12, 2016 at 9:28

trollr · Accepted Answer · 2016-04-12 09:32:28Z

4

You need to use ngChange

Template:

<select ng-change="showDatePicker()" ng-model="value">
  <option value="month">Last Month</option>
  <option value="year">Last Year</option>
  <option value="custom">Custom Range</option>
</select>

Controller:

function MyCtrl($scope) {
  $scope.isClicked = false;
  $scope.value = 'month';

  $scope.showDatePicker = function() {
    if($scope.value == 'custom') {
      $scope.isClicked = true;
    } else {
      $scope.isClicked = false;
    }
  }
}

Here is a working fiddle: http://jsfiddle.net/trollr/ugfbo9x2/

answered Apr 12, 2016 at 9:32

trollr

1,12512 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jairo Malanay · Accepted Answer · 2016-04-12 09:30:45Z

0

it is possible to implement it via ngChange

<select ng-model="select_value" ng-change="changeSelect()">
    <option value="">Last Month</option>
    <option value="">Last Year</option>
    <option value="showDatePicker">Custom Range</option>
</select>

then handle it via the select_value

$scope.changeSelect = function() {
    if ($scope.select_value === 'showDatePicker') {
        // Execute datepicker here
    }
}

answered Apr 12, 2016 at 9:30

Jairo Malanay

1,3479 silver badges13 bronze badges

Comments

S.V. · Accepted Answer · 2016-04-12 09:35:34Z

0

The onChange event isn't being triggered because the value didn't change. A simple workaround would be for the value of the dropdown to be cleared if the modal is closed.

So in the handler for your datePicker's select function, you could have like $("datePicker").clear() or something like that

answered Apr 12, 2016 at 9:35

S.V.

1,2218 silver badges24 bronze badges

Comments

Mr Lister · Accepted Answer · 2016-04-19 11:00:15Z

0

You cannot put any angular code in the <option> part.

However for your scenario of date change on third option selection see the following:

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
    <select ng-model="selectBox" ng-change="checkIt()">
        <option>One </option>
        <option>Two </option>
        <option>Three</option>
    </select>
    <uib-datepicker ng-model="dt" class="well well-sm" datepicker-options="inlineOptions"></uib-datepicker>
    {{selectBox}} 
    <div ng-show="selectBox=='Three'">
    From: <input type="text" placeholder="fromDate" /> 
    To: <input type="text" placeholder="toDate" />
    </div>
    <script>
    //module declaration
    var app = angular.module('myApp', []);
    //controller declaration
    app.controller('myCtrl',function($scope){
        $scope.checkIt = function(){
            //write the code here for third selection
        }
    });
    </script> 
</body> 
</html>

Use 'datepicker' of Angular Bootstrap for using datepickers:

https://angular-ui.github.io/bootstrap/#/datepicker

edited Apr 19, 2016 at 11:00

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Apr 12, 2016 at 9:42

Deadpool

8,2969 gold badges49 silver badges96 bronze badges

3 Comments

Manish Rawat Over a year ago

But again, this is exactly what I have mentioned that what if the user selects the 3rd option and do some date selection and close the popup and after that try to select the 3rd option again which is already selected and thus no change event fires up than how can we handle the same.

Deadpool Over a year ago

Bro, as long as third option is selected your from and to date will be visible. So why will he need to select third option again. He can change the values directly on visible from and to date. wont he ?

Manish Rawat Over a year ago

No. Because, we are going to show the datepicker in a popup and as soon as the user selects the date he can close the popup(modal).

Collectives™ on Stack Overflow

<option> click event angularjs

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related