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.
Currently, I am facing a challenge while attempting to integrate an existing React Native module equipped with the following props: useComponent1: boolean useComponent2: boolean This is how the implementation looks like: render(){ if(useComponent1){ ...
I'm a beginner in the world of HTML and I have what might be considered as a basic question... Here is the style definition for my header in the CSS file: h1.heading { color: indianred; } I attempted to link it to my HTML file like this, but unfo ...
I have a question that may seem basic, but I've been struggling to find a solution. Despite searching for answers, none of the suggestions I've come across have worked for me. My application has two main containers - a header and a content div. T ...
Before, I had a table with a client summary list. One column showed object types and the other displayed the quantity of each object type. @login_required def client_summary(request, client_id): client = models.Client.objects.get(pk = client_id) i ...
Can the JSON response from a Server be manipulated in jQuery.ajax() before triggering the complete or error functions? Let's delve deeper into this query: Is it possible to inspect each property of the JSON data while processing it, and inform $.aja ...
I'm still learning Python and programming in general. I'm currently using Tornado as my web server to host my websites. However, when I try to generate a dynamic html page using self.render("example.html", variables here), the resulting page does ...
I have been working on a Rails application where I implemented an AJAX / JSON controller to facilitate dynamic HTML updates within the view. For guidance, I referred to this helpful resource: When making a call like this: ../related.json?vendor_id=1&b ...
There's a notification bar at the bottom of my page that lets the user know when their email has been sent. This bar is generated using useContext in React/Next.js. To see the code, check out this Codebox link: Code However, I've noticed there ...
I am facing an issue with my li elements. When a user clicks on them, it should open a more detailed view in another component. However, I noticed that it takes TWO clicks to show the data I want to display. The first click opens the component with an em ...
File Structure in eclipse The issue is that the CSS files are not loading at runtime, causing me to lose the design I created. Below is my code for the login page. When clicking on the links for the CSS files, they open in the Eclipse IDE instead of load ...
To achieve this specific layout, I am looking to utilize only underscore.js functions. Below is the array that I have: var xyz = [{ 'name': 'test' },{ 'name': 'test1' },{ 'name': &ap ...
When I try to run this code to retrieve the browser's screen width, I encounter the following error: ReferenceError: window is not defined The commented-out code works fine with a default value of 0 and updates correctly when the browser width chan ...
When the user clicks on the Add button, a new div should be added as shown in the image above. Implementing this functionality using Bootstrap is crucial because the divs must rearrange correctly based on different resolutions such as 1920x900, 1280x600, ...
I've implemented ajax show hide functionality to display tabs, but whenever I scroll down to the tab and click on it, the page scrolls back to the top. You can check out the example code in this fiddle: http://jsfiddle.net/8dDat/1/ I've attempt ...
function setFormOnSubmit(formName){ if(!formName) return; var form = document[formName]; form.onsubmit = function(){ console.log('This is the onsubmit function'); }; console.log('onsubmit successfully set ...
//using Input HOOK I am curious to understand how this custom hook operates. import { useState } from "react"; export default initialValue => { const [value, setValue] = useState(initialValue); return { value, onChange: event =&g ...
Is there a way to display the correct JavaScript box when using a While loop in PHP? Here is the code snippet: while($result= mysql_fetch_array($data)){ <tr class="<?php echo $style;?>"> <td><?php echo $result['commis ...
Is it possible to repeatedly call the MapITRFtoWgs84() function with input from a text file and save the output to another text file? I believe Selenium might be the right tool for this task. Could you provide guidance on how to achieve this? Attached is ...
How can I upload an image as JSON in an API? I need to upload a file to the server folder and save the file path in an object of a class after uploading the image. var data = $('#myForm').serialize(); $.ajax({ url: "/api/CompaniesApi/"+id, ...
While attempting to call a registration endpoint from a React front-end to a Node.js back-end using Axios, I encountered a 400 error: http://localhost:9000/user/register 400 (Bad Request) Here is my code: /* React component for user registration */ impo ...