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?
Related
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();
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 have a page with multiple dropdowns and I want to disable multiple options in all of those dropdowns.
The options I aim to disable share certain characteristics, namely that they're identified with two classes each. Many of the options in all the lists share the same classes and I want to add several buttons that enable or disable options based on those classes.
My issue is, that the standard ways I have seen here target options
by select element
by number.
But mine are dynamically generated and the options that I'm trying to disable are not always next to each other.
Here's a snippet of one of the dropdowns:
<select name="m1">
<option value="Abyss Guard, Cereberus" class="Covert Beast">Abyss Guard, Cereberus</option>
<option value="Abyss Guard, Cereberus+" class="Covert Beast">Abyss Guard, Cereberus+</option>
<option value="Achlis+" class="Covert Beast">Achlis+</option>
<option value="Adept Devil+" class="Impulse Demon">Adept Devil+</option>
<option value="Agares+" class="Covert Demon">Agares+</option>
<option value="Airship of Death+" class="Psycho Creation">Airship of Death+</option>
<option value="Ancient Huge Statue+" class="Psycho Creation">Ancient Huge Statue+</option>
<option value="Anna Thorn Maiden" class="Impulse Demon">Anna Thorn Maiden</option>
<option value="Anna Thorn Maiden+" class="Impulse Demon">Anna Thorn Maiden+</option>
<option value="Anomalocaris+" class="Impulse Beast">Anomalocaris+</option>
<option value="Apopisu of Chaos+" class="Psycho Beast">Apopisu of Chaos+</option>
<option value="Arachno Chi" class="Psycho Crawler">Arachno Chi</option>
<option value="Arachno Chi+" class="Psycho Crawler">Arachno Chi+</option>
<option value="Arbitration Demon+" class="Psycho Demon">Arbitration Demon+</option>
<option value="Armored Black Tiger+" class="Impulse Beast">Armored Black Tiger+</option>
<option value="Armored Bucephalus+" class="Covert Beast">Armored Bucephalus+</option>
</select>
This is by no means an exhaustive list, there's a couple of hundred options for each dropdown, though all the dropdowns contain the same list. As you can see, the list is sorted alphabetically, not by class.
I am looking to disable and enable options with a button based on one of the two classes, and a disabled status should override an enabled status. The standard document.getElementById('m1').options[number].disabled doesn't really help me here as the list is dynamically generated and I do not know where a specific option will end up.
Part of the site's aim is to minimize the amount of reloading needed and at the same time minimize the amount of javascript being executed, to speed up responsiveness. Is there a way I can select all options in all of the dropdowns that are of any specific class?
Here's one way of doing it. If you have that many options and they don't change, consider caching the result of document.querySelectorAll so that you don't have to find all the options again each time you want to disable/enable them.
http://jsfiddle.net/uj86d/
HTML
<select>
<option value="test1" class="red">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3" class="red">Test 3</option>
<option value="test4">Test 4</option>
</select>
<select>
<option value="test1">Test 1</option>
<option value="test2" class="red">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4" class="red">Test 4</option>
</select>
<button>Disable reds!</button>
JS
//disable all options with a red class
document.querySelector('button').addEventListener('click', function () {
var redOptions = document.querySelectorAll('option.red'),
i = 0,
len = redOptions.length;
for (; i < len; i++) {
redOptions[i].disabled = true;
}
});
I'm trying to modify a select element with the 'multiple' attribute to only select/disselect the one option selected, instead of disselecting all options and selecting the one target.
Let's say we got this:
<select name="somename[]" multiple="multiple">
<option selected="selected" value="val1">Val1</option>
<option selected="selected" value="val2">Val2</option>
<option value="val3">Val3</option>
</select>
What I want to happen when you select an option is:
<select name="somename[]" multiple="multiple">
<option selected="selected" value="val1">Val1</option>
<option value="val2">Val2</option> <!-- Disselected -->
<option value="val3">Val3</option>
</select>
Instead of:
<select name="somename[]" multiple="multiple">
<option value="val1">Val1</option>
<!-- All other values are disselected except the one option selected -->
<option selected="selected" value="val2">Val2</option>
<option value="val3">Val3</option>
</select>
I hope that made sense. If not please let me know.
I've tried using jQuery and hooking a click function on the select element, hoping to intersect the selected option but that failed. Appearently the selections are made before the event is triggered.
Thanks.