Here is my select box:
<select id="category">
<option value="">Pick a choice!</option>
<option value="">choice1</option>
<option value="">choice2</option>
<option value="">choice3</option>
<option value="">choice4</option>
</select>
I want the Pick a choice! option to be removed when the user click on the select box. If the user click anywhere else, the Pick a choice! option come back. I don't want the user to be able to pick the Pick a choice! option. What should I do?
Without some PHP or JavaScript to remove the option dynamically you do have another very simple option that I use regularly, this is the disabled="disabled" option. The option will remain but the user won't be able to actually select it.
The failure with this is if someone just submits a form without choosing anything the empty value will submit in the form, but this is where your validation handling comes into play.
Your code for the "Pick a choice!" option will look something like this:
<option disabled="disabled">Pick a choice!</option>
I hope it helps.
CSS Only Sol'n
So, I know this post is quite old now, but a css only solution wasn't offered... Much more efficient way of accomplishing this. Notice the first <option> doesn't have a value attribute; this allows it to effectively placehold.
#category:focus option:first-of-type {
display: none;
}
<select id="category">
<option>Pick a choice!</option>
<option value="choice1">choice1</option>
<option value="choice2">choice2</option>
<option value="choice3">choice3</option>
<option value="choice3">choice4</option>
</select>
Here is some workaround. Don't know wether this is suite your requirement.
<html>
<head>
<title>Untitled Document</title>
<script>
function doremove()
{
var obj=document.getElementById("category");
obj.remove(0);
}
function addOpt()
{
var obj=document.getElementById("category");
var option=document.createElement("option");
option.text="Pick a choice!";
option.value = 0;
obj.add(option,1);
obj.value = 0;
}
</script>
</head>
<body>
<select id="category" onfocus="doremove();" onblur="addOpt();">
<option value="0">Pick a choice!</option>
<option value="">choice1</option>
<option value="">choice2</option>
<option value="">choice3</option>
<option value="">choice4</option>
</select>
<input type="text" />
</body>
</html>
Try this
$("#SelectID option:first").remove();
Related
If I have
<select name="visibility">
<option value="private">private</option>
<option value="public">private</option>
<option value="hidden">private</option>
</select>
How would I make the hidden option the default?
I tried
<option value="hidden" selected>hidden</option>
But if I choose another option and then refresh, it gets replaced with that other value. How would I make it default, regardless of refresh?
your block should work fine on Chrome and IE.
however Firefox is saving your drop menu and its an old bug.
here how you fix it: add autocomplete="off" to your select tag
like this:
<select name="visibility" autocomplete="off">
<option value="private">1</option>
<option value="public">2</option>
<option value="hidden" selected>3</option>
</select>
You should use local storage to store the selected value and on reload your check for that item and add the selected attribute
http://jsfiddle.net/d948fL09/4/
if( typeof localStorage.visibility !== "undefined" ){
$('select').find($('option[value="' + localStorage.visibility + '"]').attr('selected', true))
}
$('select').on('change', function(){
localStorage.visibility=$(this).val();
console.log(localStorage.visibility)
})
Use the selected="selected" and autocomplete="off" attribute like so:
<select name="visibility" autocomplete="off">
<option value="private">private</option>
<option value="public">private</option>
<option value="hidden" selected="selected">private</option>
</select>
This works as you want it to, no matter how often you reload the page.
I've created a simple select menu
<select class="element">
<option value="3">Read Only</option>
<option value="1">Editable</option>
<option value="2">Hidden</option>
</select>
However, when I click on the select menu, nothing happens.
I've attached an jQuery onclick listener to determine if the click is being registered and it is. However, the options are not being displayed.
Is there any particular reason why the options list would not be displayed?
CSS rules as requested:
select {
height: 25px;
background: #FFFFFF;
}
$('.element').on('click', function(){
console.log('clicked');
});
Check this code:
### Listbox
http://jsfiddle.net/4jkE8/2/
Try this on your css:
select {
height: 25px;
background: #FFFFFF;
}
$.noConflict();
$('.element').on('click', function(){
console.log('clicked');
});
Also I think that you have a Javascript or Jquery file that is making conflict, try creating this on your view:
<select class="element">
<option value="3">Read Only</option>
<option value="1">Editable</option>
<option value="2">Hidden</option>
</select>
<script type="text/javascript">$.noConflict();</script>
Change your class name to something different. Then instead of using it as a class change it to an id. Then in your jQuery detect the on change event. Usually when having a select option you only need one of them. The id attribute is meant for when there is only one one of that element on a page.
I feel fairly certain that the click event does not work for all browsers on a select list. You may want to check out this question: Click event on select option element in chrome
HTML Code:
<select id="status">
<option value="3">Read Only</option>
<option value="1">Editable</option>
<option value="2">Hidden</option>
</select>
<select id="status">
<option value="3">Read Only</option>
<option value="1">Editable</option>
<option value="2">Hidden</option>
</select>
JavaScript Code:
$('#status').on('change', function(){
console.log('changed');
});
I have a problem with my site. I have a select menu and 3 options: images, video and audio. When I click one of the options it should display a button to pick out the image/video/audio to upload, but this doesn't display in Google Chrome. In Firefox there is no problem with this. Does anyone have a solution for this?
Thanks very much!
EDIT:
This is the code
<select name="service_id">
<option value="video" onClick="showSection('video',['image','audio']);" <?=count($videos)?'selected="selected"':''?>>Video</option>
<option value="image" onClick="showSection('image',['video','audio']);" <?=count($images)?'selected="selected"':''?>>Imagini</option>
<option value="audio" onClick="showSection('audio',['video','image']);" <?=count($audios)?'selected="selected"':''?>>Audio</option>
</select>
things i modified:
the second parameter is now a class name, each value separated by a "|"
used onChange() to trigger a selection (but does not trigger unless the value changes)
used this to pass a reference to the select rather than passing values (you can do more this way)
demo here
<select name="service_id" onChange="showSection(this)">
<option value="video" class='image|audio'>Video</option>
<option value="image" class='video|audio'>Imagini</option>
<option value="audio" class='video|image'>Audio</option>
</select>
<script type="text/javascript">
function showSection(el){
//modified to get the first and second parameters of showSection()
//get the value
var firstParam = el.value;
//get the class name of the selected element, and split it
var secondparam = el.options[el.selectedIndex].className.split('|');
console.log(firstParam);
console.log(secondparam);
}
</script>
Call the function on select not in options:
<select onClick='showSection(this.value,"a")'>
<option value="video" >Video</option>
<option value="image">Imagini</option>
<option value="audio">Audio</option>
</select>
i have tested this in chrome its working alright.
one suggestion is if you are using dropdown then use onchange event rather then using onClick
<?php
$videos=0;
$images=0;
$audios=0;
?>
<select name="service_id">
<option value="video" onClick="showSection('video',['image','audio']);" <?=count($videos)?'selected="selected"':''?>>Video</option>
<option value="image" onClick="showSection('image',['video','audio']);" <?=count($images)?'selected="selected"':''?>>Imagini</option>
<option value="audio" onClick="showSection('audio',['video','image']);" <?=count($audios)?'selected="selected"':''?>>Audio</option>
</select>
I have a select which initially shows Select language until the user selects a language. When the user opens the select, I don't want it to show a Select language option, because it's not an actual option.
How can I achieve this?
Kyle's solution worked perfectly fine for me so I made my research in order to avoid any Js and CSS, but just sticking with HTML.
Adding a value of selected to the item we want to appear as a header forces it to show in the first place as a placeholder.
Something like:
<option selected disabled>Choose here</option>
The complete markup should be along these lines:
<select>
<option selected disabled>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
You can take a look at this fiddle, and here's the result:
If you do not want the sort of placeholder text to appear listed in the options once a user clicks on the select box just add the hidden attribute like so:
<select>
<option selected disabled hidden>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
Check the fiddle here and the screenshot below.
Here is the solution:
<select>
<option style="display:none;" selected>Select language</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
The proper and semantic way is using a placeholder label option:
Add an option element as the first child of the select
Set value= "" to that option
Set the placeholder text as the content of that option
Add the required attribute to the select
This will force the user to select another option in order to be able to submit the form, and browsers should render the option as desired:
If a select element contains a placeholder label option, the user
agent is expected to render that option in a manner that conveys that
it is a label, rather than a valid option of the control.
However, most browsers will render it as a normal option. So we will have to do fix it manually, by adding the following to the option:
The selected attribute, to make it selected by default
The disabled attribute, to make it non-selectable by the user
display: none, to hide it from the list of values
select > .placeholder {
display: none;
}
<select required>
<option class="placeholder" selected disabled value="">Select language</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
Because you can't use assign placeholders for select tags, I don't believe that there is any way to do exactly what you're asking for with pure HTML/CSS. You can, however, do something like this:
<select>
<option disabled="disabled">Select language</option>
<option>Option 1</option>
</select>
"Select language" will show up in the dropdown, but once another option is selected it will not be possible to reselect it.
I hope that helps.
Try this:
<div class="selectSelection">
<select>
<option>Do not display</option>
<option>1</option>
<option>1</option>
</select>
</div>
In the CSS:
.selectSelection option:first-child{
display:none;
}
I have a solution with a span displayed above the select until a selection done. The span displays the default message, and so it's not in the list of propositions:
HTML:
<span id="default_message_overlay">Default message</span>
<select id="my_select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
CSS:
#default_message_overlay {
position: absolute;
display: block;
width: 120px;
color: grey;
}
select {
width: 150px;
}
Javascript (with JQuery):
$(document).ready(function() {
// No selection at start
$('#my_select').prop("selectedIndex", -1);
// Set the position of the overlay
var offset = $('#my_select').offset();
offset.top += 3;
offset.left += 3;
$('#default_message_overlay').offset(offset);
// Remove the overlay when selection changes
$('#my_select').change(function() {
if ($(this).prop("selectedIndex") != -1) {
$('#default_message_overlay').hide();
}
});
});
I've made a jsfiddle for demo. Tested with Firefox and IE8.
To answer your question directly use this code on the option you do not want it to appear in option list:
<option value="" hidden selected>Select Language</option>
<option value="" id="ddl" name="prop" style="display:none;" disabled selected>chose something </option>
you can of course move the css to a css file if you want, and put a script to catch the esc button to select the disabled again. Unlike the other similar answers I put value="", this is so if you send the value(s) of your select list with a form, it won't contain "chose something". In asp.net mvc 5 sent as json compiled with var obj = { prop:$('#ddl').val(),...}; and JSON.stringify(obj); the value of prop will be null.
Op1:
$("#MySelectid option").each(function () {
if ($(this).html() == "text to find") {
$(this).attr("selected", "selected");
return;
}
});
Op2:
$('#MySelectid option')
.filter(function() { return $.trim( $(this).text() ) == 'text to find'; }).attr('selected','selected');
I have an easy question for you today. I have a select box that enables the user to select multiple items. Also, when the user returns to the page, he can see which items he selected and unselect them if necessary. The trouble is that when I try to unselect, the selection just turns gray; it does NOT unselect.
<select name="MySelect" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
So, when the element above renders to the page, I have no way to unselecting the option. The value is STILL getting passed to the form.
Any help?
You can deselect options in a multi-value select list by ctrl-clicking it.
You can use JS object to memorize the status of a row and click action on select (JQuery).
$('#yourselect').click( function(e){
var i = this.selectedIndex;
if(this.options[i].selectedOld==true){
this.options[i].selected = false;
this.options[i].selectedOld = false;
}
else{
this.options[i].selectedOld = true;
}
});