Tips on inserting a button within a select element using jQuery

Can anyone help me with adding a button alongside the select options? I want to repeat the button and option format like this. I have been unsuccessful in my attempts so far. Any assistance would be greatly appreciated.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31535e5e45424543504171051f071f00">[email protected]</a>/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cda7bcb8a8bfb48dfee3f8e3fc">[email protected]</a>/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84f4ebf4f4e1f6aaeef7c4b5aab5b2aab5">[email protected]</a>/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f4f9f9e2e5e2e4f7e6d6a2b8a0b8a7">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form control: select</h2>
  <p>The form below contains two dropdown menus (select lists):</p>
  <form action="/action_page.php">
    <div class="form-group">
      <label for="sel1">Select list (select one):</label>
      <select class="form-control" id="sel1" name="sellist1">
       <button>button1</button>
       <option>1</option>
        <button>button1</button>
        <option>2</option>
        <button>button1</button>
        <option>3</option>
        <button>button1</button>
        <option>4</option>
        <button>button1</button>
      </select>
      
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

</body>
</html>

Answer №1

Unfortunately, it is not possible to insert HTML code inside an option element. Only text content is allowed. To achieve similar functionality, you can either use a list element to simulate a select dropdown or implement a change-handler on the select element.

An alternative approach could be using grid layout for such functionality

Another option is to utilize Bootstrap dropdowns to create the desired functionality. It seems that achieving this within a native select component is not feasible.

For more information, please refer to this link https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp. You can use a bootstrap dropdown like the one shown in the example provided.

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

Python Selenium not registering button click

I'm working on scraping data from the website using Python with Selenium and BeautifulSoup. This is the code I have: driver = webdriver.Chrome('my file path') driver.get('https://www.ilcollege2career.com/#/') first_click = Web ...

Issue with scrolling in angular-ui-bootstrap modal on Apple devices with the mobile web app capability enabled

I've encountered a problem with a basic to-do list web application that I'm currently developing. In order to enable the iPhone standalone launch feature, I have included the following code: <meta name="apple-mobile-web-app-capable" content=" ...

jQuery functions are malfunctioning on Firefox, yet they are functioning properly on Chrome

Hey guys, can you take a look at this website using both Firefox and Chrome? I've noticed that jQuery doesn't seem to be working properly on Firefox. Any ideas why? ...

Display a selection list with an array through jQuery

I want to dynamically populate a dropdown select using an array through jQuery. Check out the code snippet below: // Create a dropdown list with numbers var numbers[] = { 1, 2, 3, 4, 5}; $.each(numbers, function(index, value) { ...

Swimming Left and Right Arrows

I am struggling to create a layout where images are stacked horizontally, with small arrows centered vertically on the left and right sides for scrolling. However, the arrows are currently centered relative to the page, rather than to the center image. I ...

PHP appears to be failing to gather input values from form submissions using both the POST and GET methods

I have been working on setting up a login and logout system, but I am encountering an issue with sending a hidden value for logging out. Despite trying different approaches to solve this problem, I either receive error messages (while the code actually wor ...

AngularJS's support for html5mode on GitHub pages is now available

Is it feasible for GitHub pages to accommodate AngularJS in html5mode? I came across a source online suggesting that it can be done with a fallback page for 404 errors. However, this solution seems flawed as it may result in multiple 404 errors, which wou ...

The appearance of the logout button may differ depending on the web browser being used

I have implemented a straightforward logout button using the following code: <li><a href="http://localhost:8666/web1/profile/mainpage/logout.php" onclick="return confirm('Are you sure to logout?');">Log Out</a>&l ...

Using a 100vh image height setting may result in elements overlapping with each other

I am trying to design a webpage using Bootstrap 4 that consists of a header, footer, and main content. The main content should occupy the space below the header, and the footer should be positioned below the main content. I attempted to achieve this by se ...

Looking to update the location of an element within a canvas using Vue and socket.io?

I am currently developing a 2D pong game using vue.js and socket.io. At the moment, I have a black rectangle displayed in a canvas. My goal is to make this rectangle move following the cursor of my mouse. The issue I am facing is that although my console l ...

Send data to webpage via AJAX and display the output in a designated div

As I work on the development of a one-page website, my goal is to dynamically load a slider with project images whenever a project is selected from a list. Unfortunately, I have been facing difficulties in passing the value through various methods, as the ...

Is there a way for me to superimpose text onto an image in this instance?

I am attempting to place a "Text overlay goes here" over the profilepic.jpg image below. I believe there may be an issue with my CSS code. My approach was to create a new div class named overlay and embed that line within the imgcontainer class. Can some ...

JavaScript double-click functionality is not operational on IE9 and IE11 browsers

My JavaScript code has an issue where single-click opens a link in a new tab and double-click opens a lightbox. This works perfectly in all browsers except for IE9 and IE11. In my initial code, both single-click and double-click function correctly. However ...

Unable to locate the request in Angular's HTTP testing

Facing an issue with my Jasmine test that involves mocking a HTTP request. The error I'm encountering is: Failed: Expected one matching request for criteria "Match URL: https://myurl.net/api/v2/OperationalAreas/1/Equipments?PageNumber=1&PageSize= ...

ValueError: Unable to perform slicing operation on this data

When attempting a query in nodejs, I encounter this error: [2017-08-19 19:06:55.946] [ERROR] error - TypeError: val.slice is not a function at escapeString (/var/www/Bot/node_modules/sqlstring/lib/SqlString.js:183:23) at Object.escape (/var/www/Bo ...

What is the process for verifying an email address using the deep-email-validator package from npm?

I'm looking to verify the existence of an email address used for registration on my website, ensuring it's not just a temporary one. How can I achieve this utilizing the npm deep-email-validator package? Within my HTML page, I've assigned n ...

Reduce image_tag into a single

Is there a way to combine all image_tag picture tags into one for compression? I'm currently using Nivo slider in the header and would like to avoid writing out each image tag in the layout page. Can you suggest any solutions? Thanks in advance. ...

Achieving margins readiness in JavaScript before the document is fully loaded

Currently, I am implementing a feature on my website that detects and adjusts the layout both when the page first loads and when the browser window is resized. However, I have encountered an issue that I overlooked. The problem arises from reading CSS valu ...

determining the preference between setTimeout and setImmediate

After reading the documentation on the node, it mentions: setImmediate(callback, [arg], [...]) This function is supposed to execute callback immediately after I/O events callbacks and before setTimeout and setInterval However, in practice, I noticed tha ...

Uh oh, the module parsing encountered an error: Unexpected token in React

I recently decided to create my own React component as an npm package and found a helpful guide at this link. However, being new to this, I encountered an error when I tried to run npm.start. Upon running the command, I received the following error messag ...