Unable to set a specific position for adding a new option in a dropdown menu

I have implemented a semantic UI dropdown using the code below:

$('.ui.dropdown')
  .dropdown()
;

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  </head>
  <body>

    <select class="ui dropdown">
      <option value="">Select option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
      <option value="6">Option 6</option>
      <option value="new">+Add new</option>
    </select>

  </body>
</html>

I am facing an issue where I need to give a fixed position to the last option. The desired outcome is for the '+Add New' option to stay in a fixed position and not scroll along with the other options. I want this functionality to look similar to the example shown in this image.

jqueryhtmlcssjquery-uisemantic-ui

Answer №1

To create a sticky element, use the CSS property `sticky` as shown below:

$('#sticky').bind('click', function(event) {
  // Add your desired functionality here
  var x = document.getElementById("industries_served");
  var option = document.createElement("option");
  option.text = prompt("Please enter a new value", "Florida");
  x.add(option);
});
* {
  font-size: 16px;
}

#sticky {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  bottom: 0;
  border-top: .5px solid;
  color: blue;
}

select {
  border: none;
}

#wrapper {
  border: 1px solid;
  width: fit-content;
  margin: auto;
  /* Centering the div*/
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}

#industries_served option:hover {
  background-color: #ddd;
}

#sticky:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <div id="wrapper">
      <select class="ui fluid search dropdown" id="industries_served" name="industries_served" multiple="">
        <option value="">State</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="AR">New Mexico</option>
        <option value="AR">New York</option>
        <option value="AR">???</option>
      </select>
      <div id="sticky">+ Add more</div>
    </div>
  </div>
</div>

Answer №2

Check out this code snippet:

<!DOCTYPE html> 
<html>

<head>
<meta charset="UTF-8>
<style>

    select {
        position: relative;
    }
    select option {
        position: relative;
    }
    select option:last-child {
        position: sticky;
        bottom: 0;
        background-color: red;
    }
    </style>
 </head>
 <body>
    <select class="ui fluid search dropdown" id="industries_served" name="industries_served" multiple="">
        <option value="">State</option>
        <option value="AL">Alabama</option>
        <option value="AK">Blaska</option>
        <option value="AZ">CArizona</option>
        <option value="AR">DArkansas</option>
        <option value="AR">+Add more</option>
    </select>

    </body>

   </html>

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

Confirming the information in two sections of a form

Could someone assist me with validating my form? Specifically, I need help ensuring that the house number field only accepts two numbers and the postcode field only allows 5 characters. I have implemented a pattern attribute for validation and I am curiou ...

javascripthtmlformsvalidation

Steps to implementing a function just before a form is submitted

Imagine a scenario where you have the following HTML form: <form action="myurl.com" method="post" id="myForm"> <input type="number" name="number" class="numberInput"> <input type="number" name="number"> <input type="submit ...

javascripthtmlforms

The issue with WooCommerce's update_checkout function is that it is not properly updating the available shipping methods

