Drop Down Menu/Text Field in One

Drop Down Menu/Text Field in one

Option 1

Include the script from dhtmlgoodies and initialize like this:

<input type="text" name="myText" value="Norway"
       selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico"> 
createEditableSelect(document.forms[0].myText);

Option 2

Here's a custom solution which combines a <select> element and <input> element, styles them, and toggles back and forth via JavaScript

<div style="position:relative;width:200px;height:25px;border:0;padding:0;margin:0;">
  <select style="position:absolute;top:0px;left:0px;width:200px; height:25px;line-height:20px;margin:0;padding:0;"
          onchange="document.getElementById('displayValue').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
    <option></option>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
  </select>
  <input type="text" name="displayValue" id="displayValue" 
         placeholder="add/select a value" onfocus="this.select()"
         style="position:absolute;top:0px;left:0px;width:183px;width:180px\9;#width:180px;height:23px; height:21px\9;#height:18px;border:1px solid #556;"  >
  <input name="idValue" id="idValue" type="hidden">
</div>

How to add input text in select option dropdown

You can try <datalist>:

The HTML <datalist> element contains a set of elements that represent the values available for other controls.

<input list="select" name="select"><datalist class="form-control" id="select">      <option value="Trans"/>  <option value="Fund"/>  <option value="Insta"/></datalist>

HTML + Add input field inside a dropdown box

No. You cannot do that. Option cannot contain any other elements other than text content.

You may instead want to look at some custom plugins, or create your own to render div/spans out of the select that you provide.

Permitted content Text with eventually escaped characters (like é).

Just one example using bootstrap's dropdown. You can customize and style it accordinf to your need.

Fiddle

Little bit of customization like this

$('.dropdown-menu li').click(function () {
     $('.dropdown-toggle b').remove().appendTo($('.dropdown-toggle').text($(this).text()));
 });

Drop down menu with input box

Modify as your need

<!DOCTYPE html>
    <html lang="en">
    <body>
     <h2>This is what you want </h2>
      <center>
    <select style="height: 36px; border-right: 4px solid; width: 55px; background: transparent;">
    <option value="India">+91</option>
    <option value="India">+92</option>
    <option value="India">+93</option>
    <option value="India">+94</option>
    <option value="India">+01</option>
    </select>
    <input type="text" style="height: 30px; margin-left: -4px; padding-left: 5px;">
    </center>

    </body>
    </html>

How do I make Material UI's TextField dropdown selector open with a limited size of items?

You can try adding a maxHeight property to the SelectProps of the textfield component. Also, I believe you should rather use an MUI autocomplete if you want autocompletion and dropdown both.

After selecting option in dropdown menu append new input field

The following should solve your problem. In summary:

  • We select the dropdown element and listen for changes on it, using jQuery's change() method
  • We check if the value selected on the dropdown element matches 'other'
  • If it does, we check if we've already inserted the new input field into the DOM
  • If we haven't, we append the input field using jQuery's appendTo() method

$(document).ready(function(){    $('.degree-selected').change(function () {        var selectedItem = $(this).val();        if (selectedItem === 'other') {            if (!$('#other-field').length) {                $('<input type="text" name="other-field" id="other-field">').appendTo('#form');             }        }    });});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id='degree'> <form id="form">  <label for='college_name'>Degree</label>  <select class="degree-selected">   <option value="item-1">High school</option>   <option value="item-2">Bachelor's degree</option>   <option value="item-3">Master's degree</option>   <option value="item-4">Doctor of philosophy (Ph.D)</option>   <option value="other">Other</option>  </select> </form></div>

Replace text field with a dropdown menu in ASP.NET Core MVC Application

You should not put it on the Index page, because the Index is to display the data. You should change the Rating field to dropdown menu on the Creat page and Edit page.

Below is my test code,you can refer to it:

Controller:

