Weird behaviour happening in my DropDownList Asp.net
My Code:
<asp:DropDownList ID="DDLFromMinutes" runat="server" Width="20%">
<asp:ListItem Text="00" Value="00"></asp:ListItem>
<asp:ListItem Text="15" Value="15"></asp:ListItem>
<asp:ListItem Text="30" Value="30"></asp:ListItem>
<asp:ListItem Text="45" Value="45"></asp:ListItem>
</asp:DropDownList>
However when i run it for example if 15 is the Selected Value i get it Twice in my DropDownList
While Debugging in FireBug get the following:
<select id="ContentPlaceHolder1_DDLFromMinutes" style="width:20%;" name="ctl00$ContentPlaceHolder1$DDLFromMinutes">
<option value="00" selected="selected">30</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
</select>
Code behind:
string Frominput = seprateFromTime[1];
string Frommin = Frominput.Substring(0, 2);
DDLFromMinutes.SelectedItem.Text = Frommin;
if (DDLFromMinutes.Items.Count > 0)
{
DDLFromMinutes.SelectedIndex = DDLFromMinutes.Items.IndexOf(DDLFromMinutes.Items.FindByText(Frommin));
}
While saving the Data is use DDLFromMinutes.SelectedItem.Text Could this be an issue?
You need to use MyDropDown.SelectedValue instead of selectedItem.Text.
Details here: MSDN
do you want to get the value of drop down list? If so, I think you need to change SelectedItem to SeletedValue.
Related
Hi I have dropdown list code I want to add placeholder there how I can add?
<asp:DropDownList id="ddlyear" runat="server" >
<asp:ListItem >Experience</asp:ListItem>
<asp:ListItem>Fresher</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
</asp:DropDownList>
I want to show like this
You can just do this:
<asp:DropDownList id="ddlyear" runat="server" >
<asp:ListItem selected hidden>Experience</asp:ListItem>
<asp:ListItem>Fresher</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
</asp:DropDownList>
The selected makes it the default, while hidden prevents it to be visible on the expanded list.
It's the simplest way possible.
You can't do it on HTML alone, you'd need Html + jQuery to achieve this.
<asp:DropDownList ID="ddlyear" runat="server">
<asp:ListItem>Experience</asp:ListItem>
<asp:ListItem>Fresher</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
</asp:DropDownList>
After this, you need your jQuery to do the magic by removing and re attaching your placeholder.
<script>
var isChanged = false;
$(function () {
$('#ddlyear').focusin(function () {
if (!isChanged) {
// this removes the first item which is your placeholder if it is never changed
$(this).find('option:first').remove();
}
});
$('#ddlyear').change(function () {
// this marks the selection to have changed
isChanged = true;
});
$('#ddlyear').focusout(function () {
if (!isChanged) {
// if the control loses focus and there is no change in selection, return the first item
$(this).prepend('<option selected="selected" value="0">Experience</option>');
}
});
});
</script>
Take note that you need jQuery to use this, just install it as a nuget package or download it manually and add a declaration in your aspx.
<head runat="server">
<title></title>
// Sample only, you can place it in any location or use any version
<script src="../scripts/jquery-2.2.2.min.js"></script>
</head>
#amit
Brother try this....
<select placeholder="select your beverage">
<option value="" default="" selected="">select your beverage</option>
<option value="tea">Tea</option>
<option value="coffee">Coffee</option>
<option value="soda">Soda</option>
</select>
In many cases it would be acceptable to have an empty or dummy item as the first item. 'Empty' means that the value is empty, the text can be anything you want.
So like this:
<asp:DropDownList id="ddlyear" runat="server">
<asp:ListItem Value="">Select</asp:ListItem>
<asp:ListItem Value="Experience">Experience</asp:ListItem>
<asp:ListItem Value="Fresher">Fresher</asp:ListItem>
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
</asp:DropDownList>
I want to make an extend property of control <asp:DropdownList ID="ddlUser" runat="server" />.
Can I create a .SelectedValue property for <select id="selectUser" runat="server" />
so I can use that property in C# so I can use like ddlUser.SelectedValue .
There are some property need to extend in HTML <select runat="server"> control.
selectUser.Value (need to extended with .SelectedValue property)
ddlUser.SelectedValue
You can't do extension properties in C# 3.0 or 4.0.
However, you can do the following
Define a helper class as extension
public static class SelectExtensionHelper
{
public static string SelectedValue(this System.Web.UI.HtmlControls.HtmlSelect select)
{
return select.Items[select.SelectedIndex].ToString();
}
}
while in the ASP page:
<select id="selectUser" runat="server" >
<option id="op1id" value="val1id"> option1 </option>
<option id="op2id" value="val2id"> option2 </option>
<option id="op3id" value="val3id"> option3 </option>
</select>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
PostBackUrl="~/Default.aspx" Text="Button" />
Use this where you need:
Response.Write("The value is:"+ selectUser.SelectedValue() + " Done");
You can use Extension methods instead ;)
I am using an ASP RadioButtonList with ListItem elements inside. I have given each option value. See below as an example:
<asp:RadioButtonList ID="rblTestList" runat="server">
<asp:ListItem Selected="True" Text="Test1" Value="Test1" />
<asp:ListItem Text="Test2" Value="Test2" />
<asp:ListItem Text="Test3" Value="Test3" />
<asp:ListItem Text="Test4" Value="Test4" />
</asp:RadioButtonList>
I am trying to get the value of the selected ListItem. I am using the following line of code to get the value, but all I get is the value 1 (not the text value I gave it). The API says the Value property is of type String, so I see cannot see why it isn't working. (See: ListItem.Value Property)
var option = $('#<%=rblTestList.ClientID %> input[type=radio]:checked').val();
Does anyone know what the issue is here?
Edit: Updated code snippet (old one was wrong)
Use Checkbox On Change Event to Get Value
$('#<%=rblTestList.ClientID%>').on('change',function () {
if($(this).is(':checked')){ //Checks Checked or Not
var Value = $(this).val(); //Here Your Value
}
});
try this
$(function () {
$(".Jqanchor").click(function () {
var option = $('# input[type=radio]:checked').next().text();
alert(option);
});
})
and aspx
<asp:RadioButtonList ID="rblTestList" runat="server">
<asp:ListItem Selected="True" Text="Test1" Value="1" />
<asp:ListItem Text="Test2" Value="2" />
<asp:ListItem Text="Test3" Value="3" />
<asp:ListItem Text="Test4" Value="4" />
</asp:RadioButtonList>
content
Try this
$('document').ready(function () {
$('#<%=rblTestList.ClientID%>').click(function () {
if($(this).is(':checked')){
var selectedValue = $(this).val();
alert(selectedValue);
}
});
});
UPDATE 1:
It's a server side control and here you need to find the input radio control first and check for it's check or uncheck property.
Try this Update
$('document').ready(function () {
$('#<%=rblTestList.ClientID%>').find('input[type=radio]').click(function () {
if($(this).is(':checked')){
var selectedValue = $(this).val().replace('Test','');
alert(selectedValue);
}
});
});
UPDATE 2
if you want the numeic output then you have to put the options value in numeric like Value="1".
The HTML
<asp:RadioButtonList ID="rblTestList" runat="server">
<asp:ListItem Selected="True" Text="Test1" Value="1" />
<asp:ListItem Text="Test2" Value="2" />
<asp:ListItem Text="Test3" Value="3" />
<asp:ListItem Text="Test4" Value="4" />
</asp:RadioButtonList>
The jquery code remains same as in UPDATE 1
It turned out it was related to resource keys. I had initially used numbers and then changed to text but the resource keys were not updated so it always priority over the inline value attribute. I missed out the resource key part in my snippet as I thought it wasn't important. My mistake. Sorry for wasting everyone's time!
How can I get chosen values from select tag after click button? Here I get html select with multiple choose.
selTest.Value returns only first selected item.
<select runat="server" id="selTest" name="selTest" data-placeholder="Choose a Country..." class="chzn-select" style="width:350px;" tabindex="4">
<option value=""></option>
<option value="United States" selected="selected">United States</option>
<option value="Western Sahara">Western Sahara</option>
<option value="Yemen">Yemen</option>
<option value="Zambia" selected="selected">Zambia</option>
<option value="Zimbabwe" selected="selected">Zimbabwe</option>
</select>
<asp:Button ID="testBt" runat="server" OnClick="testBt_Click" Text="ds" />
Code behind:
protected void testBt_Click(object sender, EventArgs e)
{
}
If you use an ASP.NET ListBox proper you can access the Items, strongly-typed, and query:
<asp:ListBox runat="server" id="MyList" SelectionMode="Multiple">
<asp:ListItem Value="-1"></asp:ListItem>
<asp:ListItem Valuealue="United States" Selected="True">United States</asp:ListItem>
<asp:ListItem Valuealue="Western Sahara">Western Sahara</asp:ListItem>
<asp:ListItem Valuealue="Yemen">Yemen</asp:ListItem>
<asp:ListItem Valuealue="Zambia" Selected="True">Zambia</asp:ListItem>
<asp:ListItem Valuealue="Zimbabwe" Selected="True">Zimbabwe</asp:ListItem>
</asp:ListBox>
And then to get the selected items (using Linq):
var selected = MyList.Items.Where(i => i.Selected);
Html:
<asp:ListBox ID="Options" SelectionMode="Multiple" runat="server">
<asp:ListItem Value="option1" >Option #1</asp:ListItem>
<asp:ListItem Value="option2" >Option #2</asp:ListItem>
<asp:ListItem Value="option3" >Option #3</asp:ListItem>
</asp:ListBox>
Code behind:
var options = Options.Items.Cast<ListItem>()
.Where(item => item.Selected)
.Select(item => item.Value)
.ToList();
'options' will be a list of string contains all selected values.
I am having 2 dropdown lists on my page if i select an item the same selected item should be displayed in another drop down list. Can any one give me a javascript for this i need Javascript not Jquery
here is a very simple implementation of what you are describing:
given the html:
<select id="select1">
<option value="foo">foo</option>
<option value="bar">bar</option>
</select>
<select id="select2">
<option value="foo">foo</option>
<option value="bar">bar</option>
</select>
and this javascript:
document.getElementById('select1').onchange = function(e) {
var index = this.selectedIndex;
document.getElementById('select2').options[index].selected = true;
}
you can achieve what you want. note the indexes should be exactly the same in both select boxes (as in the options should be in the same order)
You can attach an onchange event on your dropdown.
Then whenever your selected Index changes, it will fire and call the supplied update method.
For example:
HTML
<asp:DropDownList id="FirstDropdown" onChange="javascript:update();" ...>
JavaScript
<script type="text/javascript">
function update ( ) {
document.getElementById('<%= SecondDropdown.ClientID %>').value =
document.getElementById('<%= FirstDropdown.ClientID %>' ).value;
}
Try this
<asp:DropDownList ID="ddl1" runat="server">
<asp:ListItem Value="1"></asp:ListItem>
<asp:ListItem Value="2"></asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem Value="4"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem></asp:ListItem>
</asp:DropDownList>
<script type="text/javascript">
function MyApp(sender){
var lbMatch = false;
var loDDL2 = document.getElementById('DropDownList1');
for(var i=0; i< loDDL2.length-1; i++){
lbMatch = sender.value==loDDL2.options[i].value;
lsSelected = lbMatch ? "<=SELECTED" : "";
if(lbMatch)
loDDL2.selectedIndex = sender.selectedIndex;
}
}
</script>
In page load event add this
ddl1.Attributes.Add("OnChange", "MyApp(this)");