I have a dropdown with year values spanning 25 years, 10 years before the current year and 15 years after:
<select id="year">
<option value="">Select Year</option>
<option value="2011">2011</option>
...
<option value="2021">2021</option>
...
<option value="2036">2036</option>
<select>
This input is optional.
When the page loads, the control is to show Select Year.
The page that will be used by field users on a smartphone or tablet only.
Our research shows that in around 1 in 3 inputs, user will be required to select a previous year and the rest will be in the future.
I would like it so that when the user taps on the control, the displayed value starts at the current year so user can scroll forwards or backwards through the list rather than having to scroll through previous years if the value to be selected is in the future
Is this possible?
This might get you started, but it does have some issues, like as soon as you mouse over the drop down list, the "selected" item changes.
I suppose you'll have to add a if clause so it doesn't work at all times.
function setThisYear(selectEle) {
selectEle.value = "2021";
selectEle.options[selectEle.selectedIndex].value = 2021;
}
<select id="year" onclick="setThisYear(this)">
<option value="">Select Year</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2021">2021</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
</select>
Related
I am trying to simplify my code. I just cannot get things working the way i want.
I have 3 tables with 2 dropdown select options
Roadmap
Roadmap Years
Roadmap Years Releases
Selector 1 Roadmap
Selector 2 Roadmap Year
I have form with these 2 dropdowns
<select name="relation[id_roadmap]" id="id_portfolio" class="form-control col-auto form-control-sm autosubmit border-success" data-style="" data-width="100%">
<option selected value="">Select Roadmap</option>
</select>
<select name="relation[id_roadmap_year]" id="id_portfolio" class="form-control col-auto form-control-sm autosubmit border-success" data-style="" data-width="100%">
<option selected value="">Select Roadmap Year</option>
</select>
The other options are not relevant because i have no problem with them being set.
When i make the request with this they come empty in the input stream
How can i make the select option value to not come into the input
i've tried <option selected value>Select Roadmap Year</option> - this comes empty
i've tried <option selected>Select Roadmap Year</option> - this comes the text "Select Roadmap Year" instead of nothing.
What is the way to not come into the input stream ?
It is even possible to have them unset and not use code to unset them ?
<select name="relation[id_roadmap]">
<option selected="selected" disabled value="">Seleact Roadmap/option>
<option value="1">Roadmap 1</option>
</select>
This will not send the select value empty to the input stream
____ EDIT WITH Empty value ____
<select name="relation[id_roadmap]">
<option selected="selected" disabled value="">Select Roadmap/option>
<option value="">All Roadmaps/option>
<option value="1">Roadmap 1</option>
</select>
below I attached some piece of code from https://semantic-ui.com/modules/dropdown.html: (Multiple Selection)
<select name="skills" multiple="" class="ui fluid dropdown">
<option value="">Skills</option>
<option value="angular">Angular</option>
<option value="css">CSS</option>
<option value="design">Graphic Design</option>
<option value="ember">Ember</option>
<option value="html">HTML</option>
<option value="ia">Information Architecture</option>
<option value="javascript">Javascript</option>
<option value="mech">Mechanical Engineering</option>
<option value="meteor">Meteor</option>
<option value="node">NodeJS</option>
<option value="plumbing">Plumbing</option>
<option value="python">Python</option>
<option value="rails">Rails</option>
<option value="react">React</option>
<option value="repair">Kitchen Repair</option>
<option value="ruby">Ruby</option>
<option value="ui">UI Design</option>
<option value="ux">User Experience</option>
</select>
The question is:
Is it possible to show short names of chosen options ? I mean something like:
Options are: keyboard, mouse, monitor, laptop
After chosing options keyboard, mouse shown are: K, M
Is it possible to do it?
I am not familiar with angular or semantic, but it is fairly easy using vanilaJS. You are welcome to test this code on semantic-ui website. Choose to items in the multi-select section then run this in the console:
var items = document.querySelectorAll(".ui.label.transition.visible");
items.forEach(function(item){
var icon = document.createElement("i");
icon.className = "delete icon";
item.innerText = item.innerText[0];
item.appendChild(icon);
});
For sure to use it with angular you would like to modify my code but that is one possible approach.
I have a list of options in my select tag, and one of them has the selected attribute. When you click on the option, it opens the select dropdown and scrolls down to the option with that selected attribute, like so.
Dropdown One
Is there a way to have it so when you click the select dropdown, it doesn't scroll at all like so, without removing the selected attribute?
Dropdown Two
Here is my code.
<select id="number_id">
<option value>Select</option>
<option value="A">1</option>
<option value="B">2</option>
<option value="C">3</option>
<option value="D">4</option>
<option value="E">5</option>
<option value="F">6</option>
<option value="G">7</option>
<option value="H">8</option>
<option value="I">9</option>
<option value="J">10</option>
<option value="K">11</option>
<option value="L">12</option>
<option value="M">13</option>
<option value="N">14</option>
<option value="O">15</option>
</select>
I must have missed something very trivial, but I cant figure it out.
The select below shows 5 options (as expected), but I cant get access to option 6 and 7. The scrollbar is shown, but the browser doesnt allow me to move it down
<select size='5' multiple name='driver[]'>
<option value= >(No Driver Filter)</option>
<option value=drivername=''></option>
<option value=drivername='alex'>alex</option>
<option value=drivername='marc'>marc</option>
<option value=drivername='frank'>frank</option>
<option value=drivername='james'>james</option>
<option value=drivername='michael'>michael</option>
</select>
I think your code is not well formatted . You should use double quotes for attribute values.
<select size="5" multiple="multiple" name="driver[]">
<option value="" >(No Driver Filter)</option>
<option value="drivername=''"></option>
<option value="drivername='alex'">alex</option>
<option value="drivername='marc'">marc</option>
<option value="drivername='frank'">frank</option>
<option value="drivername='james'">james</option>
<option value="drivername='michael'">michael</option>
</select>
I need to make a long (>20 options) drop-down list in html, so I use the <select> tag. But over 20 items, Firefox (among others) will add a scrollbar, and I want all the options to be visible. I tried to play with the css overflow property, but it won't work.
Any simple html/css solution, before I surrender to Javascript?
(note: the size="n" property of the <select> tag doesn't make a drop-down list; it makes n options visible all the time: not what I want)
There isn't a way to tell the browser how many options to list before using a scroll-bar. HTML and CSS do not have anything regarding this.
If you really want this behavior, you'd have to implement your own pop-up displaying the list.
You can't do this crossbrowser, you'll have to create a custom dropdown.
This is handled on the browser side, so you can't do much about it.
One solution would be to use a jquery plugin allowing you to custom your select inputs (like this one among others : http://finalevillee.googlepages.com/jqueryplugin%3Acustomselect). this way you have a total control over how it is displayed.
A major drawback being that it doesn't have the default look and feel.
We have found a way to implement the item purely in css but it is based on javascript.
A central aspect of the idea was also to avoid conflicts with other siblings
The central component is the CSS position and transform argument, which ensure a proper positioning
Based on this answer
<style>
SELECT {
display: inline-block;
position: fixed;
transform: translate(0%, 0%);
width: 200px;
}
</style>
<script>
function selectselect(element)
{
element.size = element.options.length;
element.style.zIndex = "500";
}
function selecthide(element)
{
element.size = 0;
element.style = "";
}
</script>
<ul>
<li>
<select name="select1" onmousedown="selectselect(this)" onchange="selecthide(this)" onblur="selecthide(this)">
<option value="1">This is select number 1</option>
<option value="2">This is select number 2</option>
<option value="3">This is select number 3</option>
<option value="4">This is select number 4</option>
<option value="5">This is select number 5</option>
<option value="6">This is select number 6</option>
<option value="7">This is select number 7</option>
<option value="8">This is select number 8</option>
<option value="9">This is select number 9</option>
<option value="10">This is select number 10</option>
<option value="11">This is select number 11</option>
<option value="12">This is select number 12</option>
<option value="13">This is select number 13</option>
<option value="14">This is select number 14</option>
<option value="15">This is select number 15</option>
<option value="16">This is select number 16</option>
<option value="17">This is select number 17</option>
<option value="18">This is select number 18</option>
<option value="19">This is select number 19</option>
<option value="20">This is select number 20</option>
<option value="21">This is select number 21</option>
<option value="22">This is select number 22</option>
<option value="23">This is select number 23</option>
<option value="24">This is select number 24</option>
</select>
</li>
<li>
<select name="select1" onmousedown="selectselect(this)" onchange="selecthide(this)" onblur="selecthide(this)">
<option value="1">This is select number 1</option>
<option value="2">This is select number 2</option>
<option value="3">This is select number 3</option>
<option value="4">This is select number 4</option>
<option value="5">This is select number 5</option>
<option value="6">This is select number 6</option>
<option value="7">This is select number 7</option>
<option value="8">This is select number 8</option>
<option value="9">This is select number 9</option>
<option value="10">This is select number 10</option>
<option value="11">This is select number 11</option>
<option value="12">This is select number 12</option>
<option value="13">This is select number 13</option>
<option value="14">This is select number 14</option>
<option value="15">This is select number 15</option>
<option value="16">This is select number 16</option>
<option value="17">This is select number 17</option>
<option value="18">This is select number 18</option>
<option value="19">This is select number 19</option>
<option value="20">This is select number 20</option>
<option value="21">This is select number 21</option>
<option value="22">This is select number 22</option>
<option value="23">This is select number 23</option>
<option value="24">This is select number 24</option>
</select>
</li>
</ul>