I have some dropdown values in select type in an html page. I want to add some extra values to this from users, through a text box. When user enters the value and press the button the value should be added to the dropdown select box.
<table>
<tr>
<td> Blood Test: </td>
<td>
<select name="DragCompany">
<option value="ACI Ltd.">ACI</option>
<option value="Apollo Pharmaceutical Laboratories Ltd.">Appolo</option>
<option value="Beximco Pharmaceuticals Ltd">Beximco</option>
<option value="Beacon Pharmaceuticals Limit">Beacon</option>
<option value="Delta Pharma Limited">Delta</option>
<option value="Globe Pharmaceuticals Ltd">Globe</option>
</select>
</td>
</tr>
</table>
Try this:
var s = document.getElementById('DragCompany');
var inputContainer = document.getElementById('newinput');
function addtoselect() {
if (inputContainer.value) {
s.options[s.options.length] = new Option(inputContainer.value);
inputContainer.value = '';
}
}
<table>
<tr>
<td> Blood Test: </td>
<td>
<select id="DragCompany" name="DragCompany">
<option value="ACI Ltd.">ACI</option>
<option value="Apollo Pharmaceutical Laboratories Ltd.">Appolo</option>
<option value="Beximco Pharmaceuticals Ltd">Beximco</option>
<option value="Beacon Pharmaceuticals Limit">Beacon</option>
<option value="Delta Pharma Limited">Delta</option>
<option value="Globe Pharmaceuticals Ltd">Globe</option>
</select>
</td>
</tr>
</table>
<input type="text" id="newinput">
<button onclick="addtoselect()">Add</button>
Related
I created one View Model with two Entities. I am passing this view model to my MVC Razor view which have two html drop-downs for each entity respectively.
<select class="form-control" id="Employees" name="Employees">
#foreach (var employee in Model.Employees)
{
<option value="#employee.Id"> #employee.name </option>
}
</select>
<select class="form-control" id="Tasks" name="Tasks">
#foreach (var task in Model.Tasks)
{
<option value="#task.Id"> #task.name </option>
}
</select>
Employee table is the parent of Task table. What I want is getting all the tasks which are related to particular employee only. e.g. In Employee drop-down I select John, then in Tasks drop-down I should get all the tasks which are relative to John. I know how to do this with ajax. I am looking for some other solution.
Is it possible to do something like this:
#foreach (var task in Model.Tasks.Where(x=>x.employeeId == 'Selected in previous dropdown'))
{
<option value="#task.Id"> #task.name </option>
}
Html block
<select id="Employees">
<option value="">Select Employee</option>
<option value="1">Employee1</option>
<option value="2">Employee2</option>
</select>
<select id="Tasks">
<option value="">Select Task</option>
<option value="1" data-employee="1">Employee1Task1</option>
<option value="2" data-employee="1">Employee1Task2</option>
<option value="3" data-employee="1">Employee1Task3</option>
<option value="1" data-employee="2">Employee2Task1</option>
<option value="2" data-employee="2">Employee2Task2</option>
<option value="3" data-employee="2">Employee2Task3</option>
</select>
Script scetion
<script>
$(document).ready(function () {
//on page ready hide all task option
$("#Tasks").find('option').hide();
// set task as empty
$("#Tasks").val('');
// onchange of employee Drop down
$("#Employees").on('change', function () {
var selectedEmployee = $("#Employees").val();
if (selectedEmployee != '') {
$("#Tasks").find('option').hide();
$("#Tasks option[value='']").show();
$('*[data-employee="' + selectedEmployee + '"]').show();
}
else {
// if employee not selected then hide all tasks
$("#Tasks").find('option').hide();
$("#Tasks").val('');
}
});
});
</script>
Please populate country and state drop down list using MVC way by for each loop and use above script. The mandatory case is you have to render all cascade options
<select class="form-control" id="Employees" name="Employees">
#foreach (var employee in Model.Employees)
{
<option value="#employee.Id"> #employee.name </option>
}
</select>
<select class="form-control" id="Tasks" name="Tasks">
#foreach (var task in Model.Tasks)
{
<option value="#task.Id" data-employee="#task.EmployeeId"> #task.name </option>
}
</select>
I want to show items with indention in html.dropdownlist
this is code in controller
IEnumerable<ViewModels.testvm> test = db.Database.SqlQuery<ViewModels.testvm>(#"WITH tree (id, parentid, level, title, rn) as
(
some code
)
***********SELECT id,REPLICATE(' ',level) + title as title
FROM tree
order by RN");
ViewBag.ParentID = new SelectList(test, "ID", "Title");
as you can see I add   to dropdown items in replecate
but the problem is   shows in dropdown.
this is view > source result:
<select class="form-control" id="ParentID" name="ParentID"><option
value="10">Menu1</option>
<option value="11"> Sub1</option>
<option value="14"> Submenu1</option>
<option value="12">Menu2</option>
<option value="16"> sub2</option>
<option value="13">Menu3</option>
<option value="15"> sub3</option>
<option value="17"> sub sub</option>
<option value="22"> sub3 sub sub</option>
<option value="19">menu4</option>
<option value="20"> sub4</option>
<option value="21">menu5</option>
</select>
as you can see converted to
I tried "\xA0" instead of   but it shows in dropdown too!
I think html.raw can solve this, but I don't know how can I use it with html.dropdownlist.
this is view
<div class="col-md-10">
#Html.DropDownList( "ParentID", null, htmlAttributes: new { #class = "form-
control" })
</div>
any Idea?
Edit
by changing view like this the problem solved:
I tried this after checked a post as answer
<select class="form-control" id="ParentID" name="ParentID">
<option value="0">First Level</option>
#foreach (var item in ViewBag.ParentID)
{
<option value="#item.Value">#Html.Raw(#item.Text)</option>
}
</select>
You can manually create the dropdown list assuming you place your collection in a ViewModel member called ParentIDs:
The View:
#if (Model.ParentIDs.Any())
{
<select class="form-control" id="ParentID" name="ParentID">
#foreach (var item in Model.ParentIDs)
{
if (Model.ParentID == item.id)
{
<option value="#item.id" selected>#item.title</option>
}
else
{
<option value="#item.id">#item.title</option>
}
}
</select>
}
I have a Model that contains basic address information:
public class AddressModel()
{
public string Address1 { get; set; }
public string Address2 { get; set; }
public string City { get; set; }
public string State { get; set; }
public string Zip { get; set; }
}
When passing it into a form in my View, I am placing the values into a textbox, except for the State, which is a dropdown box that is hardcoded to contain the states in America:
<form>
<div class="container-fluid">
<div class="col-md-3">
<div class="form-group">
<!-- First Name -->
<label for="first_name_id" class="control-label">First Name</label>
<input type="text" class="form-control" id="first_name_id" name="first_name" placeholder="First Name" value="#Html.ViewData.Model.Patient.FirstName.First().ToString().ToUpper()#Html.ViewData.Model.FirstName.Substring(1).ToLower()">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<!-- Last Name -->
<label for="last_name_id" class="control-label">Last Name</label>
<input type="text" class="form-control" id="last_name_id" name="last_name" placeholder="Last Name" value="#Html.ViewData.Model.Patient.LastName.First().ToString().ToUpper()#Html.ViewData.Model.LastName.Substring(1).ToLower()">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<!-- Street 1 -->
<label for="street1_id" class="control-label">Street Address 1</label>
<input type="text" class="form-control" id="street1_id" name="street1" placeholder="" value="#Html.ViewData.Patient.BillingAddress1">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<!-- Street 2 -->
<label for="street2_id" class="control-label">Street Address 2</label>
<input style="margin-left: 0px" type="text" class="form-control" id="street2_id" name="street2" placeholder="Apartment, Suite, etc." value="#Html.ViewData.Patient.BillingAddress2">
</div>
</div>
</div>
<div class="container-fluid">
<div class="col-md-4">
<div class="form-group">
<!-- City-->
<label for="city_id" class="control-label">City</label>
<input type="text" class="form-control" id="city_id" name="city" placeholder="" value="#Html.ViewData.Model.BillingCity">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<!-- State Dropdown-->
<label for="state_id" class="control-label">State</label>
<select class="form-control" id="state_id">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<!-- Zip Code-->
<label for="zip_id" class="control-label">Zip Code</label>
<input type="text" class="form-control" id="zip_id" name="zip" placeholder="" value="#Html.ViewData.Model.BillingZip">
</div>
</div>
</div>
</form>
Is there a way to assign the value/option of the drop down in this current format? I can't seem to figure out a way to set the value this way. Do I use the HTML Helper Method for dropdowns, given the list of states? Currently the Value is always set to Alabama.
Each Option element has a "Selected" property, like
<option value="CA" selected="selected">California</option>
You could also set in javascript like
document.getElementById("state_id").value = "CA";
I am not sure what dictates what the default value needs to be. Is there an event, like changing the text in another textbox, or a value available, like a CustomerID, that determines which Option element should be defaulted? Let me know...
In my below mentioned MVC Code there is some MVC Syntax issue. Can please someone assist to fix code issue
If-else block.
<select id="VIPGuests" name="VIPGuests" style="width:200px" abindex="0"><option value="">Select VIP</option>
<% foreach (var authorizedGuest in Model.XYZ)
{ %>
<%if(Model.VIPGuests == authorizedGuest.Key )%>
{
<option selected="selected" value=<% = authorizedGuest.Key%>> <% = authorizedGuest.Value%> </option>
}
else
{
<option value=<% = authorizedGuest.Key%>> <% = authorizedGuest.Value%> </option>
}
<%} %>
</select>
I am getting issue as
Text is not allowed between opening and closing tags of Element
'Select'
Try this. All server side code put with in <% %>.
<select id="VIPGuests" name="VIPGuests" style="width:200px" tabindex="0"><option value="">Select VIP</option>
<% foreach (var authorizedGuest in Model.XYZ)
{
if(Model.VIPGuests == authorizedGuest.Key )
{%>
<option selected="selected" value=<% = authorizedGuest.Key%>> <% = authorizedGuest.Value%> </option>
<% }
else
{ %>
<option value=<% = authorizedGuest.Key%>> <% = authorizedGuest.Value%> </option>
<% }
} %>
</select>
Couldn't test it but something inline with this should work
<select id="VIPGuests" name="VIPGuests" style="width:200px" tabindex="0"><option value="">Select VIP</option>
#{
foreach (var authorizedGuest in Model.XYZ)
if(Model.VIPGuests == authorizedGuest.Key )
#:<option selected="selected" value=“#authorizedGuest.Key”> #authorizedGuest.Value </option>
else
#:<option value=“#authorizedGuest.Key”>#authorizedGuest.Value </option>
}
</select>
I have a view as given below. I have two submit buttons; one for find new car and another for find used car. How can I can get the value of selected dropdown in controller ?
And how can I find out which of the 2 buttons have been pressed by the user?
#{
ViewBag.Title = "Home Page";
}
#using (Html.BeginForm("Home", "home"))
{
<table>
<tr>
<td>
<h2>
Find New car</h2>
<table>
<tr>
<td>
<select id="ddlBrand" name="ddlbrand" style="width: 200px;">
<option value="0">---Select Brand---</option>
<option value="1">---b1---</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="ddlModel" name="ddlModel" style="width: 200px;">
<option value="0">---Select Model---</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="ddlFuelType" name="ddlFuelType" style="width: 200px;">
<option value="0">---Select Fuel Type---</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="ddlBudget" name="ddlBudget" style="width: 200px;">
<option value="0">---Select Your Budget---</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="button" name="FindNewCar" value="GO" />
</td>
</tr>
</table>
</td>
<td>
<h2>
Find used car</h2>
<table>
<tr>
<td>
<table>
<tr>
<td>
<select id="ddlBrand1" name="ddlbrand" style="width: 200px;">
<option value="0">---Select Brand---</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="ddlModel2" name="ddlModel" style="width: 200px;">
<option value="0">---Select Model---</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="ddlFuelType2" name="ddlFuelType" style="width: 200px;">
<option value="0">---Select Fuel Type---</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="ddlCity" name="ddlCity" style="width: 200px;">
<option value="0">---Select City---</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="button" name="FindNewCar" value="GO" />
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<h4>
Sell Car</h4>
<br />
Sell your car faster, at right price ... Sell Car»
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
aaaaaaaaaaa
</td>
</tr>
</table>
}
You should setup two action methods inside of your controller and use the Html.ActionLink method to help create your form.
Example:
public ActionResult FindNewCar(string ddlbrand, string ddlModel, string ddlFuelType, string ddlBudget)
{
// Do something here.
}
public ActionResult FindUsedCar(string ddlbrand2, string ddlModel2, string ddlFuelType2, ddlCity)
{
// Do something here.
}
View
#using (Html.BeginForm("Home", "home"))
{
#Html.ActionLink(...)
}
EDIT
See changes above