Mobile website menu selection

I want to create a select menu for my mobile website. I have added the select HTML code to my page.

  <select id="menu_mobile"> 
<option value="" selected="selected">Navigation</option>
<option value="http://example.com/about">  About Us</option>
<option value="index.html">  Home</option>
<option value="index.html">  --Profile</option>
<option value="index.html">  --Services</option>
<option value="index.html">  --Contact</option>
<option value="index.html">  Contact Us</option>

</select>

However, when I view my site on an iPhone, the select menu is not clickable.

Is there a way to resolve this issue?

javascriptjquerycsshtml

Answer №1

It appears that the issue is related to the browser not redirecting to the selected value of the <select> element.

Using jQuery

$(document).ready( function() {
   $('#select').change( function() {
      location.href = $(this).val();
   }
});

<form action="">
    <select id="select">
        <option value="">Choose a site</option>
        <option value="/internal/location.htm">Location</option>
        <option value="http://external.site.com/">Other</option>
    </select>
</form>

Using Vanilla JavaScript

<form>
    <select onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value" name="URL">
        <option value="">Choose a site</option>
        <option value="/internal/location.htm">Location</option>
        <option value="http://external.site.com/">Other</option>
    </select>
</form>

Answer №2

Give This a Shot

$("select").change(function() {
  window.location = $(this).find("option:selected").val();
});

This code is functional, check out this fiddle If it's not working for you, make sure you have included the jQuery library in your project.

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 modal directives trigger a reset of $scope variables

I am developing a custom AngularJS application that needs to handle and store all the checkbox selections made by the user in a simple array of IDs. The functionality includes displaying a modal when the open button is clicked, allowing the user to perform ...

javascriptangularjsexpresspugangular-directive

The required keys [:id] are not included in the route matches

As a beginner in Rails, I've encountered similar issues that I can't seem to resolve. Here are my routes: resources :users do resources :items end My model setup is as follows: class Item < ActiveRecord::Base belongs_to :user end cl ...

htmlruby-on-railsrubypathroutes

How can I specify which specific div I want to run code on, rather than all divs with the

This code is affecting all instances of .flow-hold instead of just the div below the .title-hold with text that matches the ==. The reason for this is because I need to adjust the ranges used for each gauge1, gauge2, and gauge3 instances. I attempted $(&ap ...

javascriptjquery

the button function is unresponsive

Can someone please help me troubleshoot my jQuery code? Everything seems fine, but the generate button is not working when clicked! PS: I've searched extensively for a solution to this problem but haven't been able to find one. I've also at ...

javascriptjquery

Trouble Loading HTML Template Post Email Dispatch in Django

In my Django project, I have set up functionality to send an email after a form submission using the smtplib module. The email is sent successfully, but for some reason, I'm encountering an issue where the corresponding HTML template (delivery_email_s ...

javascriptpythonhtmldjangoform-submit

Utilizing CSS3 webkit-transitions with multiple properties on a div element along with multiple webkit-transition-delays

Is there a way to make a div slide 200px to the right and then reduce its scale by half separately? I want it to slide first and then scale, but currently both transformations happen simultaneously. I tried using webkit-transition-delay to set different ...

csswebkit

What could be causing the events of the confirm dialog buttons in Telerik's RadWindow to not fire?

Due to privacy concerns, I am unable to provide specific details about this issue. The confirm dialog feature is functioning flawlessly for the majority of users, except for one individual who is accessing the same environment using identical Internet Expl ...

javascriptjqueryasp.nettelerikradwindow

Issue with V-checkbox input-value not triggering correctly on change

Query Example: <query #[`${instanceItemIdKey}`]="{ item }"> <v-checkbox :input="item.content" @modify="$notify('onPermissionUpdate', item)" ></v-checkbox> </query> The information that influ ...

javascriptvue.jsvuetify.jsvuex

The access to the HTTP response object is not possible: the property is not found on the Object type

I recently created a response object and assigned it to the "this" object. However, when I try to access the datacentersinfo property, I encounter an error stating that the property does not exist on type Object. Due to this issue, I am unable to generat ...

javascriptangulartypescriptecmascript-6

What is the functionality of require(../) in node.js?

When encountering var foo=require(../), what specific modules does node.js search for? It may appear to look in the directory above the current one, but what exactly is it seeking and how does it function? Is there a comparison with include in C or impor ...

javascriptnode.js

Bundling sub-components using Rollup for NodeJS application packaging

My ES6 library consists of several sub-modules arranged like this: - package.json - lib - my_package - file1.js - file2.js - sub_module1 - file3.js - file4.js Currently, I import modules within my package using file resolution r ...

javascriptnode.jsrollupjs

Is it possible to incorporate a next.js image onto the background design?

I've encountered an issue while attempting to create a fixed background image with a parallax effect using Tailwind CSS and Next.js Image. If you need to see an example of this in action, check out this Template Monster theme. Here's the code s ...

javascripthtmlcssnext.jstailwind-css

Experiencing issues with archiving files in PHP and receiving a 'zipArchive::close() Read Error: no such file or directory in c:/' error message?

When using PHP to download multiple files as a zip folder, the code below is giving me an error message: "zipArchive::close() Read error: no such file or directory in C:// path" I have added an HTML button that, when clicked, retrieves the id of the row t ...

phphtmlfiledownloadphp-ziparchive

I am encountering an issue with this code. The objective is to determine the frequency at which a specific word appears in the provided paragraph

function processWords(){ text = document.getElementById("inputText").value; text = text.replace(/(^\s*)|(\s*$)/gi,""); text = text.replace(/[ ]{2,}/gi," "); text = text.replace(/\n /,"&bso ...

javascript

DataGrid React MUI: Aligning Column Data and Header for "Number" Type

In my React project, I am using MUI. I noticed that when I specify the type of a column as type: "number", both the column header and data align to the right. This issue can be replicated in a simple example taken from the MUI documentation: code ...

javascriptreactjsmaterial-uidatagridmui-x-data-grid

JavaScript: converting to string

Why does Object.prototype.toString === toString? When I include the following code in the global scope: var toStringValue = toString.call("foobaz"); I assume that toStringValue would be the value of window.toString since window is the default scope, corre ...

javascriptscopewindowtostring

Is there a way to apply a setTimeout to a <div> element upon the first click, but not on subsequent clicks?

Check out the fiddle I've created: http://jsfiddle.net/dkarasinski/dj2nqy9c/1/ This is the basic code. I need assistance with a functionality where clicking on a black box opens a black background and then after 500ms a red box appears. I want the ...

javascriptjqueryhtmlcss

Is there a way to freeze a row in Bootstrap 4?

I recently put together a slider featuring four images, but I've encountered an issue. When the pixel size drops below 768px, the image quality diminishes and they start stacking on top of each other. Is there a way to keep the images in a single row ...

htmlcsstwitter-bootstrapbootstrap-4

Error in Vue.js 2 Composition API: Trying to access 'length' property of undefined object

Greetings to the Vue.js user community! I'm facing a challenging issue that I can't seem to resolve: I am currently using Vue.js 2.x on Windows 11. Whenever I run yarn install or npm install, I encounter an error as displayed in the console. Vi ...

javascriptvue.jsvuejs2vue-composition-api

The jQuery function .split() is malfunctioning and causing issues with submitting AJAX data

The initial code snippet in this section is functioning correctly. The data is successfully being transferred to the PHP. Make sure to focus on the 'topost':'momo_1' within the data section of the AJAX request: var linkwjpg = $("#blur ...

jqueryajax