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>
Related
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.
Although this may not be the best UI implementation, I have a drop-down list with several elements that must be grouped using multiple placeholders (e.g. ----- group 1 -----). I'd like to make the place-holders un-selectable.
I found a solution for a single placeholder here:
How do I add an unselectable and customizable placeholder to a select box
but it doesn't seem to be extendable to multiple place-holders.
Thanks in advance for any ideas.
Not angular specific, but can you use select option groups?
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Check out http://www.w3schools.com/tags/tag_optgroup.asp and their demo at
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup
I have this type of multiple select dropdown menu I want to add to my form
<form>
...
<select id="example2" multiple="multiple">
<div id="otherChoices">
<optgroup label="Academic" class="blah">
<option value="Engineering" class="blah">Engineering</option>
<option value="Humanities">Humanities</option>
<option value="Life_Sciences">Life Sciences</option>
<option value="Social Sciences_Sciences">Social Sciences</option>
</optgroup>
<optgroup label="Clubs">
<option value="Event">Event </option>
<option value="Meeting">Meeting</option>
<option value="Performance">Performance</option>
</optgroup>
<optgroup label="Personal">
<option value="Discussion">Discussion</option>
<option value="Event">Event</option>
<option value="Food">Food</option>
<option value="Hangout">Hangout</option>
<option value="Trip">Trip</option>
</optgroup>
</div>
</select>
</form>
But I'm not sure what type of input form this is (it's a bootstrap created form but not of a valid input type), so I'm not sure exactly how to send the parameters via a post request. Currently, I'm using jquery to grab the selected values and and fill in a hidden form. Is there a better way about this?
You made a few mistakes in your HTML:
This is the corrected version:
<form action="test2.php" method="post">
<select name="example2[]" id="example2" multiple="multiple" >
<div id="otherChoices" name="hello">
<optgroup label="Academic" class="blah">
<option value="Engineering" class="blah">Engineering</option>
<option value="Humanities">Humanities</option>
<option value="Life_Sciences">Life Sciences</option>
<option value="Social Sciences_Sciences">Social Sciences</option>
</optgroup>
<optgroup label="Clubs">
<option value="Event">Event </option>
<option value="Meeting">Meeting</option>
<option value="Performance">Performance</option>
</optgroup>
<optgroup label="Personal">
<option value="Discussion">Discussion</option>
<option value="Event">Event</option>
<option value="Food">Food</option>
<option value="Hangout">Hangout</option>
<option value="Trip">Trip</option>
</optgroup>
</div>
</select>
<button type="submit">Submit</button>
</form>
EDIT:
This is what I corrected:
I added a name value to the select with square brackets to show its an array
I added a method type to the form: method="post"
Submit button
You can then access the individual items like this:
echo $_POST["example2"][0];
EDIT: Sorry I realised this is Node.js That one was for PHP. See this link for how to get post variable in node js:
How do you extract POST data in Node.js?
When you submit a form, it passes an array to the next page, specified in the form's action attribute. If one isn't set, it will submit to the current URL.
By default, forms will submit using GET unless set the method attribute to post.
So, change your <form> tag to the following:
<form method="post" action="test.php">
And give your select a name, like name="test_select".
And then your test.php can look like this:
<?php
print_r($_POST);
(no need for a ?> closing tag)
This will print the $_POST array and you'll see how multiple selects work.
I have a dropdown menu with different option groups. If someone selects an option, how can I check which optgroup it belongs to? For example if 'ferrari' were selected, how would you determine which optgroup it belongs to?
Feel free to use jQuery or raw javascript.
<select name="testSelect">
<optgroup label="fruits">
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="pears">Pears</option>
</optgroup>
<optgroup label="cars">
<option value="ford">ford</option>
<option value="toyota">toyota</option>
<option value="ferrari">ferrari</option>
</optgroup>
</select>
You can do this using jQuery:
$('select').change(function() {
var selected = $(':selected', this);
alert(selected.closest('optgroup').attr('label'));
});
See a live example here: http://jsfiddle.net/jkeyes/zjLCp/1/
Update: Yes you could use parent http://jsfiddle.net/jkeyes/zjLCp/2/
alert(selected.parent().attr('label'));
Well, in pure js:
this.options[this.selectedIndex].parentNode.label
Not a single function call and less code to boot. :-)
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.