JavaScript: Opening selected values in a new page with window.location

I've tried implementing your solution as suggested, but unfortunately, it's still not functioning. Do you have any other ideas? Thank you.

code


open_links() {
var options = document.querySelectorAll('#dwl option'); 
for( var i = 0 ; i < options.length ; i++ )
window.open(options[i].value, '_blank');
}

**HTML**
<li id="li_8">
<label class="description" name="Download">Download a HTML sample</label>
<div>
<select id="dwl">
<option value="http://www.bbc.co.uk/">Sample 1</option>
<option value="http://www.bbc.co.uk/">Sample 2</option>
<option value="http://www.bbc.co.uk/">Sample 3</option>
<option value="http://www.bbc.co.uk/">Sample 4</option>
<option value="http://www.bbc.co.uk/">Sample 5</option>
</select>
<input type="button" onclick="open_links()" value="Download" />
</div>
</li>

Answer №1

Simply utilize window.open(url, '_blank'); to open each link by iterating through all the options within the select element with the id of dwl. You can achieve this using document.querySelectorAll like so:

HTML :

<input type="button" onclick="open_links()" value="Download" />

JS :

open_links()
{
    var options = document.querySelectorAll('#dwl option'); 
    for( var i = 0 ; i < options.length ; i++ )
        window.open(options[i].value, '_blank');
}

This should provide a solution to your query.

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

Tips for utilizing nodejs scripts in conjunction with the pug template engine

I am working with a node.js script that performs certain tasks and saves the results to a text file. Additionally, I have an index.pug file with a simple template that compiles to HTML. Is there a way for me to showcase the output of this script on an HT ...

Utilizing Ajax to retrieve an array of input textboxes and showcase the outcome within a div container

This is the form that I have designed for displaying information: <form name='foodlist' action='checkout' method='POST'> <table> <tr> <td>Product Name</td> <td>Price</t ...

Bypass pagination constraints for basic content display - Shopify / Liquid

I am looking to generate a comprehensive list of all the article URLs in my blog, which contains more than 150 articles. This is what I have currently: {% for article in blogs['myblog'].articles %} {{article.url}} {% endfor %} The issue I am fa ...

Rendering cannot occur because the data has not been set

var DialogController = function ($scope, configFac, $q) { var placeholders = []; var varInit = function () { $q.all([configFac]).then(function (response) { $scope.configResources = response[0]; placeholders[0] = resp ...

Angular.js: Applying a style to elements beyond the current scope based on the selected route

I'm looking to dynamically add classes outside of the current scope. Specifically, I need to add classes to the header, main, and footer elements as shown below: <header class="{{pageClass}}"></header> <main class="{{pageClass}}" ng-vi ...

Implementing an API route to access a file located within the app directory in Next.js

Struggling with Nextjs has been a challenge for me. Even the most basic tasks seem to elude me. One specific issue I encountered is with an API call that should return 'Logged in' if 'Me' is entered, and display a message from mydata.tx ...

Creating an Array in AngularJS with ng-model and submitting it with jQuery: A comprehensive guide

I am struggling to submit an array of values using jQuery and AngularJS. Whenever I click the submit button, only the first array value is being retrieved. How can I get all array values using ng-model? Here is a link to all my code: https://jsfiddle.net/r ...

Is the `crypto.randomInt()` function known for its cryptographic security strengths?

Trying to find the best method for generating secure random numbers in Node.js. One option I've come across and currently using is crypto.randomInt(). Wondering if this method is truly cryptographically secure or if there are more reliable alternative ...

Saving child elements before saving parent in Rails

I'm currently utilizing Paperclip within my Rails application to validate file attachments and store them in AWS S3. The goal is to allow users to upload multiple "RecordAttachments" (file attachments) while filling out a Record form. The challenge l ...

What is the best way to iterate through an Object.entry and multiply one value by another key value within a loop?

I am looking to enhance the functionality of my Vue.js composition API web application by calculating the total number of employed workers in different sectors. However, I want to multiply the number of workers by another key:value property instead of ju ...

Disabling data-scroll-speed on mobile devices

As a beginner in JavaScript/jQuery, I am working on incorporating code that changes the scrolling speed of specific elements on my webpage. However, I am struggling to disable this code for smaller screen widths. Here is the code snippet I have so far: &l ...

Is it possible to achieve consistent scrollY height values across various screen sizes?

Looking to apply a class when a certain screen height is reached? Here's my approach: window.onscroll = function() {scrollPost()}; function scrollPost () { var x = window.screen.width; var i = window.scrollY; var a = i / x; animator ...

Applying CSS styles to a class dynamically using JavaScript

Is there a way to dynamically add a new CSS property to an existing class using JavaScript? Let's say I have a class called .test with some pre-defined styling. How can I append the property color: blue; to this class using JavaScript? const elm ...

Pressing the reset button on a basic calculator

I am experiencing an issue with my calculator. It works fine initially, but after using the reset button, it stops functioning properly. Currently, I only have the multiplication set up as I debug this problem. I am new to JavaScript and would appreciate a ...

Warning: The update depth in Nextjs has surpassed the maximum limit

I am currently developing a React Header component with a dropdown menu feature that can be toggled. Upon loading the page, I encountered the following error: next-dev.js?3515:20 Warning: Maximum update depth exceeded. This issue may arise when a compone ...

Use Cypress to make requests to GraphQL endpoints using the .request method

Despite my efforts to search for information on using Cypress requests with GraphQL, I come across terms like "mock up server" and "stub" without a clear example. I am struggling to find a comprehensive guide on how to effectively utilize GraphQL with cy ...

What is causing the data added to an array to vanish after the forEach loop within the useEffect hooks?

Below is the code snippet: const Tabs = ({data, scrollX}) => { const [measures, setMeasures] = useState([]); const containerRef = useRef({}); let measureMentArray = []; useEffect(() => { data && data.forEach(item => { ...

Get the editor that is currently selected in CKEditor

In my content management system, I have implemented two CKEditors side by side for users to simultaneously edit the main body and sidebar content. These editors share the same toolbar. To enhance user experience, I've integrated a plugin that allows ...

"Condense multiple lines of JavaScript into a single line using

Currently, I am managing an Angular 4 project using Webpack version 2.4. After compilation, a strange issue arises where some third-party JavaScript plugin files are being altered and displayed as lengthy, single-line strings in the browser's debugge ...

Extracting the href attribute from a child <a> tag

I am struggling to retrieve the value of the href within the code structure below: <div class=""> <div class=""> <div class=""> <a href=""><img src=""></a> </div> </div> </div> The m ...