I have a requirement to populate 2 drop down list with hours and minutes. My current method of populating the drop downs doesn't format the numbers correctly as I require the leading 0 for the first 9 number i.e 01,02,03 not 1,2,3 as is currently happening.
C#
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
if (!IsPostBack)
{
// Populate and Bind Time drop downs
ddlOh1OpenHours.DataSource = Enumerable.Range(00, 24);
ddlOh1OpenHours.DataBind();
ddlOh1OpenMinutes.DataSource = Enumerable.Range(00, 60);
ddlOh1OpenMinutes.DataBind();
}
}
ASPX
<asp:DropDownList ID="ddlOh1OpenHours" runat="server" />
<span>:</span>
<asp:DropDownList ID="ddlOh1OpenMinutes" runat="server" />
Result:
<select name="ctl00$MainContent$ddlOh1OpenHours" id="ctl00_MainContent_ddlOh1OpenHours">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
Just use ToString with the proper format:
var hours = Enumerable.Range(00, 24).Select(i => i.ToString("D2"));
var minutes = Enumerable.Range(00, 60).Select(i => i.ToString("D2"));
dlOh1OpenHours.DataSource = hours;
ddlOh1OpenHours.DataBind();
ddlOh1OpenMinutes.DataSource = minutes;
ddlOh1OpenMinutes.DataBind();
> Demo <
Standard Numeric Format Strings
Related
I am trying to select an option within a dropdown. I cannot select with value.
How can I select state with value like CA, FL, TX,...
new SelectElement(chromedriver.FindElement(By.XPath("//select[#id='state']"))).SelectByValue("CA");
My code looks as follow:
<div tabindex="0" aria-label="State, This field is required." aria-invalid="This field is required." aria-required="true" alt="State, This field is required." data-talos="dropdownShippingState" class="field-wrapper-item error">
<label>State</label>
<div class="field-wrapper-children">
<input type="hidden" name="state" value="">
<div class="drop-down-selected" data-talos="dropdownShippingState"><i class="icon icon-drop-down" role="presentation"></i>
</div><span></span>
<div class="select-wrapper">
<label class="label-state" for="state">state</label>
<select name="state" id="state" autocomplete="shipping address-level1" class="hidden" tabindex="-1">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="AA">Armed Forces Americas (AA)</option>
<option value="AE">Armed Forces Europe (AE)</option>
<option value="AP">Armed Forces Pacific (AP)</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="TX">Texas</option>
<option value="VI">U.S. Virgin Islands</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>
I am using selenium with C#
Thanks!
Try this:
using OpenQA.Selenium.Support.UI;
var element = chromedriver.FindElement(By.XPath("//select[#id='state']"));
var selectElement = new SelectElement(element);
selectElement.SelectByValue("CA");
I have a drop-down in asp.net core with country name and code. i need, when i select a drop-down value than it should be set a only code in drop-down. I have a screenshot you can see that,
screen Shot
now i have a second screen shot i want to like this drop-down after select value.
second Screen Shot
my view drop-down code is
<select class="form-control" id="countryDropdown" >
#foreach (var country in Model)
{
<option value="#country.id"
data-code="#country.codeName">
#country.Name
</option>
}
</select>
html dropdown is
<select class="form-control" id="countryDropdown">
<option value="3" data-code="93">
Afghanistan (93)
</option>
<option value="264" data-code="">
Åland Islands ()
</option>
<option value="4" data-code="355">
Albania (355)
</option>
<option value="5" data-code="213">
Algeria (213)
</option>
<option value="6" data-code="1">
American Samoa (1)
</option>
<option value="7" data-code="376">
Andorra (376)
</option>
<option value="8" data-code="244">
Angola (244)
</option>
<option value="9" data-code="1">
Anguilla (1)
</option>
<option value="266" data-code="">
Anonymous Proxy ()
</option>
<option value="10" data-code="672">
Antarctica (672)
</option>
<option value="11" data-code="1">
Antigua and Barbuda (1)
</option>
<option value="12" data-code="54">
Argentina (54)
</option>
<option value="13" data-code="374">
Armenia (374)
</option>
<option value="14" data-code="297">
Aruba (297)
</option>
<option value="268" data-code="">
Asia/Pacific Region ()
</option>
</select>
In this solution, we're wrapping the Country text inside a span tag. Whenever we click on the dropdown, this would fill the span tag with Country property. When you're done choosing an option, this would empty the span tag.
Add this to your script;
$(document).ready(function() {
$("#countryDropdown").find("option").each(function() {
var codeIndex = $(this).text().indexOf("(");
var country = $(this).text().substring(0, codeIndex);
var code = $(this).text().substring(codeIndex);
$(this).html("<span class='select-hide' data-country='" + country + "'></span>" + code);
});
$("#countryDropdown").focus(function() {
$(this).find(".select-hide").each(function() {
$(this).text($(this).data("country"));
});
});
$("#countryDropdown").change(function() {
$(this).blur();
});
$("#countryDropdown").blur(function() {
$(this).find(".select-hide").each(function() {
$(this).text("");
});
});
});
Demo below;
$(document).ready(function() {
$("#countryDropdown").find("option").each(function() {
var codeIndex = $(this).text().indexOf("(");
var country = $(this).text().substring(0, codeIndex);
var code = $(this).text().substring(codeIndex);
$(this).html("<span class='select-hide' data-country='" + country + "'></span>" + code);
});
$("#countryDropdown").focus(function() {
$(this).find(".select-hide").each(function() {
$(this).text($(this).data("country"));
});
});
$("#countryDropdown").change(function() {
$(this).blur();
});
$("#countryDropdown").blur(function() {
$(this).find(".select-hide").each(function() {
$(this).text("");
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="countryDropdown">
<option value="3" data-code="93">
Afghanistan (93)
</option>
<option value="264" data-code="">
Åland Islands ()
</option>
<option value="4" data-code="355">
Albania (355)
</option>
<option value="5" data-code="213">
Algeria (213)
</option>
<option value="6" data-code="1">
American Samoa (1)
</option>
<option value="7" data-code="376">
Andorra (376)
</option>
<option value="8" data-code="244">
Angola (244)
</option>
<option value="9" data-code="1">
Anguilla (1)
</option>
<option value="266" data-code="">
Anonymous Proxy ()
</option>
<option value="10" data-code="672">
Antarctica (672)
</option>
<option value="11" data-code="1">
Antigua and Barbuda (1)
</option>
<option value="12" data-code="54">
Argentina (54)
</option>
<option value="13" data-code="374">
Armenia (374)
</option>
<option value="14" data-code="297">
Aruba (297)
</option>
<option value="268" data-code="">
Asia/Pacific Region ()
</option>
</select>
can you please try this.
This very simple and easy to understand and faster.
Please check this link JsFiddle
Note: please uncomment the console.log for more detail.
and You can modify this code as per your requirement here I'm sowing the current data-code display in the dropdown option.
$(document).ready(function() {
$("#countryDropdown option:first").text($("#countryDropdown option:first").data("code"));
$("#countryDropdown").change(function(event)
{
var oCurrentOption =this.options[event.target.selectedIndex];
$("#countryDropdown option[value="+oCurrentOption.value+"]").text($(oCurrentOption).data("code"));
//console.log(oCurrentOption);
//console.log("Data Code "+$(oCurrentOption).data("code"));
//console.log("Current Text "+oCurrentOption.text);
//console.log("Current Value "+oCurrentOption.value);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="countryDropdown">
<option value="3" data-code="93">
Afghanistan (93)
</option>
<option value="264" data-code="">
Åland Islands ()
</option>
<option value="4" data-code="355">
Albania (355)
</option>
<option value="5" data-code="213">
Algeria (213)
</option>
<option value="6" data-code="1">
American Samoa (1)
</option>
<option value="7" data-code="376">
Andorra (376)
</option>
<option value="8" data-code="244">
Angola (244)
</option>
<option value="9" data-code="1">
Anguilla (1)
</option>
<option value="266" data-code="">
Anonymous Proxy ()
</option>
<option value="10" data-code="672">
Antarctica (672)
</option>
<option value="11" data-code="1">
Antigua and Barbuda (1)
</option>
<option value="12" data-code="54">
Argentina (54)
</option>
<option value="13" data-code="374">
Armenia (374)
</option>
<option value="14" data-code="297">
Aruba (297)
</option>
<option value="268" data-code="">
Asia/Pacific Region ()
</option>
</select>
I would like to know, how can i make 2 connected dropdowns (not cascade).
The point:
I have a list:
List<SelectListItem> harmingFactorsList = new List<SelectListItem>();
using (var db = new MyEntities())
{
foreach (var item in db.CatalogHarmingFactors)
{
harmingFactorsList.Add(new SelectListItem { Value = item.Nr, Text = item.Description});
}
}
The 1st dropdown have to show Nr field and the 2nd corresponding Description field. So, if user will change 1st dropdown, the value in the 2nd dropdown must be changed automatically and vice versa. The goal is to make them both have the same item selected, ever.
I have no idea how to make it works. Can it be made with Html helper or do i have to use Javascript and switch them onchange?
I think that this is what you're trying to achieve via Javascript. You can edit this how you please, but it gets the job done.
Simple Example:
HTML:
<select id="FirstName">
<option>-- Select --</option>
<option value="John">John</option>
<option value="Abraham">Abraham</option>
<option value="George">George</option>
</select>
<select id="LastName">
<option>-- Select --</option>
<option value="Doe">Doe</option>
<option value="Lincoln">Lincoln</option>
<option value="Washington">Washington</option>
</select>
JavaScript/jQuery:
$("#FirstName").change(function(){
if(this.value === "John"){
$("#LastName").val("Doe")
};
if(this.value === "Abraham"){
$("#LastName").val("Lincoln")
};
if(this.value === "George"){
$("#LastName").val("Washington")
};
});
$("#LastName").change(function(){
if(this.value === "Doe"){
$("#FirstName").val("John")
};
if(this.value === "Lincoln"){
$("#FirstName").val("Abraham")
};
if(this.value === "Washington"){
$("#FirstName").val("George")
};
});
Here is a JSFiddle.
Hope this helps!
i thing this helpful..
pure java script
<select id="drp1">
<option value="val1">Text 1</option>
<option value="val2">Text 2</option>
<option value="val3">Text 3</option>
<option value="val4">Text 4</option>
</select>
<select id="drp2">
<option value="val1">Text 1</option>
<option value="val2">Text 2</option>
<option value="val3">Text 3</option>
<option value="val4">Text 4</option>
</select>
<script type="text/javascript">
var drp1 = document.getElementById("drp1");
var drp2 = document.getElementById("drp2");
drp1.onchange = function () {
fixValues(drp1, drp2);
};
drp2.onchange = function () {
fixValues(drp2, drp1);
}
var fixValues = function (drpFrom, drpTo) {
var val = drpFrom.options[drpFrom.selectedIndex].value;
for (i = 0; i < drpTo.options.length; i++) {
if (val == drpTo.options[i].value) {
drpTo.selectedIndex = i;
}
}
}
</script>
jqyery
<select id="drp3">
<option value="val1">Text 1</option>
<option value="val2">Text 2</option>
<option value="val3">Text 3</option>
<option value="val4">Text 4</option>
</select>
<select id="drp4">
<option value="val1">Text 1</option>
<option value="val2">Text 2</option>
<option value="val3">Text 3</option>
<option value="val4">Text 4</option>
</select>
<script type="text/javascript">
$(function () {
$("#drp3").change(function () {
$("#drp4").val($(this).val());
})
$("#drp4").change(function () {
$("#drp3").val($(this).val());
})
});
</script>
How can I make populate the second combobox using webbrowser? I can choose the first option of the first combo box, but it does not enable the second listing. Already I researched the html code and I found no javascript or ajax function.
The following html code:
<select aria-required='true' class='form-field form-field-select form-field-medium' id='state' name='state'>
<option value='0'>Selecione</option>
<option value='25'>Acre</option>
<option value='16'>Alagoas</option>
<option value='26'>Amapá</option>
<option value='15'>Amazonas</option>
<option value='4'>Bahia</option>
<option value='8'>Ceará</option>
<option value='20'>Distrito Federal</option>
<option value='14'>Espírito Santo</option>
<option value='12'>Goiás</option>
<option value='10'>Maranhão</option>
<option value='19'>Mato Grosso</option>
<option value='21'>Mato Grosso do Sul</option>
<option value='2'>Minas Gerais</option>
<option value='9'>Pará</option>
<option value='13'>Paraíba</option>
<option value='6'>Paraná</option>
<option value='7'>Pernambuco</option>
<option value='17'>Piauí</option>
<option value='3'>Rio de Janeiro</option>
<option value='18'>Rio Grande do Norte</option>
<option value='5'>Rio Grande do Sul</option>
<option value='23'>Rondônia</option>
<option value='27'>Roraima</option>
<option value='11'>Santa Catarina</option>
<option value='1'>São Paulo</option>
<option value='22'>Sergipe</option>
<option value='24'>Tocantins</option>
</select>
The second drop-down code
<select aria-required="true" class="form-field form-field-select form-field-medium" id="region" name="region">
<option value="">Selecione</option>
<option value="11">DDD 11 - São Paulo e região</option>
<option value="12">DDD 12 - V. do Paraíba e Litoral Norte</option>
<option value="13">DDD 13 - Baixada Santista e Litoral Sul</option>
<option value="14">DDD 14 - Bauru, Marília e região</option>
<option value="15">DDD 15 - Sorocaba e região</option>
<option value="16">DDD 16 - Ribeirão Preto e região</option>
<option value="17">DDD 17 - S. José do Rio Preto e região</option>
<option value="18">DDD 18 - Presidente Prudente e região</option>
<option value="19">DDD 19 - Grande Campinas</option>
</select>
With this code I can not select the first dropdown but it does not enable me to select the second.
foreach (HtmlElement el in webBrowser1.Document.GetElementsByTagName("select"))
{
if (el.Name == "state")
{
foreach (HtmlElement comboItem in el.Children)
{
Console.WriteLine(comboItem.InnerText + " " + comboItem.GetAttribute("Selected"));
if (comboItem.InnerText == "São Paulo")
{
comboItem.SetAttribute("selected", "true");
SendKeys.Send("\t");
}
}
}
//SendKeys.Send("+{Tab}");
//SendKeys.Send("{ENTER}");
}
Who wants to see the page the link is LINK
In my ASP.NET MVC app, I have a ViewModel property called "Date" which is of the format "5/18/2012 2:43:45 PM". I would like to split this into separate controls on the UI.
jQuery UI - Datepicker would show the date - DONE
Show three dropdowns next to the Datepicker that display hour,minutes and am/pm.
I've added the three dropdowns to the UI but I am having difficulty understanding how to set those values based on what is being returned by the "Date" property of the ViewModel? In other words how do I split the Date and display it on the three dropdowns?
EDIT: Here is the View:
<div>
<%= Html.TextBoxFor(c => c.Scheduled, new { #Value = Model.Scheduled.Value.ToShortDateString(), #class = "datetime", style = "width:150px;" })%>
<ol class="align">
<li class="align" >
<select name="hour" >
<option value="1">1 </option>
<option value="2">2 </option>
<option value="3">3 </option>
<option value="4">4 </option>
<option value="5">5 </option>
<option value="6" >6 </option>
<option value="7">7 </option>
<option value="8">8 </option>
<option value="9">9 </option>
<option value="10">10 </option>
<option value="11">11 </option>
<option value="12">12 </option>
</select></li>
</ol>
</div>
If the "Date" property is of the correct type (DateTime) you should be able to call Date.Hour, Date.Minute, and use Date.ToString("tt") to get am/pm.
Assuming MVC3 with razor....
<div id="time">
Hour:<br/>
<input type="text" value="#Model.Date.Hour" /><br/>
Minute:<br/>
<input type="text" value="#Model.Date.Minute" /><br/>
AM/PM:<br/>
<input type="text" value="#Model.Date.ToString("tt").ToLower()" />
</div>