What is the best way to link to this list of options?

#episode-list {
  padding: 1em;
  margin: 1em auto;
  border-top: 5px solid #69c773;
  box-shadow: 0 2px 10px rgba(0,0,0,.8)
}

input {
  width: 100%;
  padding: .5em;
  font-size: 1.2em;
  border-radius: 3px;
  border: 1px solid #d9d9d9
}
<div id="episode-list">
  <input type="text" id="default" list="episodes" placeholder="Episodes">
  <datalist id="episodes">
      <option value="HTML">S1 E1</option>
      <option value="CSS">S1 E2</option>
      <option value="JavaScript"></option>
      <option value="Java"></option>
      <option value="Ruby"></option>
      <option value="PHP"></option>
      <option value="Go"></option>
      <option value="Erlang"></option>
      <option value="Python"></option>
      <option value="C"></option>
  </datalist>
</div>

How can I link these options to a URL when clicked on?

I need assistance with this task.

I want the options to redirect to specific URIs or URLs upon clicking.

Thank you for your help in advance.

javascripthtmlcss

Answer №1

Give this a try:

<select id="newLocations" onchange="window.location = this.value;"> <!-- Redirect to selected value on change !--> 
    <option value="./newLocation1.php">New Location 1</option> <!-- Customize values as needed !-->
    <option value="./newLocation2.php">New Location 2</option>
    <option value="./newLocation3.php">New Location 3</option>
</select>

Source: utilizing href links in the <option> tag. Don't forget to show some love to the original poster by giving them an upvote :)

Answer №2

utilize select instead of input in the following manner: 

<select id="default" multiple="true"  style="width:400px;" >
   <div id="txtHint"> 
   <option value="HTML">S1 E1</option>
        <option value="CSS">S1 E2</option>
        <option value="JavaScript"></option>
        <option value="Java"></option>
        <option value="Ruby"></option>
        <option value="PHP"></option>
        <option value="Go"></option>
        <option value="Erlang"></option>
        <option value="Python"></option>
        <option value="C"></option>
  </div>
</select><br/>

then include these script files:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>


next, add this to your code:

<script>
$(document).ready(function(){
    $("#default").chosen();
});
</script>

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

AngularJS encounters an issue while attempting to print a PDF file

I am encountering an issue with printing a PDF file that was generated using reportViewer in my Web API. The browser displays an error when attempting to open the PDF file. Below is the code snippet from the controller in my Web API: // ...generate candi ...

javascript.netangularjsasp.net-web-apireportviewer

Acquire information using Vue through HTTP requests based on Router parameters

I have been searching for a solution to this issue and even referred to the example provided on the Vue Router documentation, but I am still encountering difficulties. My goal is to make an HTTP call when a component loads initially, then monitor the route ...

javascriptvue.jsgetvuejs2xmlhttprequest

Close the Bootstrap Modal by clicking the back button within SweetAlert

**How can I close a Bootstrap modal when clicking the back button in SweetAlert? I have tried using modal.hide() but it's not working. I am using Bootstrap version 5 and even checked their documentation with no luck. Does anyone know how to achieve th ...

javascriptreactjsbootstrap-5sweetalert

Numerical values are not considered by the JavaScript table filter

I'm having trouble with dynamically filtering the content. It works fine for the first two columns, but not for the third one. Maybe I need some additional JavaScript? Here is the link to my snippet: `https://www.w3schools.com/code/tryit.asp?filen ...

javascripthtml

accessing the angular fullstack default application by authenticating via google oauth2

Currently, I have my angular fullstack application running on localhost:9000. I am trying to implement a feature that allows users to log in by clicking the "Connect with Google+" button on the login page. However, I keep encountering an error 400 with th ...

javascriptangularjsangular-fullstack

What steps can be taken to customize the default keyboard shortcuts functionality in Swiper.js?

I am trying to customize the functionality for left/right keys in Swiper.js but I am unable to find a way to do this through the API () It seems that the API only allows you to disable/enable default actions: mySwiper.keyboard.enabled // Whether th ...

javascriptswiper.js

