Is it possible to create a dropdown box in ASP.NET MVC, that has a checkbox alongside each item in the dropdown list?
I know it sounds simple, in webforms or using telerik this would be pretty simple, but I can't figure how I can implement the same thing in basic HTML.
Thanks
You can use a jQuery plugin called DropDownCheckList to get the wanted effect of a dropdownlist with multiselect options.
Its pretty easy, all you need to do is to create a html listbox and call the jQuery plugion to extend the listbox.
<script type="text/javascript">
$(document).ready(function() {
$("#listbox").dropdownchecklist();
}
</script>
<select id="listbox" multiple="multiple">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html
a dropdown with each element of the dropdown having a checkbox? that's not a standard element of HTML, why would you even need that? a multiple option is what you need:
http://www.htmlcodetutorial.com/forms/_SELECT_MULTIPLE.html (first one)
Related
I have a Kendo DropDownList on an Angular MVC project. Chrome (Version 40.0.2214.111 m) and IE10 renders it as 2 elements side-by-side. This issue remains with all Kendo elements with 2 HTML elements, such as NumericTextBoxs. Is this a bug? Is there a fix for it?
This is how the HTML looks:
This is how I declare the drop down list
<div class="col-md-3">
<h4>Name: </h4>
<select kendo-drop-down-list style="width: 200px">
<option>Name 1</option>
<option>Name 2</option>
<option>Name 3</option>
<option>Name 4</option>
</select>
</div>
Just inspect element by browser and see affected css rules to your page elements. You may wanna change some of them to work with each other.
I am using jQuery UI MultiSelect Widget. I want my list to have 5 options and the first one("Please Choose") to be selected by default, however I want only the last four options as to be visible and selectable from the users when the list is unfolded.Any good idea how to do that?
Thank you
You must have checked the documentation of that plugin, it has everything to customize it in all possible manner. Check out below sample code:
HTML
<select name="gender" id="gender" multiple="multiple">
<option value="MAN">MAN</option>
<option value="WOMAN">WOMAN</option>
</select>
Script
$(document).ready(function(){
$("select").multiselect({
noneSelectedText: 'Choose Options'
});
});
Fiddle
I'm trying to use custom data attributes of HTML in Struts2 tags
here is my sample code
<s:select list="myList" listKey="myListVal" listValue="myListDesc" data-inputs="myListInput" ></s:select>
i was expecting something like this for example
<select >
<option value="myListVal1" data-inputs="myListInput1">myListDesc1</option>
<option value="myListVal2" data-inputs="myListInput2">myListDesc2</option>
<option value="myListVal3" data-inputs="myListInput3">myListDesc3</option>
</select>
instead I'm getting this
<select data-inputs="myListInput" >
<option value="myListVal1" >myListDesc1</option>
<option value="myListVal2" >myListDesc2</option>
<option value="myListVal3" >myListDesc3</option>
</select>
Is it possible to describe data-attribute in struts select tags for Options inside it.
Override the <s:select> tag template. Or just use HTML tags with <s:iterator>
<select name="list">
<s:iterator value="myList" status="stat">
<option value="<s:property value="myListVal"/>" data-inputs="myListInput<s:property value="#stat.index"/>"><s:property value="myListDesc"/></option>
</s:iterator>
</select>
You can't inject custom attributes into a Struts2 UI Tag directly.
According to Dave Newton's comment, you can with Struts2 >= 2.1.x
But still it's not possible to apply them to the option elements instead of the select, so I'll leave the answer in case you need to extend the original select tag to define a custom behaviour (like apply certain attributes to the options).
You can extend the <s:select> Struts2 tag to allow it to manage new kind of attributes...: http://bodez.wordpress.com/2009/03/13/customising-struts2-jsp-tags/
,
or create your own tag directly, but in your case would be overkill: http://joshuajava.wordpress.com/2008/12/27/creating-custom-components-with-struts-2/).
Last but not least, you could even add your custom attributes once the page is rendered, using something like jQuery (demo: http://jsfiddle.net/CLNDs/ ); they will be accessible, but not visible in source.
I'm using jquery ui controls, and jquery validation plugin.
let's say I want to add a required class on a combobox.
The element is dynamically generated with a generic code.
Where can I add the class ?
I just need to select the next brother with the proper classes:
$('#someSelect ~ .ui-autocomplete-input').addClass('bla');
You can add this html to your view. Or take out the script tags and add this to your js file for that page. In the case below I am adding two classes to the combobox.
This combo box:
<select id="cbCars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
This is the JQuery wrapped in a html script tag:
<script type="text/javascript">
$(function () {
$("#cbCars").addClass("ui-state-active ui-corner-top");
});
</script>
Is there a good way to make an HTML dropdown read only. Using disabled attribute of select seems to work, but the value is not posted.
<select disabled="disabled">
I have a complex page with lots of javascript and ajax. Some actions in the form cause to drop down to be read only some actions let user decide the value.
Edit: Is there a better way other than using a hidden input?
If you do not want user to pick an option, how is this different from read-only input type="text"?
<select name="selectbox" disabled="disabled">
<option>option 1</option>
<option selected="selected">option 2</option>
<option>option 3</option>
</select>
Correct me if I am wrong, but if an option is selected, the value is sent