public class MoviesController : Controller
{
     List<SelectListItem> rating = new()
     {
          new SelectListItem { Value = "G", Text = "G" },
          new SelectListItem { Value = "PG", Text = "PG" },
          new SelectListItem { Value = "PG-13", Text = "PG-13" },
          new SelectListItem { Value = "R", Text = "R" }
     };
     public IActionResult Create()
     {
          ViewBag.ratings = rating;
          return View();
     }
     [HttpPost]
     [ValidateAntiForgeryToken]
     public async Task<IActionResult> Create([Bind("Id,Title,ReleaseDate,Genre,Price,Rating")] Movie movie)
     {
          if (ModelState.IsValid)
          {
                _context.Add(movie);
                await _context.SaveChangesAsync();
                return RedirectToAction(nameof(Index));
          }
          return View(movie);
     }
     public async Task<IActionResult> Edit(int? id)
     {
          ViewBag.ratings = rating;
          if (id == null || _context.Movie == null)
          {
              return NotFound();
          }

          var movie = await _context.Movie.FindAsync(id);
          if (movie == null)
          {
              return NotFound();
          }
          return View(movie);
     }
     [HttpPost]
     [ValidateAntiForgeryToken]
     public async Task<IActionResult> Edit(int id, [Bind("Id,Title,ReleaseDate,Genre,Price,Rating")] Movie movie)
     {
          if (id != movie.Id)
          {
              return NotFound();
          }
          if (ModelState.IsValid)
          {
              try
              {
                  _context.Update(movie);
                  await _context.SaveChangesAsync();
              }
              catch (DbUpdateConcurrencyException)
              {
                  if (!MovieExists(movie.Id))
                  {
                      return NotFound();
                  }
                  else
                  {
                      throw;
                  }
              }
              return RedirectToAction(nameof(Index));
          }
          return View(movie);
     }
}

Creat.cshtml:

@model _2022071801.Models.Movie

@{
    ViewData["Title"] = "Create";
}

<h1>Create</h1>

<h4>Movie</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Title" class="control-label"></label>
                <input asp-for="Title" class="form-control" />
                <span asp-validation-for="Title" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ReleaseDate" class="control-label"></label>
                <input asp-for="ReleaseDate" class="form-control" />
                <span asp-validation-for="ReleaseDate" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Genre" class="control-label"></label>
                <input asp-for="Genre" class="form-control" />
                <span asp-validation-for="Genre" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Price" class="control-label"></label>
                <input asp-for="Price" class="form-control" />
                <span asp-validation-for="Price" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Rating" class="control-label"></label>
                <select asp-for="Rating" asp-items="@(new SelectList(ViewBag.ratings,"Value","Text"))" >
                    <option>Please select one</option>
                </select>
                <span asp-validation-for="Rating" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Edit.cshtml:

@model _2022071801.Models.Movie

@{
    ViewData["Title"] = "Edit";
}

<h1>Edit</h1>

<h4>Movie</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Edit">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <input type="hidden" asp-for="Id" />
            <div class="form-group">
                <label asp-for="Title" class="control-label"></label>
                <input asp-for="Title" class="form-control" />
                <span asp-validation-for="Title" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ReleaseDate" class="control-label"></label>
                <input asp-for="ReleaseDate" class="form-control" />
                <span asp-validation-for="ReleaseDate" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Genre" class="control-label"></label>
                <input asp-for="Genre" class="form-control" />
                <span asp-validation-for="Genre" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Price" class="control-label"></label>
                <input asp-for="Price" class="form-control" />
                <span asp-validation-for="Price" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Rating" class="control-label"></label>
                <select asp-for="Rating" asp-items="@(new SelectList(ViewBag.ratings,"Value","Text"))" >
                    <option>Please select one</option>
                </select>
                <span asp-validation-for="Rating" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Save" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Model:

public class Movie
{
     public int Id { get; set; }
     public string? Title { get; set; }

     [Display(Name = "Release Date")]
     [DataType(DataType.Date)]
     public DateTime ReleaseDate { get; set; }
     public string? Genre { get; set; }
     [Column(TypeName = "decimal(18, 2)")]
     public decimal Price { get; set; }
     public string? Rating { get; set; }      
}

Test Result:
Sample Image
Sample Image


Related Topics

"Erasing" in HTML5 Canvas

Decrease Bitrate on Wav File Created with Recorderjs

Create a Basic Mailchimp Signup Form Using Their API

Poor Anti-Aliasing of Text Drawn on Canvas

Box-Sizing: Border-Box => for Ie8

Convert Rgba to Hex

How to Remove X and Y on Submit in HTML Form with Image Type Button

Multiple Fonts in Font-Family Property

Missalignment with Inline-Block (Other Elements Pushed Down)

Making Href (Anchor Tag) Request Post Instead of Get

Which Versions of Ie Support Png Favicons

Client-Side Image Processing

How to Make a Cell of Table Hyperlink

Always Show Browser Scrollbar to Prevent Page Jumping

CSS Crop String in The Middle

CSS Changes Are Not Getting Reflected. Why

Is There a Jdk Class to Do HTML Encoding (But Not Url Encoding)

In The Dom Are Node Ids Case Sensititve


Leave a reply



Submit