My WooCommerce site includes a function that adds a 4€ fee when the cash on delivery payment method is selected: add_action('woocommerce_cart_calculate_fees', 'increase_cod_cost'); function increase_cod_cost() { if(WC()->sessio ...

phpjqueryajaxwordpresswoocommerce

Angular update row and save data to an array

When comparing the data of an edited row with the row just below it, I encounter a specific scenario. In a table containing 5 rows, as I edit records from top to bottom using the provided code snippet, I am able to store the values in an array. The most re ...

javascriptjqueryarraysangulartypescript

Issue with Angular FormControl Pattern Validator failing to validate against regex pattern

My goal is to restrict a text input field to specific characters only. I am looking to allow: alphanumeric characters (a-z A-Z 0-9) 3 special characters (comma, dash, single quotation mark) : , - ' A few accented characters: à â ç è é ê î ô ...

javascripthtmlregexangularforms

When I implement the persist gate in Next.js with Redux, the flex direction automatically adjusts

I'm currently developing an app using next js and redux. An interesting issue has arisen - when I include PersistGate in my _app.js file, the flex direction mysteriously changes from row to column in index.js. There haven't been any modifications ...

javascriptcssreduxflexboxnext.js

What is the best way to implement the Active list element feature in my menu bar?

The current list element is : <li class="nav__item"><a class="nav__link nav__link--active " href="#"... The standard list element is: <li class="nav__item"><a class="nav__link " href=&quo ...

javascripthtmljquerycss

Performing an Ajax request upon the completion of page loading

I am currently working on creating a search functionality for a page, where users can input text into a search box and the page will display results based on their search. However, I am facing some timing issues as the blank search page is loading before ...

javascriptjqueryajaxweb

Cease the use of the jQuery.css() method

Does anyone know how to halt the jQuery css() function? I've successfully used the jQuery.stop() function to pause the animate() function, but I'm unsure about stopping css(). Any help is appreciated. Thanks! ...

jquerycssfunction

Mastering jQuery Selectors

<ul id="comment1"> <li>response1</li> <li>response2</li> <li>response3</li> <li>response4</li> <li>response5</li> <li>response6</li> <li>response7</li> <li ...

jqueryjquery-selectors

Is it feasible to embed Instagram in an iframe without using the API?

Is there an alternative method to embed Instagram using iframe without the need for an API? ...

javascripthtmlcss

What is the best way to send a POST request to my Rails controller using Ajax?

I'm facing an issue trying to transmit data from my JavaScript game-state on the front end to my controller and ultimately store it in the database. Unfortunately, I haven't received any response so far, and I'm struggling to pinpoint the re ...

jqueryruby-on-railsrubyajaxpost

Tips for showcasing cards in a horizontal inline layout

Hello everyone! I'm currently working on creating dynamic cards, but I'm having trouble displaying them inline. I'd like to arrange the cards horizontally with a scroll bar. I want to make them display in horizontal line <div className=& ...

htmlcssreactjsfrontend

Animating Angular for particular conditions

My goal is to create unique animations for specific state changes in my AngularJS app. I found inspiration from this tutorial: https://scotch.io/tutorials/animating-angularjs-apps-ngview, which works well. However, I am aiming for the following animations: ...

jqueryangularjsng-animateng-viewangular-animations

What is preventing me from adjusting the padding of the mat-button?

Trying to adjust the default padding of a mat-button, but encountering issues with changing the component's style. Any suggestions on how to subscribe to the default padding (16px)? I've attempted modifying CSS properties to set the padding of a ...

cssangularsassmaterial-uiangular-material

Can I invoke a specific function from a controller in AngularJS?

I am new to developing in the MEAN stack and working on a Todo App where I create tasksheets and store todos within those specific tasksheets using AngularJS. Initially, I was retrieving all todos without considering which tasksheet they belonged to or cr ...

javascriptjqueryangularjsnode.js

Ways to develop a dynamic HTML TransferBox featuring a custom attribute

I am in need of developing a customized transferbox using HTML, JavaScript, and JQuery. The user should be able to select from a list of options and associate them with attributes. This selection process should involve transferring the selected options be ...

javascriptjqueryhtml

The outcome of a function within the $.ajax method is transformed into a string

Trying to pass an array of IDs using the $.ajax data variable is proving to be a challenge. The array is generated by a function, and I've noticed that if I define this function outside of the $.ajax call, it works fine. However, when I place the same ...

javascriptjqueryajaxarrays

Delete the right-hand p-timeline-event-opposite margin from the Angular 17 PrimeNG Timeline

I am currently utilizing the PrimeNG Timeline module to showcase a few straightforward horizontal timelines with content placed on the top side in a table format. How can I eliminate the space allocated by the .p-timeline-event-opposite section? Upon inspe ...

cssangularprimeng

Postback does not show updates made by JQuery

On Page_Load, I have two asp:BulletedLists - one is already filled with data while the other remains empty. Users have the ability to drag and drop <li>'s between these lists using the following function: function Move(element, source, target) ...

c#jqueryhtmlasp.net