Incorporating transitions within a styled component using @emotion/core

I'm currently working on adding a smooth transition effect when a button is clicked. The code that adjusts the isOpen property is functioning correctly. However, I'm facing an issue where instead of animating, the content just flips abruptly. I a ...

javascriptreactjsemotioncss-in-js

The iteration count and stop code in CSS are failing to function correctly

Is there a way to make this loop once and then stay as is unless the page is refreshed? I've tried multiple methods I came across. Can you modify the code so I can see where the changes are being made? The goal is to have it display once and then per ...

htmlcssweb

Button click initiates DataTables search rather than manually entering text in the input field

I am exploring the option of relocating the search function from an input to a button for a table that has been modified using DataTables. Currently, I have a customized input that triggers this function: <script> $(document).ready(function() { ...

javascriptjqueryhtmldatatables

Divs are unable to be positioned at the top of the container

I am struggling with the alignment of blocks inside a container that can be dragged and re-sized within their container. The default position should have 7 divs side-by-side at the top of the container, however, they are appearing stacked on top of each ...

jqueryhtmlcssjquery-ui

limitation in bootstrap ensures that only one collapse element is open at any

Hey, can someone help me fix this code? I'm trying to make it so that only one element opens at a time, but I can't seem to figure out how. Right now, if I click on two elements, they both open and the other one doesn't close. This is what ...

javascripthtmlbootstrap-4

Combining NodeJS with PHP: A Seamless Integration

They say NodeJS is perfect for creating real-time chat applications and I'm eager to add a chat feature to my website. Right now, I have the design ready and need to work on the back-end code. However, when I use socket.io + express, things don' ...

javascriptphpnode.jsexpresssocket.io

Error encountered when uploading mp3 file to S3 node due to size limitation

Currently, I am utilizing Node to transmit mp3 files to Amazon S3. However, after uploading the file, it shows a size of 9.0 Bytes and when attempting to play the audio from the public URL, it does not work as expected. Here is my current code snippet: rou ...

javascriptnode.jsamazon-s3storage

The current situation is not effective; it is causing an error saying "Uncaught TypeError: Cannot read property 'substring' of undefined"

Encountering an error "Uncaught TypeError: Cannot read property 'substring' of undefined" while debugging in Chrome Inspector, with the following code: <script type="text/javascript"> $(function countComments() { var mcount = '/ ...

javascriptjqueryhtmljsonsquarespace

Mastering the art of handling errors with Javascript Promises

Through thorough research and some assistance, I have managed to create and annotate code that I believe will enhance the comprehension of Javascript Promises for individuals. However, I encountered a puzzling issue when attempting to trigger an error by ...

javascriptjqueryjson

Determine the difference between the starting and ending dates in AngularJS

In my project, I am trying to implement a feature where an error message should be displayed next to the control if the "ToDate" is before the "FromDate". Currently, I have set a minimum date which successfully disables the selection of ToDate before FromD ...

htmlangularjs

Six Material-UI TextFields sharing a single label

Is there a way to create 6 MUI TextField components for entering 6 numbers separated by dots, all enclosed within one common label 'Code Number' inside a single FormControl? The issue here is that the label currently appears only in the first tex ...

javascriptreactjstypescriptmaterial-ui

Transforming the text to be "unreadable"

I find myself in a rather odd predicament where I must display my name and contact details on a webpage. Although I am comfortable with sharing this information, I would prefer that it remain unreadable to robots or other unauthorized sources. Essentially ...

javascripthtmlcssweb

passing commands from a chrome extension to a content script

I want to set up a hotkey that will activate a function in my content script. The content script (main.js) is run when the page loads from my popup.js file. I've included the command in my manifest.json and I can see in the console log that it is tri ...

javascripthtmlgoogle-chrome-extensionsendmessagecontent-script

Issue with loading glb file in three.js: The 'format' property is not compatible with this material

When loading a .glb file I created in Blender using three.js, I am encountering an error message three.module.js:7950 THREE.MeshStandardMaterial: 'format' is not a property of this material.. The rest of the content loads correctly. What does thi ...

javascriptthree.jsblender