Is it possible to have a drop-down list with an input textbox field for creating new items in the same dropdown menu?
Is it possible to have a drop-down list with an input textbox field for creating new items in the same dropdown menu?
Here is a possible solution to your issue:
$("#btnAdd").on('click', function(){
var val = $('#txtItem').val().trim();
if(!val) {
alert('No value');
return false;
}
$('#mySelect').append($('<option>', {
value: val,
text: val
}));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect"></select>
<div>
Item: <input type="text" id="txtItem"/>
<button type="button" id="btnAdd">Add</button>
</div><!doctype html>
<html lang="en">
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="dropdown">
<span>Hover over me</span>
<div id="myDropdown" class="dropdown-content">
<textarea id="listTxtArea" rows="4" cols="50">Add your input here...</textarea>
<button type="button" onclick="addToList()">Add to list</button>
</div>
</div>
<script>
function addToList() {
$( "#listTxtArea" ).before( "<p>"+ $('#listTxtArea').val() +"</p>" );
$('#listTxtArea').val("Add your input here...");
}
</script>
</body>
</html>Is this the solution you were seeking?
If you want to enhance your form control, consider using the Select2 library which also supports tagging features alongside JQuery:
$(".form-control").select2({
tags: true
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</select>To use this feature, simply open the drop-down list, input your desired text in the textbox, and press ENTER to add and select the new entry.
I need to show an error message that says Please enter valid email. when an invalid email is entered, but I cannot use the ng-pattern attribute with this specific regex pattern. <md-input-container class="md-block" flex-gt-xs> <label>Ema ...
I need help creating an animation where a circle div with the class of "bubble" grows from nothing to its full size when a button is clicked using jQuery. I am currently facing difficulties in making it work properly. Here's my current code snippet: ...
<!-- TEMPLATE UPLOAD --> <script id="template-upload" type="text/x-tmpl"> {% for (var i=0, file; file=o.files[i]; i++) { %} <tr class="template-upload fade"> <td class="name"><span>{%=file.name%}</span></td> <td ...
One of the challenges I'm facing is managing multiple instances of a component called InputWithValidation within a form. I need to check if all instances are valid at once. For a single instance of InputWithValidation, I can easily verify its validit ...
Currently, I am delving into learning typescript and attempting to create a simple 'let' statement. However, I encountered an error indicating the need to use ECMAScript 6 or later versions. The exact message from the typescript compiler states: ...
Below is the code I am using to display a table within my application: var elementToPrint = this.mainTable.get(0); newWin = window.open(""); newWin.document.write('<html><head><title>' + elementToP ...
I'm currently on the hunt for solutions or techniques to debug my jquery script specifically under the Opera/IE browser. It appears that the ajax $.post() request is either not being sent at all, or it's being sent to the wrong address, among oth ...
Looking for a way to create a tooltip for an input field that involves changing icons based on certain conditions. An example scenario is the password field in a registration form. Seeking advice on the best approach to achieve this. Currently, here' ...
Seeking clarification on this specific CSS cascading/inheritance rule. In the given example, I would have expected the text inside the em tag to be colored #000000, but I was informed that it would actually be colored #ff0000. I am familiar with CSS speci ...
I'm encountering the error "window is not defined" in my NextJS project. The variable isMobile determines whether the window size is less than 767.98 to handle the hamburger menu functionality. This code worked in ReactJS but seems to be causing issue ...
What is the best approach to handling multiple images in HTML5? Is it preferable to create a separate canvas tag for each image or is it equally effective to have multiple images in one canvas, and how would I go about doing that? Here is the code I have ...
I am faced with a scenario where I need to generate random numbers based on a given set of numbers. For instance, if I have an array num=[23,56,12,22], I would like to obtain a random number from this array. ...
This project is utilizing express.js along with firebase. Whenever attempting to access a different file containing routes, it results in failure. Instead of successful emulation, an error is thrown when running this code: const functions = require(" ...
I'm currently diving into the world of HTML5 and CSS. I want to replicate the layout from . Specifically, I am interested in adding a transition effect to the border bottom of certain elements such as "View Our Listings", "The Agency Daily", "Meet our ...
I am currently working on implementing AddeventListener to listen for 'Exit' and 'LoadStart' events in InAppBrowser within IONIC2. Here is my HTML: <button (click)="browsersystem('https://www.google.com')" > Visit URL& ...
I tried searching for this functionality on a different website, but it didn't work on my site. Can you help me figure out how to trigger a click event on page load? On one of my pages, a popup box appears when I click on a "project" link. Here is th ...
Is there a way to ensure that a React/Next.js App always displays the local time in CEST, regardless of the user's location? For example, if I receive GMT time from the backend and want to offset it to display the CEST timezone, how can I achieve this ...
When hovering over the second, third, or fourth item, hidden text will appear on the left side. If you hover your cursor over the hidden text, it will disappear again. I want to be able to hover over the second item, move my cursor to "hide", and click o ...
I've been struggling to grasp the concept of asynchronous code execution in NodeJS. My goal is to fetch the output of ip a on a Linux machine and extract the IP Subnet manually. Once that is done, I simply want to use console.log() to display the IP S ...
Currently, I'm in the process of developing an AngularJS service provider (function) that achieves the following objectives: Gathers data from multiple tables within an SQLite database Delivers the resulting object to various controller functions S ...