Question

有没有办法将事件绑定到jquery或angularjs中的option标签。我特意在寻找特定选项的点击事件。

考虑一个例子

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

我有一个选择下拉列表，其中有三个选项，前两个是简单的，而第三个是复杂的。每当用户选择自定义范围（选项3）时，我需要显示一个引导模型，在其中我放置一个引导自定义日期选择器。我可以通过添加一个更改事件处理程序来选择元素来使其工作，但是如果用户选择Ccustom Range选项并使用datepicker选择日期并关闭模式，则会出现问题。之后，用户再次尝试选择“自定义范围”选项，以便更改所选的日期范围。然后，此更改事件将不会触发，因此引导模式将不会显示。

重要说明：我们在模态中显示datepicker（bootstrap或任何其他），一旦用户选择了模态将被关闭的日期。

Answer 1

您需要使用ngChange

模板：

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

控制器：

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

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

这是一个工作小提琴：http://jsfiddle.net/trollr/ugfbo9x2/

Answer 2

可以通过 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>

然后通过 select_value

处理它

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

Answer 3

onChange事件未被触发，因为该值未发生变化。一个简单的解决方法是，如果关闭模态，则清除下拉列表的值。

所以在你的datePicker的select函数的处理程序中，你可能会喜欢 $（＆＃34; datePicker＆＃34;）。clear（）或类似的东西

Answer 4

您不能在<option>部分添加任何角度代码。

但是，对于第三个选项选择的日期更改方案，请参阅以下内容：

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

使用＆＃39; datepicker＆＃39; Angular Bootstrap用于使用datepickers：

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

<option>单击事件angularjs

4 个答案: