What is the method for including a hyperlink within selectpicker items?

Is it possible to make any menu option in the angular selectpicker redirect to a specific page when clicked? If so, how can this be achieved?

I attempted the following approach without success:

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

Here is a link to the Codepen sandbox for reference.

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

Check out this method

<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 the controller section

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

This approach may help you in achieving your objective..

Answer №2

If you want to implement a different approach for redirecting, consider using alternative logic.

Take a look at the Codepen version that was derived from your original code.

Below is the part of the code responsible for handling the redirection:

VIEW :

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

CONTROLLER :

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

    $window.location.href = landingUrl;
  }

Answer №3

Check out the updated codepen containing 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");
        }
      }
  }
]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Despite including jQuery, the error message 'JQ is not defined' is still appearing

Alright, so an individual over at is uploading content to The upload.cgi script responds with: <script language="javascript" type="text/javascript" src="http://upload.foobar.com/jquery-1.3.2.min.js"> </script> <script language="javascript ...

Leveraging Vue properties within CSS styling

I am looking to utilize Vue data/prop variables within the <style> tag located at the bottom of my component. For example, suppose I have a component structured like this: <template> <div class="cl"></div> </template> < ...

Leveraging JSON Data for Dynamic Web Content Display

I have been attempting to parse and display the JSON data that is returned from a REST API without any success. When tested locally, the API's URL structure is as follows: http://localhost/apiurl/get-data.php It returns data in the following format ...

Activate datepicker upon choosing a symbol

If the symbol field is selected, the datepicker is enabled. If the symbol field is not selected, the datepicker remains disabled. <script src="{{asset('js/libs/jquery.js')}}" crossorigin="anonymous"></script> <link href="https:/ ...

experimenting with a controller that includes $scope.$on functionality

Can someone help me with testing the $scope.$on functions in my modal controller? I'm not sure how to go about it. Any suggestions? $scope.$on("filesUploaded", function (e, files) { for (var i = 0; i < files.length; i++) { ...

Bootstrap 4 offers a full-height, full-width layout that is optimized for Chrome, but may not display as well on Firefox or

My current project has a basic prototype that functions fine in Chrome, but encounters issues in Firefox and IE11. I am utilizing 'container-fluid' for full-width, 'h-100' for full-height, and 'overflow-y' to enable vertical s ...

Enhance the appearance of Ionic popups

Can someone help me with resizing a pop up? I've been struggling to get it right. This is the popup template in question: <ion-view> <ion-content scroll="false" class=""> test </ion-content> < ...

Stop a hyperlink from refreshing the webpage

Currently, I am in the process of developing a responsive menu. You can view a demo of my progress on Codepen. In order to prevent the page from reloading when I click a link within the menu, I have implemented the following JavaScript code: $('nav. ...

Creating a vertical collapsible navigation menu with Bootstrap 4

I'm currently utilizing Bootstrap 4 and attempting to display a straightforward vertical collapsible menu. <div class="row"> <div class="col-3"> <div id="accordion"> <div> <div id="ta ...

Alter the default time zone in JavaScript

PHP features a function known as date_default_timezone_set which impacts the GMT time that is used by the Date() command. Is there a way for this function to also impact JavaScript? Here is a custom function I have: function calcTime(offset) { d = n ...

Having trouble converting JSON object to regular object?

I'm trying to change a JSON object into a regular object by using this method... var slaobj = eval('('+s+')'); However, it doesn't appear to be working correctly (the `.length' is returning as undefined). What m ...

Insert a run section into AngularJS 1.3.8

Looking to integrate a run block into the AngularJS 1.3.8 code snippet below? After several attempts, I noticed that when I include the run block in my Angular app, the browser debugger in FireFox shows that the program briefly pauses at the beginning of ...

Guide on linking AngularJS user interface with Python server via RESTful API?

Can someone please explain the process of connecting two parts? Specifically, I am using Angular CLI for the front-end and Python for the logic. My goal is to send text responses from the front-end to my Python back-end and receive a response in return. ...

Sending data from a dynamically created PHP table to a modal

In my PHP-generated table, I have: <tbody> <?php $results = DB::select()->from('users')->execute(); foreach ($results as $user) { echo "<tr id='".$user['id']."'> <input type=&bs ...

Transform large GeoJSON files into TopoJSON format

I am struggling to convert a large GeoJSON file that is approximately 1.4GB in size. The command line tool is unable to handle the file due to its filesize. I typically use the topojson command tool like so: topojson {{ input file }} >> {{ output fi ...

issue encountered while attempting to load a previously saved game

I recently developed a puzzle game and added a save system, but I encountered an error while trying to load the saved data: Check out the website here And this is the saved file Here's the code snippet that is executed when loading the saved data: ...

Keys that are able to change dynamically

I am attempting to generate a dynamic object with dynamic keys like so: var test = "test"; var obj = { test:"bananas" } However, I am encountering an error: Uncaught SyntaxError: Unexpected token + Is this prohibited? Is there any way to accomplish t ...

Limit the options in jQuery UI auto-complete to search by name from a variety of JSON responses

I am looking to enhance my search functionality by utilizing jqueryUi's auto-complete feature to specifically target Names and exclude other array values such as fax. Here is how I have implemented it in php: <?php require_once 'db_conx.php&a ...

Steps for Adding a Header Bar to Mobile ViewsWant to enhance your mobile

Currently developing a Hybrid Mobile application using Angular 1.4x, Angular Material, UI-Router and Cordova. The use of UI-Router nested views to create a global sidebar navigation view has been effective, however, the addition of header bar markup to eac ...

How to apply a CSS style to a specific class based on conditions in Vue.js

Many questions have been asked about conditionally adding classes or styles to elements, but I want to take it a step further and conditionally style a class. In my application, users can customize foreground and background colors using a theming system. ...