How to add a link to selectpicker items?

Question

I want any option of menu to refer to some page when get clicked in the angular selectpicker . How can I do this?

I tried something like this, but to no avail

<option><a href="">First Option</a></option>

Here's Codepen sandbox.

HTML

<html ng-app="selectDemoApp"> 
<body>
  <div role="main">
    <div class="container">
      <section ng-controller="SelectCtrl">
        <div class="page-header">

          <select class="selectpicker">
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Relish</option>
          </select>

        </div>
      </section>
    </div>
  </div>
</body>
</html>

JS

angular.module('selectDemoApp', [ 'angular-bootstrap-select', 'angular-bootstrap-select.extra']);

function SelectCtrl($scope) {
  $scope.form = undefined;
}

Answer 1

Try this way

<select class="selectpicker" ng-model="changeState" ng-change="change(changeState)">
    <option value="https://google.com">Mustard</a>
    </option>
    <option value="/2.html">Ketchup</a>
    </option>
    <option value="/3.html">Relish</a>
    </option>
  </select>

In your controller

$scope.change = function(url){
  window.open('url');
}

Hope you will get an idea to achieve your goal..

Answer 2

You can use a other logic to perform your redirection.

See the Codepen forked from yours.

Here it is the controller which perform the redirection :

VIEW :

 <select class="selectpicker" ng-model="choice" ng-change="redirect()">
            <option value="/1.html">Mustard</a></option>
            <option value="/2.html">Ketchup</a></option>
            <option value="/3.html">Relish</a></option>
 </select>

CONTROLLER :

 $scope.redirect = function()
  {
    var landingUrl = "http://" + $window.location.host +  $scope.choice;

    $window.location.href = landingUrl;
  }

Answer 3

Here is updated codepen with your solution.. http://codepen.io/anon/pen/qOxgJz

<select class="selectpicker" ng-change="onSelectChange()" ng-model="selectedValue">
    <option>Mustard</a></option>
    <option>Ketchup</a></option>
    <option>Relish</a></option>
</select>

var selectDemoApp = angular.module('selectDemoApp', [ 'angular-bootstrap-select', 'angular-bootstrap-select.extra']);
selectDemoApp.controller('SelectCtrl', ['$scope', '$window',
  function($scope, $window) {
      $scope.onSelectChange = function(){       
        if($scope.selectedValue === 'Mustard'){
           $window.open("www.google.com");
        } else if($scope.selectedValue === 'Ketchup'){
           $window.open("www.facebook.com");
        } else if($scope.selectedValue === 'Relish'){
           $window.open("2.html");
        }
      }
  }
]);

How to add a link to selectpicker items?

Question

3 answers

solution1
3 ACCPTED 2015-10-23 20:33:22

solution2
1 2015-10-23 20:36:52

solution3
0 2015-10-23 20:41:10

How to add a link to selectpicker items?

Question

3 answers

solution1 3 ACCPTED 2015-10-23 20:33:22

solution2 1 2015-10-23 20:36:52

solution3 0 2015-10-23 20:41:10

solution1
3 ACCPTED 2015-10-23 20:33:22

solution2
1 2015-10-23 20:36:52

solution3
0 2015-10-23 20:41:10