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

Is there a way to automatically redirect my login page back to the original page in case of login failure?

I'm currently working on a basic login page using express.js + E.js. If the login credentials are incorrect, I have a variable badLogin that is triggered (see below). However, my goal is to redirect the website back to the login page instead of remai ...

htmlexpressejs

encountering an issue with server-side rendering of React causing an error

Node.js has been a bit of a challenge for me, especially when it comes to working with react and express. I have been struggling to find comprehensive tutorials and troubleshooting resources, leading me to ask minimal questions in the correct manner. While ...

javascriptnode.jsexpressreactjs

Update the variable values in the Onclick function

I am trying to modify the onClick function attached to a button. My goal is to change the function var from 'create' to 'update' when the page loads and also through other functions. I attempted the code below but it did not work as exp ...

javascriptjquery

Is there a way to use an Angular expression inside an HTML document to determine if a variable is a boolean type?

I'm working with an element in my HTML where I need to determine the type of a variable, specifically whether it's a boolean or not. <button process-indicator="{{typeof(button.processIndicator) === 'boolean' ? 'modalProcess&apo ...

javascripthtmlangularjs

Issue with MUI Data Grid sorting: Data Grid sortComparator function returning undefined

I'm attempting to organize data with nested values in a data grid, but I keep receiving 'undefined' on the sortComparator of Data Grid Columns. Code: Column Data Setup: { headerName: 'Title', field: `${this.props.type} ...

javascriptreactjsmaterial-ui

JavaScript makes Chrome Hard Reload a breeze

We've created a browser-based app using AngularJS and are currently testing it with a group of clients. One major challenge we're facing is explaining how to "Empty Cache and Hard Reload" using the Chrome browser (by pressing F12, then clicking o ...

javascriptangularjsgoogle-chrome

-moz-box-reflect - Styling for FireFox

I've been attempting to achieve a similar effect to this tutorial at http://designshack.net/tutorialexamples/HoverEffects/Ex5.html. However, I'm encountering issues with getting the reflection of the image to display properly in IE and Firefox. H ...

htmlcssinternet-explorer

Issue with npm version: 'find_dp0' is not a valid command

Hello, I have a small node application and encountered an issue while running a test. The error message displayed is as follows: 'find_dp0' is not recognized as an internal or external command, operable program or batch file. It seems to be re ...

javascriptnode.jsnpm

Retrieve the boolean value associated with a checkbox

I inherited a project from another developer. The code is able to retrieve data from the text input fields in the form, but not from the checkbox inputs. The previous developer implemented these functions (among others): protected function getObjectStrin ...

javascriptphpforms

Utilize Django to leverage a JSON file stored within a context variable for use in jQuery

I need to utilize a list in Jquery and integrate it with the Autocomplete jQueryUI widget. The list is small, so creating a new request seems unnecessary. Therefore, I believe using Jsquery's getJSON is also not required. Here is my current setup: ...

javascriptjqueryjsondjango

Utilizing JavaScript functions alongside a button within a Handlebars template

My handlebars project has the following structure: Project | +-- server.js +-- package.json +-- package-lock.json | +-- public | | | |-- css | | | + -- style.css | +-- views | | | |-- layouts | | | | | + -- main. ...

javascriptnode.jsexpressevent-handlinghandlebars.js

Issues with JQuery .attr method not functioning as expected

I'm having trouble with the .attr() function in jQuery. It doesn't seem to be changing the background-color of the div with the id "outline" like I expected. Here's an example of my code: <div id="outline"></div> And here is t ...

javascriptjqueryhtmlcssattr

Discovering the background color of see-through HTML elements using Selenium

Looking to count the characters with a specific background color. I am currently traversing through all the HTML nodes using this method: Counting inner text letters of HTML element Example HTML Page: <span style="background-color: #ffff00;"> ...

htmlseleniumwebdriverbackground-color

Tips for ensuring that divs resize to match the container while preserving their original proportions:

#container { height: 500px; width: 500px; background-color: blue; } #container>div { background-color: rgb(36, 209, 13); height: 100px; } #one { width: 1000px; } #two { width: 800px; } <div id="container"> <div id="one">&l ...

javascripthtmlcss

The Nextjs application folder does not contain the getStaticPaths method

I encountered a problem with the latest nextjs app router when I tried to utilize SSG pages for my stapi blog, but kept receiving this error during the build process app/blog/[slug]/page.tsx Type error: Page "app/blog/[slug]/page.tsx" does not m ...

javascriptreactjstypescriptnext.js

Tips for avoiding the display of the overall scrollbar while utilizing grid with an overflow:

In my react-redux application, I am utilizing the material ui Grid component for layout design. The structure of my code is as follows: <div> <Grid container direction="row" spacing={1}> <Grid item xs={3}> ...

javascriptcssreactjslayoutmaterial-ui

Error: The function of forEach is not applicable to todoList

_serilizedList(todoList){ let serialized = '*My to-dos:*\n'; todoList.forEach((t, i)=> { serialized += '*${i}* - ${t}\n'; }); return serialized; } Unexpected TypeError: todoList.forEach is not ...

javascriptnode.js

Stop SVG Text from Rotating using CSS

I designed an SVG circle containing text and now I would like to apply a CSS transform to rotate the SVG, but without rotating the text element. .progress { webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .progress__value { stroke-d ...

htmlcsssvg

The ng-repeat directive adds an additional line after each iteration of the list item

Whenever the angular directive ng-repeat is utilized with an <li> element, I notice an additional line appearing after each <li>. To demonstrate this issue, see the simple example below along with corresponding images. Here is a basic example ...

javascripthtmlangularjsangularjs-directiveangularjs-ng-repeat

Performing a $.POST request on a Squarespace webpage

I created a custom form on my website for booking appointments, and it posts to a third-party server. When I submit the form using the <form> tag, I receive the email notification. However, I want to submit the form using $.POST so that I can customi ...

javascriptjqueryajaxsquarespace