I try this code but not auto select in active select.
<FORM NAME="nav">
<SELECT NAME="SelectURL" onChange="document.location.href=document.nav.SelectURL.options[document.nav.SelectURL.selectedIndex].value">
<OPTION VALUE="http://www.lam-alif.com/forumdisplay.php/264?field5=Jakarta" <vb:if condition="$GLOBALS[field5] == Jakarta">SELECTED</vb:if>>Utama
<OPTION VALUE="http://www.lam-alif.com/forumdisplay.php/265?field5=Lampung" <vb:if condition="$GLOBALS[field5] == Bandung">SELECTED</vb:if>>Kedua
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/choices.html">Choices in HTML forms
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/tables.html">Tables and forms
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/methods.html">Form submission methods (GET and POST)
</SELECT>
</FORM>
how to make like this site www.tokobagus.com
In document.ready u have to copy html of select element and change it to ul and change the options to li. After it use jquery scroller to scroll.
Related
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');
});
How do I get the selected option from the HTML select option attribute to a POST request? So
<form method="post" action="new_choice/:pick_an_order/:pick_a_letter">
<select name="pick_an_order">
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
<select name="pick_a_letter">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
If the user selects, as an example, the first option from each, being "First" and "A". Right now I have:
post 'new_choice/:pick_an_order/:pick_a_letter' do
pick_an_order = params[:pick_an_order]
pick_a_letter = params[:pick_a_letter]
#your_choice = YourChoice.new(pick_an_order, pick_a_letter)
redirect '/to_a_page'
end
But for some reason it's not saving to #your_choice. How do I get the selected attribute directly to the POST request so that it can be saved to the #your_choice object? Thanks in advance!
You must make a choice. Either you modify the value of the action attribute in your form with the help of Javascript, or you change the route of your resource to post 'new_choice' do and have the values sent as POST parameters.
I'll pick the second one because it seems more logical at the moment:
<form method="post" action="/new_choice">
<select name="pick_an_order">
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
</select>
<select name="pick_a_letter">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
Please note that you must specify the value attribute for each option, that's the actual value sent (whatever text inside the tag is for the users). Then in Sinatra:
post '/new_choice' do
pick_an_order = params[:pick_an_order]
pick_a_letter = params[:pick_a_letter]
#your_choice = YourChoice.new(pick_an_order, pick_a_letter)
redirect '/to_a_page'
end
I would rather use javascript to submit the form because the code is so simple: $(function() {
$('#language').change(function() {
this.form.submit();
});
});
Assign an id to the select tag, in this case it is #language.
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');
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();