I have implemented the following multiselect into my project.
http://loudev.com/
And I have done everything as I should (as far as I know) the layout is looking as it should, the css and javascript is running but when i hover over an option, it isn't clickable, it treats it as a line of text, not a clickable object.
Here is the code for the select input and where it is initialised in javascript.
<select multiple="multiple" class="form-control" id="my-select" name="my-select[]">
<option value="elem_1">elem 1</option>
<option value="elem_2">elem 2</option>
<option value="elem_3">elem 3</option>
<option value="elem_4">elem 4</option>
<option value="elem_100">elem 100</option>
</select>
$('#my-select').multiSelect();
Related
I have a multi-select drop down as following, where I have selected the multiple options.
<select class="select2 mysql_attr" id="mysql_attr" name="mysql_attr[]" title="Student " multiple >
<option value="0"> All</option>
<option value="1">Sub 1</option>
<option value="2">Sub 2</option>
<option value="3">Sub 3</option>
<option value="4">Sub 4</option>
</select>
I have a first option called "All". When this option is clicked i want all selected items should be deselected except this and if other options click this option should be deselect.
I Search a lot but din't find anything.
How can I accomplish this using Materialize?
I have a dropdown list. When user click on the drop down list, I need to show first 4 items in the list and the scroll bar so that users can scroll and see the remaining items in the list.
Please find the dropdown list sample fiddle below. The same way as shown in fiddle when user click on the dropdown list, Option 1, Option 2, Option 3, Option 4 should be shown with the scrollbar to scroll and see remaining options in the list.
<select>
<option value="one">Option 1</option>
<option value="two">Option 2</option>
<option value="three">Option 3</option>
<option value="four">Option 4</option>
<option value="five">Option 5</option>
<option value="siz">Option 6</option>
<option value="seven">Option 7</option>
<option value="eight">Option 8</option>
</select>
---EDITED---
The above code is not working in IE.
In IE it's showing the scrollar but when i select the item from the dropdown list, an alert box is displayed with error message and i cannot select any date from the dropdown list. I tried to debug and see if any errors using developer tools, but there are no errors shown.
Internet Explorer has stopped working A problem caused the progrm to stop working correctly.Please close the program.
You can use onmousedown to dynamically expand the select list on click and onchange/onblur event handlers to go back:
<select onmousedown="if (this.options.length > 4) this.size = 4;" onchange="this.size = 0;" onblur="this.size = 0;">
<option value="one">Option 1</option>
<option value="two">Option 2</option>
<option value="three">Option 3</option>
<option value="four">Option 4</option>
<option value="five">Option 5</option>
<option value="siz">Option 6</option>
<option value="seven">Option 7</option>
<option value="eight">Option 8</option>
</select>
Situation:
I have an option list like
<select class="database-column-name" name="caseid">
<option value="1">1</option>
<option value="2">1</option>
<option value="3">1</option>
</select>
and by default there is no option selected, but when you select an option you can't go back to selecting none again! This messes up the user experience of my page because I need the user to be able to selected no option at all.
Question:
Is there a hack to get around this?
Is as simple as this
<select class="database-column-name" name="caseid">
<option value=" ">--Select--</option>
<option value="1">1</option>
<option value="2">1</option>
<option value="3">1</option>
</select>
$("select.database-column-name option").prop("selected", false);
You could have a "clear selection" button or something fire this code.
The preceding answer is a really good choice. The only recommendation that I would add to it is to make the value for the first item a "0"(zero), which allows your post-processing code to look for a specific value to ensure "no selection". Granted, you can look for " ", but that's easy to confuse with "".
<select class="database-column-name" name="caseid">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">1</option>
<option value="3">1</option>
If you want to have an actual blank show, rather than a phrase like "--Select--" then simply replace the "--Select--" text with a space.
<html>
<body>
<select class="database-column-name" name="caseid">
<option value="0"> </option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
The "value" portion is not displayed and is present to simplify code-based analysis of the selected option. In this case, a value of "0" would mean that no option has been selected.
I want to disable click to select value in select box. I use event.preventDefault but it not working. Help me.
Use disabled attribute
<select disabled="true">
<option value="1">test data 1</option>
<option value="2">test data 2</option>
<option value="3">test data 3</option>
</select>
I have several places in my website where a "combobox" style control is needed. To do this, I've encapsulated the combobox control into a .NET server-side component for re-usability. Some pages may have a combobox on them, some may not.
At the core, this combobox contains a textbox and a "dropdown" aligned appropriately with CSS. Part of the HTML rendered is simply:
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
The dropdown must start off empty, and changing to any value (including "Option 1") must trigger the onchange event.
I accomplish this by doing something like:
document.getElementById("theSelectElement").selectedIndex = -1;
but I'd prefer not to have to run javascript against each element on the page. I realize that I could use jQuery to select against a CSS class, but most pages won't have a select element on it and nothing will happen.
Is there a way to set selectedIndex that's encapsulated in the tag itself? Something like:
<select selectedIndex="-1">...
or
<select onload="this.selectedIndex = -1">...
?
a select is a radio state holder so there is no "non-selected" state
<select name="aaa">
<option value=""></option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
btw you can use an empty < option >
You may use the following: By default the first option will be selected automatically
<select name="aaa">
<option value="0">select any option</option>
<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>
Here is some documentation of select: http://www.w3.org/TR/html4/interact/forms.html#h-17.6
If you've wrapped it in your own user control or custom control then you'll need to expose the defaultSelection property (or whatever you name it) publicly so it can be specified in your server tag.
You talk about doing it in a <select> tag, but this is the HTML markup - not the server-side markup of <ASP:DropDown ... > or <myControl:CustomSelect ... >
EDIT : If it's pure HTML, then just output the default selection with the selected property set:
<select>
<option value="1">Top</option>
<option selected="selected" value="-1">Middle (Empty)</option>
<option value="2">End</option>
</select>