I have the following ASP:DropDownList on my aspx page:
<label>OT Code No.</label>
<asp:DropDownList runat="server" ID="ddlOvertimeCode" class="form-control" TabIndex="1"></asp:DropDownList>
Which renders as the following in HTML:
<select name="ctl00$MainContentPlaceHolder$ddlOvertimeCode" id="MainContentPlaceHolder_ddlOvertimeCode" tabindex="1" class="form-control">
<option selected="selected" value="0">-Select-</option>
<option value="1">1 - 10B PLES</option>
<option value="2">2 - Investigation</option>
<option value="3">3 - Arrest</option>
<option value="4">4 - Misc</option>
<option value="5">5 - EWW</option>
<option value="6">6 - Holiday</option>
<option value="7">7 - In-Lieu Holiday</option>
</select>
When submitted the form, I disable the DropDownList using the following code in my .cs file
ddlOvertimeCode.Attributes.Add("disabled", null);
I tried other methods of disabling the dropdownlist, however all of them would either override the bootstrap styling of the list or leave the dropdownlist able to be changed despite being grayed-out and ReadOnly. Adding the disabled attribute is the only way I could find to gray-out the box while leaving it's styling intact.
the problem arrises when the user withdraws the form, making it editable again, and the code re-enables the dropdownlist using the same method:
ddlOvertimeCode.Attributes.Remove("disabled");
removing the disabled attribute resets the dropdownlist and leaves me unable to alter DropDownList.SelectedValue from the codebehind.
I need a method of graying out the DropDownList and disabling it from the codebehind without overriding the bootstrap styling, and then returning it to an editable state, all while preserving the original selected value.
check if AutoPostBack="True"
code
thanx
Related
I have a select dropdown menu containing a list of states. I have restricted the visible options after clicking the dropdown via this stackoverflow solution as can be seen in my code below:
<div>
<label asp-for="Venture.Location" class="form-label">Venture Location</label>
<select asp-for="Venture.Location" class="form-input form-select" required onmousedown="this.size=9" onblur="this.size=0" onchange="this.size=0">
<option disabled selected value="">select an option</option>
#foreach(var location in Model.Locations)
{
<option value="location">#location</option>
}
</select>
</div>
However, clicking the dropdown, I will see a cuttoff option thus showing more than 9 options. How can I make sure to only show the correct amount of options via the size? How can I get rid of the cutoff option?
The problem (as it has been written inside of one of the comments of the answers you copied code from is that this crashes from IE11).
You can simply fix this with size attribute onto select tag:
<select id="vehicles" size="2" >
<option value="Location1">Location1</option>
<option value="Location2">Location2</option>
<option value="Location3">Location3</option>
</select>
This will result in showing only Location1 and Location2
The answer to this is that the padding on the select element was causing the issue. I have removed padding once the mousedown event has occured.
Try to use in css
.form-input {
margin: 10px 0px;
padding: 15px;
overflow: auto; /* This option can helpyou!*/
}
I am trying to create a multiple choice select field in my .cshtml file that looks like this:
<select multiple="multiple" id="select-multiple" style="width:500px" name="MultipleSelect">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
I have a model that has a List<string> MultipleSelect that maps perfectly when i save my model. all the selected values get to the controller and are saved in the database. But when the page reloads the values don't show. I checked with the debuger and the MultipleSelect list gets filled with the values before the view gets loaded.
Should I use a diferent type for my MultipleSelect value or is this just not the right way to do this?
This code displays a list box with "no" default selection because the default value is hidden.Once the user makes a selection, he cannot set it back to a "no select" state.
Is there a clean way to use an existing MVC helper to build such a list or do I need to write one?
I'm new to MVC and I see various approaches for creating Helper classes. I tend to prefer where everything is done with objects rather than raw string concatenation and I haven't yet figure out a nice approach for handling this case and other special cases, like conditionally enabling/disabling the control, etc, all wrapped up in one nice helper.
<!DOCTYPE html>
<html>
<body>
<select>
<option selected disabled hidden style='display: none' value=''></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
Html code/example of dropdown:
<select class="ng-valid ng-dirty ng-touched" style="max-width: 235px" ng-model="blogerj" ng-options="blogerj.long_name for blogerj in blogerj track by blogerj.id">
<option class="" value="">[Choose...]</option>
<option label="label 1" value="1">Text Content 1</option>
<option label="label 2" value="2">Text Content 2</option>
<option label="label 3" value="3">Text Content 3</option>
<option label="label 4" value="4">Text Content 4</option>
</select>
If I just set attribute making it selected then it dont work because button for submit appears only when element is selected.
I also tried just to click element to open dropdown and then again click desired option but again it gave me no results.
foreach (GeckoHtmlElement geckoHtmlElement in gwBrowser.Document.GetElementsByTagName("select"))
{
if (geckoHtmlElement.GetAttribute("class") == "ng-valid ng-dirty ng-touched")
{
geckoHtmlElement.Click();
}
}
Actually it finds element but clicking dont do anything.
So maybe there is any fancy js method to select that dropdown?
From the portion class="ng-valid ng-dirty ng-touched" it looks like there is AngularJS at work here - because angular usually uses the prefix ng-. Angular can intercept user actions and take control of how your web page controls behave.
Html code:
<span id="syi-attribute-1277" class="dropdown l-stretchable-fixed native" tabindex="7146">
<input type="hidden" value="" name="attribute[1277]"></input>
<span class="label" style=""></span>
<span class="pointer"></span>
<select class="item-frame" size="1" style="height: 30px; width: 264px;">
<option class="item" value=""></option>
<option class="item" value="7146"></option>
<option class="item" value="7147"></option>
<option class="item" value="7148"></option>
</select>
What I'd like to do is the webbrowser control in my form (using WinForms) be able to select the third option of this drop down selection list (with the value of 7148). What I've tried so far:
doc.GetElementById("syi-attribute-1277").Children.GetElementsByName("option")[0].SetAttribute("value", "7148");
^ makes the most sense, though sadly it gives me this error: Additional information: Value of '0' is not valid for 'index'. 'index' should be between 0 and -1.
Code:
doc.GetElementById("syi-attribute-1277").SetAttribute("tabindex", "7148");
^ Nothing happens.
Any clue's? Thanks. :-)
GetElementsByName looks for a matching name (or id) attribute, not the element name.
Your also trying to set the value attribute on the option, you need to use the select if you want to set the value:
doc.GetElementById("syi-attribute-1277").GetElementsByTagName("select")[0].SetAttribute("value", "7148");