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>
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");
So, I have a .cshtml page with a select box, based on the chosen option I want to conditionally render one div or another. Is there a way to do this only utilizing code within the .cshtml and not having to refer back to the controller or model?
<div class="text-center">
<select id="Select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
#if(someOptionFromTheSelect == 1)
{
<div>Render this Div</div>
}
else
{
<div>Render this one</div>
}
</div>
Is there anyway to use the selected option in the conditional statement? I have tried JQuery but I cannot seem to find a way to make that accessible to the C# conditional statement.
You can use if-else in the javascript.
You can refer to my demo:
View:
<div class="text-center">
<select id="Select" onchange="show()">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
<div id="id1">Render this Div</div>
<div id="id2" style="display:none;">Render this one</div>
</div>
#section Scripts
{
<script type="text/javascript">
function show() {
if ($("#Select :selected").val() == "1")
{
$("#id1").show();
$("#id2").hide();
}
else {
$("#id2").show();
$("#id1").hide();
}
}
</script>
}
result:
This post should provide what you need. In short, you’re going to need some JavaScript or to post the info to your controller. You won’t be able to just reference it with Razor directly.
#Html.DropDownListFor(m => m.ProductId, new SelectList(Model.Products, "Id", "ProductName", Model.ProductId), htmlAttributes: new { #class = "form-control", #id = "productsnew" })
The above code out the below line of code
<select name="SelectedCurrency" id="defaultTaxId" class="form-control">
<option value="AUD">AUD</option>
<option value="USD" selected="selected">USD</option>
<option value="NPR">NPR</option>
<option value="INR">INR</option>
</select>
I need a output like this
<select title="Select your surfboard" class="selectpicker">
<option>Select...</option>
<option data-thumbnail="images/icon-chrome.png">Chrome</option>
<option data-thumbnail="images/icon-firefox.png">Firefox</option>
<option data-thumbnail="images/icon-ie.png">IE</option>
<option data-thumbnail="images/icon-opera.png">Opera</option>
<option data-thumbnail="images/icon-safari.png">Safari</option>
</select>
How can I achieve this. Please can anyone tell me
The easyest way for me is this:
I followed this question: SelectListItem with data-attributes
And did some modifications.
<select name="#Html.NameFor(model => model.ClientId)"
id="#Html.NameFor(model => model.ClientId)"
class="form-control selectpicker">
<option value="">-- Select --</option>
#foreach (var client in Model.Clients)
{
#if (client.Id == Model.ClientId) //to select the item in edit mode
{
<option selected
value="#client.Id"
email="#client.Email">
#client.Name
</option>
}
else
{
<option value="#client.Id"
email="#client.Email">
#client.Name
</option>
}
}
</select>
I added this javascript to bind a div on change with new attribute value.
<script>
$(document).ready(function () {
$('.selectpicker').on('change', function (e) {
$("#emailClient").text($('option:selected', this).attr('email')); //load the email address in a div with id 'emailClient'
});
$("#emailClient").text($('option:selected', $('.selectpicker')).attr('email')); //To bind in edit mode
});
</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
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