I have a html5 input with associated datalist, I want to clear the input when the options are opened so that all of them could be visible (unfiltered). How could I do this in Javascript? (with jQuery or not)
For example (https://stackoverflow.com/a/29755076/2190425)
<input type="text" name="city" list="cityname">
<datalist id="cityname">
<option value="Boston">
<option value="Cambridge">
</datalist>
When I click the dropdown arrow, then select Boston and after that click the dropdown arrow again - after this second click I want the input to be empty (because it filters the options to the one option that's typed in - Boston), so I need some kind of event or something that would allow me to empty the input, but it can't be input event, because nothing is input when you click the dropdown yet.
You can go with editable dropdown which will work as datalist and your requirement will be accomplished. The code for editable drop down given below.
$(document).ready(function(){
$(".editableBox").change(function(){
$(".timeTextBox").val($(".editableBox option:selected").html());
});
});
.editableBox {
width: 75px;
height: 30px;
}
.timeTextBox {
width: 54px;
margin-left: -78px;
height: 25px;
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<select class="editableBox">
<option value="1">01:00</option>
<option value="2">02:00</option>
<option value="3">03:00</option>
<option value="4">04:00</option>
<option value="5">05:00</option>
<option value="6">06:00</option>
<option value="7">07:00</option>
<option value="8">08:00</option>
<option value="9">09:00</option>
<option value="10">10:00</option>
<option value="11">11:00</option>
<option value="12">12:00</option>
<option value="13">13:00</option>
<option value="14">14:00</option>
<option value="15">15:00</option>
<option value="16">16:00</option>
<option value="17">17:00</option>
<option value="18">18:00</option>
<option value="19">19:00</option>
<option value="20">20:00</option>
<option value="21">21:00</option>
<option value="22">22:00</option>
<option value="23">23:00</option>
<option value="24">24:00</option>
</select>
<input class="timeTextBox" name="timebox" maxlength="5"/>
</div>
What I did was simply clean the input on double click. This way at least the user has the option and if informed - the usage is quite comfortable (for new users it could less of a solution).
Here is the code I used:
# datalist does not fire change event, therefore we need this exception, the if is for avoiding duplicate call with keyup
$(#dom.search_fields).find('input.datalist_filter').on 'input', (e) =>
#handleInput(e) if e.target.value.length and
($(e.target.list).find('option').filter -> this.value == e.target.value).length
# it does not fire event if you set the value of input manually, therefore we need to call handleInput directly here
$(#dom.search_fields).find('input.datalist_filter').on 'dblclick', (e) =>
e.target.value = ''
#handleInput(e)
Related
<select>
<option value="">- Placeholder</option>
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
</select>
I would like to change the color of an unselected dropdown (that shows the placeholder value by default) to a light grey. So that it appears more like a placeholder field like for inputs.
Especially, as soon as a real value is selected, the text shown should not be back to normal.
https://jsfiddle.net/bq32uxh7/
Does this get you close?
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('form-select').addEventListener('change', function() {
if (this.value === "") {
if (!this.classList.contains('placeholder')) {
this.classList.add('placeholder');
}
if (this.classList.contains('others')) {
this.classList.remove('others');
}
} else {
if (!this.classList.contains('others')) {
this.classList.add('others');
}
if (this.classList.contains('placeholder')) {
this.classList.remove('placeholder');
}
}
});
});
#form-select {
color: #8e8e8e;
}
#form-select.placeholder, option.placeholder {
color: #8e8e8e;
}
#form-select.others, option.others {
color:#000;
}
<select id="form-select" aria-label="Default select example">
<option class="placeholder" value="" selected>- Placeholder</option>
<option class="others" value="1">One</option>
<option class="others" value="2">Two</option>
<option class="others" value="3">Three</option>
</select>
A couple things I have changed.
The select option now has an id
Every option has a class
When you have a other item selected in dark mode things look a bit weird as the grey is forcing the background color to go into light mode. This may be possible to adjust with forcing a bg color. In light mode it works well
You should be able to refactor the add/removing classes and create a toggle function instead
To make sure your placeholder value cannot be selected, you can set it as disabled. In most browsers it will be shown as light grey when it is not selected and thus not selectable.
<select>
<option value="" selected disabled>- Placeholder</option>
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
</select>
If you don't want the placeholder to appear at all in the options list, you can even hide it with the hidden attribute:
<option value="" selected disabled hidden>- Placeholder</option>
If you want to style it further, refer to #Rippo 's answer.
EDIT:
If you want to change how the select input looks like when the selected option is not valid (i.e. is the placeholder), you need to set the select input as required then you can use the :invalid pseudo-class on the select's css selector.
function resetSelectElement()
{
document.getElementById("select").selectedIndex = 0;
}
select:invalid {
background-color: gray;
}
<select id="select" required>
<option value="" selected disabled>- Placeholder</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<button type="button" onclick="resetSelectElement()">clear</button>
I have a drop-down list which POSTs to express and then redirects to same page.
Now, I want the one valid option to be selected before submitting, hence I added required property in <select> tag.
But, I also want a value to be Selected in the list when page renders
If first time render, then first option
If after submitting, the submitted option to be selected by default
Here is the skeleton code
<select required data-style="btn-info" name="selectpicker">
<optgroup label="Select Map">
<option name="table1" value="Station">Station</option>
<option name="table2" value="Station2">Station2</option>
</optgroup>
</select>
and the things I tried
<option value="" selected disabled>Select station</option>
<option name="table1" value="Station" selected>Station</option>
but none of them fulfills my requirements.
if you are using javascript for handling the form just add event.preventDefault() in your onsubmit function so when you submit it won't revert back to default
The problems were solved by
<form action="any" method="any" onSubmit="return fieldCheck();">
<select required id="collec" data-style="btn-info" name="selectpicker">
<option value="Select Station" selected disabled hidden>Select City</option>
<option name="table1" value="Vice City">Vice City</option>
<option name="table2" value="Delhi City">Delhi City</option>
and script
function fieldCheck() {
var collec = document.querySelector('#collec');
if(collec.value != "Select Station") {
return true;
}
else {
alert("Select a city first!!");
return false;
}
}
Is there a way to not count the default option as a submission in a required select element? For example if the default option is "Choose...", I don't want the user to be able to submit the form without changing this input. I want the user to have to choose one of the other options before they can submit.
The value of the default option is left empty (""), so the script can check and prevent form submission (event.preventDefault()) unless there is an option value.
Note the alert (popup) can be commented out or removed, and the form will still not submit until an option is selected. However, the user may not realize their mistake without some kind of notification.
function checkInput() {
const choice = document.getElementById('cars');
if (choice.value === '') {
event.preventDefault();
alert('Must select an option');
}
}
select {
width: 14rem;
margin-bottom: 1em;
}
<form action="#" id="form">
<select name="cars" id="cars">
<option value="">Pick a Ride</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br />
<button type="submit" onclick="checkInput()">Submit Form</button>
</form>
I have a form in which I have added "Please Select" option for the drop-down.
The form should work in a way that if users doesn't select values 1, 2-5, 6-15, 16-30 etc then the form should not submit.
In my form, if I select "Please Select" then the form gets submit as it being treated as 1, 2-5, 6-15, 16-30, etc.
The HTML codes for the form generated at run time are:
<select name="input_12" id="input_37_12" class="medium gfield_select" tabindex="5" aria-required="true" aria-invalid="false">
<option value="Please Select" selected="selected">Please Select</option>
<option value="1">1</option>
<option value="2-5">2-5</option>
<option value="6-15">6-15</option>
<option value="16-30">16-30</option>
<option value="31-100">31-100</option>
<option value="101-250">101-250</option>
<option value="251-1000">251-1000</option>
<option value="1001-2500">1001-2500</option>
<option value="2501 +">2501 +</option>
</select>
Problem Statement:
I am wondering what changes I should make in the HTML code above so that "Please Select" option is not treated as other drop-down values (1, 2-5, 6-15, 16-30 etc ) in the HTML.
To force form validation on a select input, you need to use the required attribute on your select form and set the value of the initial option to "".
Note: aria-required="true" works fine as well, especially for browsers that don't yet support HTML5, I just prefer the shorter HTML5 alternative. This also applies to selected="selected" vs selected.
<form>
<select name="input_12" id="input_37_12" class="medium gfield_select" tabindex="5" required aria-invalid="false">
<option value="" selected>Please Select</option>
<option value="1">1</option>
<option value="2-5">2-5</option>
<option value="6-15">6-15</option>
<option value="16-30">16-30</option>
<option value="31-100">31-100</option>
<option value="101-250">101-250</option>
<option value="251-1000">251-1000</option>
<option value="1001-2500">1001-2500</option>
<option value="2501 +">2501 +</option>
</select>
<button type="submit">Submit</button>
</form>
Edit: This can also be done via Javascript.
// Obtain our form via its ID
var form = document.querySelector('form');
// Add a listener to our form to wait for its submission
if (form.addEventListener) {
form.addEventListener("submit", validate, false); //Modern browsers
} else if (form.attachEvent) {
form.attachEvent('onsubmit', validate); //Old IE
}
function validate(e) {
var select = e.target.querySelector("select");
// Get the value of our selected option
var selectedOption = select.options[select.selectedIndex].value;
// Compare the value of the default option to the selected option
if (selectedOption === "Please Select") {
// Trigger Error and prevent the form submission
alert("Please select an option!")
e.preventDefault();
}
}
<form>
<select name="input_12" id="input_37_12" class="medium gfield_select" tabindex="5" aria-required="true" aria-invalid="false">
<option value="Please Select" selected="selected">Please Select</option>
<option value="1">1</option>
<option value="2-5">2-5</option>
<option value="6-15">6-15</option>
<option value="16-30">16-30</option>
<option value="31-100">31-100</option>
<option value="101-250">101-250</option>
<option value="251-1000">251-1000</option>
<option value="1001-2500">1001-2500</option>
<option value="2501 +">2501 +</option>
</select>
<button type="submit">Button</button>
</form>
To simply prevent the users from selecting an option just add disabled in the html for the option (as pointed out in the question from the comment marking this as a possible duplicate, #csmckelvey).
However, you can also simply add a display:none to the option:
select option:first-of-type{
display:none;
}
At least works on android, and yet show the text of the first option (even though it Should be hidden - dont Know why).
Anyways it's important to Remember to validate the form as the other answer suggests.
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');