I've been trying to select some options manually in the Chosen plugin.
Why i need something like that?
My concept is :Let's say a user wants to put some tags to a video,when he inserts the video to the database the tags will be saved in a database too. When he wants to edit this video i have to query these tags from the database and show them to the user so he can edit/delete/add new.
My question:
Is there any way to put these tags in an array and then put them as an already selection?
Just add the selectedproperty when you get the existing tags from the database. Let us say a video is tagged with a and b, so when you show the select list it would look like this:
<select id="assets" data-placeholder="Choose assets" class="chzn-select" multiple style="width:350px;">
<option value="a" selected>a</option>
<option value="b" selected>b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
<option value="g">g</option>
</select>
Related
I have a long list (of an undetermined length, that can keep on growing) of values. For example:
<select>
<option value="1">1, some test</option>
<option value="2">2, some text</option>
<option value="3">3, some text</option>
<option value="4">4, some text</option>
<option ...... add 100 more options> ..
</select>
What would be the best practice/user friendly way to support such a long list? I imagine that a user might find it frustrating to scroll through a super long list.
I am trying to minimize the user's scroll time, by presenting the most recent values at the top of the drop down, but if she/he would like to go to the first element in the drop down it would require a lot of scrolling.
Thanks
Instead of using <select>, how about changing it to HTML5 <datalist>, which is like this:
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
By the way, you can type the first letter using the <select>, so my suggestion will be sort your data according to the first letter. Because it will help the user to go to the sub-option directly.
Maybe add a searchfield to the dropdown?
Something like this: http://jsearchdropdown.sourceforge.net/
What kind of data would you like to display ? Maybe there is another way than select to display them ? In fact, for dozens of items, select is not the best choice, unless you use by example a JQuery plugin like jsearchdropdown and in this case the user must know what he's looking for.
The below select tag is in one row i need that in three column with select option tag:
http://jsfiddle.net/QZa7R/
<select>
<optgroup label="Terestrial">
<option value="Car">Car</option>
<option value="Tank">Tank</option>
</optgroup>
<optgroup label="Air">
<option value="Airplain">Airplain</option>
<option value="Helicopter">Helicopter</option>
</optgroup>
<optgroup label="Water">
<option value="Ship">Ship</option>
<option value="Submarine">Submarine</option>
</optgroup>
</select>
According to the Image you provided, what you need to achieve is not possible by just using <select> tag and CSS. Either you'll have to use some sort of plugin, or create a <div> and put your content in it accordingly.
You can also take a look at this fiddle but my suggestion is you should create a <div> and put your content in it
ps. I am not an author of that fiddle i found it while browsing around
You can't.
The image you pointed to is using js to trigger a different HTML element (a div, perhaps) containing sub elements, perhaps lis with <a>s or the like.
There may be a select underneath (yay accessibility) but it's hidden when you want something like that displayed. You'd then need to use JS to either update your actual select element and trigger the submit on your form or to post the form data to the server asynchronously.
looking for three column Please Try it
<style>
select optgroup.column3 {
display: -moz-groupbox;
float: left;
width: 100px;
background:red;
}
</style>
<select>
<optgroup label="Terestrial" class="column3">
<option value="Car">Car</option>
<option value="Tank">Tank</option>
</optgroup>
<optgroup label="Air" class="column3">
<option value="Airplain">Airplain</option>
<option value="Helicopter">Helicopter</option>
</optgroup>
<optgroup label="Water" class="column3">
<option value="Ship">Ship</option>
<option value="Submarine">Submarine</option>
</fieldset>
</select>
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;
}
});
Problem is, I don't know either language. I'm pretty good at modifying existing scripts but I can't seem to find any that suit my needs.
I want to be able to have two drop down menus and a button. From the two dropdowns lets say you can select variable A and variable B, then when the button is pressed, I want it to show an item from a list which satisfies both A and B (preferably without a refresh or need for PHP).
Are there any existing scripts like this which I can modify or is it too much to do without knowing the language?
Thanks.
Something like this. Insted of alerts put your filtering code.
<body>
<script>
function onSelect(){
var selectmenu1=document.getElementById("select1");
var selectmenu2=document.getElementById("select2");
alert("First value: " + selectmenu1.options[selectmenu1.selectedIndex].value);
alert("Second value: " + selectmenu2.options[selectmenu2.selectedIndex].value);
}
</script>
<select id="select1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select id="select2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="button" onclick="onSelect();" value="Submit!"/>
</body>
Here is the issue.
I have a select dropdown list.
<select name="listingtype" id="speedD" style="width:210px;">
<option>For Sale</option>
<option>For Rent</option>
</select>
And another select drop down list where the prices appear , which on page load it is empty..
So if user clicks For Sale: then the other select drop down list, loads price list like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
And if they choose For Rent. Select drop down is propagated like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="100">$100</option>
<option value="150">$150</option>
<option value="200">$200</option>
<option value="250">$250</option>
<option value="300">$300</option>
</select>
I need this code to be client side, no need for server side. And just wanted to know what the cleanest method for doing this is.
Cheers.
First of all I recommend setting the value attribute in your option elements.
Example:
<option value="sale">For sale</option>
<option value="rent">For rent</option>
If you have not already heard of or seen the JavaScript library known as jQuery I strongly recommend checking it out! It can be very helpful when creating a dynamic site like this using minimal JavaScript.
I would do something like the following:
<html>
...
<body>
<div id="fillme"></div>
<script type="text/javascript">
if (document.yourformname.listingtype.value == "sale") {
//it is for sale
$('#fillme').html('<select name="valueA" id="speedF" style="width:200px;"><option value="Any" selected="selected">Any</option><option value="50000">$50,000</option><option value="100000">$100,000</option><option value="150000">$150,000</option><option value="200000">$200,000</option><option value="250000">$250,000</option></select>');
} else {
//fill it with the other elements
}
</script>
</body>
</html>
Now of course you could load it more dynamically with JSON or XML but that is up to you. I really recommend checking out the library:
http://jQuery.com
Use JavaScript to fill the empty select with options when the user selects an option (either onchange or onselect, forget which) in the For Sale/For Rent select.
EDIT: More specifically, have that second box be empty when the page loads. Store the options in arrays. Use a loop to create new OPTION elements based on each array item.