Show two choices in a select box next to each other

I've been attempting to display a select box with two options side by side in a list format. Struggling to find any libraries that can achieve this functionality. Here is an example: 

<select>

  <option x><option y>
  <option x><option y>
  <option x><option y>
  <option x><option y>
  <option x><option y>

</select>


View a working example here (I apologize for not being able to provide a jsfiddle as I'm unable to make it work!) where the "Right Eye PWR:" dropdown list showcases this feature.

I've experimented with styling the options to float left and right with a width of 50%, but haven't had much success (especially considering cross-browser compatibility). Any suggestions on how best to approach this problem would be greatly appreciated. Thank you in advance.

javascriptjqueryhtmlcss

Answer №1

If you want to achieve this, you'll first need to download the jquery-gentleSelect library. This library allows you to organize a select drop down menu by columns. Once you have added it to your site, use the following code:

    <script type="text/javascript">

                    $(document).ready(function() {
                        $('#selector').gentleSelect(); // apply gentleSelect with default options
                    });

    </script>


After incorporating this code, you can follow the instructions in their readme file to choose the number of columns to display in your select box.

To customize the functionality (like aligning them side by side with positive and negative attributes), you can add some additional custom code.

You can view an example on Js Bin here.

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

Using jQuery DataTable to fetch JSON data upon Document Loaded

I am struggling to implement a PHP script that returns JSON data to populate a DataTable. The PHP script 'api/exceptions_all.php' is as follows: <?php $select = "SELECT '', [FOR_PARTNER], [FOR_NAME] FROM [brokerage].[dbo].[for_ex ...

javascriptphpjqueryjsondatatables

Create a cohesive user experience by implementing the same CSS animation when hovering over two distinct elements

For a learning exercise, I attempted to create an animation. My goal was to have the circle trigger an animation when hovered over, while also revealing the text in the .hide element. However, as soon as I hover over the circle and then move my mouse onto ...

htmlcss

Utilizing a npm module in a web browser following importing in Node.js

I recently installed an npm module, but I'm having trouble figuring out how to use it in the browser after importing it. First, I installed the npm module using the following command (using a dummy example module): npm install sample-module In my p ...

javascriptnode.jsnpm

Is it possible to adjust the background image with properties like Scale to Fill, Aspect Fit, or Aspect Fill?

Is it possible to set the background image using the following properties in HTML? (These are properties used for iOS images, but I am unsure if there are similar ones in HTML): Scale to Fill, Aspect Fit, Aspect Fill https://i.stack.imgur.com/5X83I.jpg ...

htmlcssimage

Capturing dynamic text from a URL using Protractor and Node.js

How can I extract the 'PR001-CC001234' segment from a URL using Protractor in Node.js? While I am able to retrieve the current URL and save it as a variable, I am seeking assistance in extracting the dynamic text at the end of the URL. http://exa ...

javascriptnode.jsseleniumprotractor

Utilizing multiple instances of fs.writeFile in Node.js

I am currently managing a hotel's check-in/out information on an http server in Node.js. I store all the JSON data in memory and write it to a file using "fs.writeFile". Typically, the data does not exceed 145kB, but when consecutive calls to fs.write ...

javascriptnode.jsconcurrencywritefile

Invalid JSON syntax: found an unexpected token, the letter

JSON.parse() doesn't seem to be functioning properly within my code, and I'm unsure of the root cause. JavaScript Code: var obj = JSON.parse(this.responseText); console.log(obj.status + " " + obj.type); if (obj.status == "success") { documen ...

phpjquerymysqljsonvisual-studio-cordova

Exploring the world of Django and JSON POSTs in the realm of Google API mania

Project Overview I am currently developing an application aimed at assisting users in finding rides. My tech stack includes Django, Python 2.7, and integration with Google Maps and Directions APIs. Within a specific view, I present a map where users can ...

javascriptdjangojsonpostgoogle-directions-api

Having trouble with the find method when trying to use it with the transform

In my code, I have three div elements with different values of the transform property assigned to them. I store these elements in a variable using the getElementsByClassName method and then try to find the element where the value of the transform property ...

javascriptcss

When the settings are saved in PHP and AJAX, the password fields are automatically cleared

On my settings page, users can update their information. All fields are working correctly except for the password field. Currently, when a user clicks submit, it updates the password to nothing in the MySQL database. What I want is for nothing to happen in ...

phpjquerymysqlajax

I encountered an error with no matching overload when attempting to make a call using the Tanstack query function

While I was successfully calling a single data in my database using the useEffect hook, now I am attempting to learn how to use tanstack@query. Unfortunately, I encountered an error when trying to call it. No overload matches this call. Overload 1 of 3, ...

javascriptreactjsnext.js

The arrangement of columns is not correctly aligned

My website layout is giving me trouble. I want to create a three column design, but unfortunately, it's not aligning properly. Each subsequent column is being pushed down slightly more than the previous one. Is there any way to fix this issue? Interes ...

htmlcss

Showing a group of users in real-time as they connect using Socket IO

I've been working on setting up a system in Socket IO to create a list of individuals who join a 'party room'. The plan is to lock the party room once all players are present, and then display views to users. However, I've hit a roadblo ...

javascriptjqueryarraysnode.jssockets

Activate CSS modules in ReactJS by incorporating a .module extension to the CSS file

Being new to ReactJS, I recently learned about enabling CSS modules and discovered the following: If you append .module to a class name, it will generate a base64 hash string for that class As an example, I created a function-based component called Lay ...

htmlcssreactjs

Implementing fullCalendar's addEventSource function with the color customization feature

One feature of my application involves dynamically adding events to the calendar. function AddEventSourceDetailed(act_id) { $('#calendar').fullCalendar('addEventSource', function (start, end, callback) { var startTime = Mat ...

javascriptjquerycalendarfullcalendar

What is the Significance of the Height in This Sample Menu?

I came across this interesting menu sample on W3Schools while working on my MVC layout page. My menu was looking messy, and I really liked the clean look of this one. When I pasted it into my website, it worked perfectly, but I'm puzzled about how it& ...

htmlcss

Can we streamline this jQuery code by utilizing .hasClass and .bind?

Can this code be simplified? Initially, when #griffyindor has the 'active' class, I want all other houses (slytherin, ravenclaw, and hufflepuff) to show. If at any point it loses the 'active' class upon clicking something else, I want ...

javascriptjquery

Working with NodeJS: Utilizing object casting with default values and eliminating superfluous

In the backend code of a NodeJS application, there is an object defined as follows: { name : "foo" secret : "bar" } The objective is to return this object as JSON in response to an HTTP request without including the secret key. The desired return obj ...

javascriptnode.jsexpressecmascript-6es6-class

Show the time in hours and minutes (00:00) while rounding off seconds to the nearest minute

I need the time to always display with leading zeros when less than 10. For example, if a task took 3 hours, 7 minutes, and 33 seconds, it should be shown as 03:08. Currently, I have the buttons disabled after they are clicked to prevent restarting the ti ...

javascriptangularjsjsfiddle

How can we restrict a textbox to only accept alphanumeric characters using solely HTML code?

Imagine a scenario where you have a textbox and your goal is to allow only alphanumeric characters (case insensitive). You've already achieved this using javascript and regex.test(), but now you're wondering if there is a simpler way to implement ...

htmlstringtextbox