I am creating a data entry ASP.net form and as the user tabs into a Dropdownlist I want the dropdownlist control to expand without having to click on it. The user can then use the arrow keys and select an item and then tab out and the dropdown can revert to its default view. Is there a way to implement this? I tried using the Dropdown extender on a textbox but it just doesnt work well.
Call this function on onfocus event of drop down.
function expand() {
var dropdown = document.getElementById('ddl');
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
dropdown.dispatchEvent(event);
}
considering your html
<select id="ddl" onfocus="expand()">
<option value="0">Select</option>
<option value="1">AAAA</option>
<option value="2">BBBBB</option>
</select>
Fiddle
Suppose that you have a drop down list called 'ddlTest', so try this:
<script>
function Open() {
var myDropDown = document.getElementById("ddlTest");
var length = myDropDown.options.length;
myDropDown.size = length;
}
function Select(){
var myDropDown = document.getElementById("ddlTest");
myDropDown.size = 1;
var str = myDropDown.options[myDropDown.selectedIndex].value;
alert(str);
}
</script>
<select ID="ddlTest" onfocus="Open()" onfocusout="Select()">
<option>option #1</option>
<option>option #2</option>
<option>option #3</option>
<option>option #4</option>
<option>option #5</option>
<option>option #6</option>
<option>option #7</option>
</select>
Related
I am unfamiliar with select dropdowns and links. If I have:
<select>
<option value="">Select</option>
<option value="/Applications.aspx">Applications</option>
<option value="/EditApplications.aspx">Edit Application</option>
<option value="/AddApplications.aspx">Add Applications</option>
</select>
<button>Go</button>
When the user selects their option, how do I link the button to when the user clicks the button, it goes to the selected page within the dropdown in ASPX? I am sure I need to bind it somehow to the codebehind but I am not sure how to do this.
A very basic solution would be something like the snippet below. On the button click read the value of the select and redirect to that url. Don't forget to add an id to the select. And you need to add type="button" to the button, otherwise it will trigger a form post.
<select id="MySelect">
<option value="">Select</option>
<option value="/Applications.aspx">Applications</option>
<option value="/EditApplications.aspx">Edit Application</option>
<option value="/AddApplications.aspx">Add Applications</option>
</select>
<button type="button" onclick="GoTOUrl()">Go</button>
<script>
function GoTOUrl() {
var url = $('#MySelect').val();
if (url === '')
return;
location.href = url;
}
</script>
No need to wire it up to the code behind. This can all be handled client side with some javascript.
Make the button an actual link. Then update the href attribute and optionally the text.
//Get relevent elements
var linkDropDown = document.getElementById("MySelect");
var link = document.getElementById("Link");
//Wire up event listener to the dropdown
linkDropDown.addEventListener("change", function() {
var defaultVal = this.options[0].value;
//Toggle the inactive class based on selected value
link.classList.toggle("inactive", this.value === defaultVal);
//Set Href
link.href = this.value;
//Set Text using ternary operation
link.text = this.value === defaultVal ? "Go.." : "Go to " + this.options[this.selectedIndex].text;
});
.inactive {
pointer-events: none;
color: grey;
}
<select id="MySelect">
<option value="/">Select</option>
<option value="/Applications.aspx">Applications</option>
<option value="/EditApplications.aspx">Edit Application</option>
<option value="/AddApplications.aspx">Add Applications</option>
</select>
Go..
It is also possible to encapsulate this to automagically work if you have more than set of this on the page.
//Get relevent elements
var dropdowns = document.querySelectorAll(".dropdownSelect");
//Wire up event listeners
for(var i = 0; i < dropdowns.length; i++){
dropdowns[i].addEventListener("change", function(event){
if(event.target.nodeName === "SELECT") {
let sel = event.target;
let link = this.querySelector(".dropdownLink");
let defaultVal = sel.options[0].value;
//Toggle the inactive class based on selected value
link.classList.toggle("inactive", sel.value === defaultVal);
//Set HREF
link.href = sel.value;
//Set Text using ternary operation
link.text = sel.value === defaultVal ? "Go.." : "Go to " + sel.options[sel.selectedIndex].text;
}
})
}
.inactive {
pointer-events: none;
color: grey;
}
<div class="dropdownSelect">
<select>
<option value="/">Select</option>
<option value="/Applications.aspx">Applications</option>
<option value="/EditApplications.aspx">Edit Application</option>
<option value="/AddApplications.aspx">Add Applications</option>
</select>
Go..
</div>
<div class="dropdownSelect">
<select>
<option value="/">Select</option>
<option value="/WebSites.aspx">Web Sites</option>
<option value="/EditWebSites.aspx">Edit Web Sites</option>
<option value="/AddWebSites.aspx">Add Websites</option>
</select>
Go..
</div>
I have a dropdown that gets its items from database. The default value to be selected in this dropdown is retrieved from a cookie.
The problem is,
1. there is an empty option tag as the first option and also,
2. the default value is not selected.
There is no issue at all when I use v1.3.16. This happens when using v1.2.0. (I have to use only v1.2.0)
How to fix this.
ASPX:
<select id="ddlItems" data-ng-model="ItemId">
<option value="-1">-- All Circles --</option>
<option data-ng-repeat="item in Items" value="{{item.AreaCode}}"
data-ng-selected="item.AreaCode==ItemId">{{item.AreaName}}</option>
</select>
Ctrl.js:
var promise = MyFactory.GetItems();
promise.then(function (success) {
if (success.data != null && success.data != '') {
var data = success.data;
$scope.Items = data.lstItems; //bind items to dropdown
$scope.ItemId = itemIdFromCookie; //select default value
alert(itemIdFromCookie); //it pops -1
}
else {
console.log(success.data);
}
}
Rendered HTML:
<select id="ddlItems" data-ng-model="ItemId">
<option value="? string:"-1" ?"></option>
<option value="-1">-- All Circles --</option>
//...other options
</select>
Try to use ngOptions instead
Like this
<select id="ddlItems"
data-ng-model="ItemId"
ng-options="item.AreaCode as item.AreaName for item in Items">
<option value="-1">-- All Circles --</option>
</select>
This happens becausedata-ng-model="ItemId" is empty when your model is App is Loaded.
To Have some initial value. you can put default value in ng-init
For Ex : data-ng-init='data-ng-model="--SELECT--";'
Or per your Array list Item which you are getting from database set one of the values.
Remember init will get triggered b/f you complete the Ajax Call.
Is there any elegant way to create something like this
<select>
<option value="" disabled selected>Select your option</option>
<option value="1">Option1</option>
</select>
using #Html.DropDownListFor helper in ASP.NET MVC 4?
http://jsfiddle.net/wLAt8/
Unfortunately not. There is no way to add attributes to a SelectListItem, which is what gets rendered as an <option>.
You would need to extend the SelectListItem class, and then extend the DropDownListFor to use it. It is unfortunately not very straightforward... It would have been nice for there to be an Attributes dictionary on SelectListItem for this purpose.
Here is an implementation of a custom attribute being applied:
Adding html class tag under <option> in Html.DropDownList
Here's one way you could do it using tag helpers.
<select asp-for="#Model.Orders.FruitsId" class="form-control">
<option value="">Select a Fruit</option>
#foreach (var Fruit in Model.Fruits )
{
if (barber.Name.Equals("Orange"))
{
<option disabled="disabled" value="#Fruit.Id">#Fruit.Name </option>
}
else
{
<option value="#Fruit.Id">#Fruit.Name </option>
}
}
</select>
After struggling I've done this via js function:
function handleSubAction(select) {
var item = document.getElementById(select);
item.children[0].disabled = true;
item.children[0].hidden= true;
return false;
}
and event handler in HTML:
<body onload="handleSubAction('subAction');"/>
I have Bootstrap Multi-select dropdown and the code is:
<select class="multiselect" multiple="multiple">
<option value="one">test value for one</option>
<option value="two">test value for two</option>
<option value="three">test value for three</option>
<option value="four">test value for four</option>
</select>
whenever i select from 1 to 3 its showing the selected value. After selecting the fourth checkbox in dropdown it start displaying "4 Selected". the problem is i need to fix the width of the dropdown, so that if i select one, i need to display 1 Selected instead of the first checkbox value. How can i achieve that.
Tried this also but i didnt find what exactly i need. http://davidstutz.github.io/bootstrap-multiselect/
Thanks in advance.
If you are using http://davidstutz.github.io/bootstrap-multiselect/ then try following code...
DEMO LINK
JS:
$('#example').multiselect({
buttonWidth: '500px',
buttonText: function (options) {
if (options.length == 0) {
return 'None selected <b class="caret"></b>';
} else {
var selected = 0;
options.each(function () {
selected += 1;
});
return selected + ' Selected <b class="caret"></b>';
}
}
});
HTML:
<select id="example" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
I currently have a drop down navigation that opens a modal lightbox window.
I would like to not open the the window if there in an option with no URL selected which is the first default option.
I have tried a number of techniques such as:
- returning false on the onsubmit event of the form.
- Attempting to bind a click event to the goURL a href link using jQuery that would then either
1) call event.preventDefault or 2)stop propagation events.
- coding an onclick event to the goURL a href link.
Below is the html code
<h3>Request a <span>Quote</span></h3>
<form action="#">
<div class="select">
<select id="URL" name="URL" onchange="$('#goLink').attr('href', $('#URL').val());">
<option value="">- Choose a Link -</option>
<option value="/node/1/lightbox2">Link 1</option>
<option value="/node/2/lightbox2">Link 2</option>
<option value="/node/3/lightbox2">Link 3</option>
<option value="/node/4/lightbox2">Link 4</option>
<option class="last" value="/node/5/lightbox2">Link 5</option>
</select>
</div>
</form>
GO
You have to remove the rel attribute if you need a simple link without lightbox effect. The href attribute does not affect it.
Here is a sample of a jQuery code (not necessary the perfect one but just as an example):
$("#url").change(function(){
var selected = $('url :selected'), // Get the selected option
selectedVal = selected.val(); // Get the selected option value
if (selectedValue == "") {
$('#goLink').removeAttr('rel'); // Remove the rel if the value is empty
} else {
$("#goLink").attr('href',selectedVal).attr('rel','lightframe'); // Add rel=lightframe attribute and the href
}
});