I have a requirement which is based on open a "Select" with a lot of options but it should start the selection in the half of the list without select that value in which the component was started
<select>
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
<option value="4">value 4</option>
<option value="5">value 5</option>
<option value="6">value 6</option>
<option value="7">value 7</option>
<option value="8">value 8</option>
<option value="9">value 9</option>
<option value="10">value 10</option>
When the user opens the list it should start in the middle without select that option, see how the middle option is just focused but not selected:
It's there any way to achieve this using jQuery?
Disclaimer: Styling <select> is tricky business. Tested in Chrome, FF, Edge, Windows10
document.querySelectorAll("select[size]").forEach(EL => {
const h = EL.scrollHeight / EL.options.length; // option height
const i = Math.floor(EL.options.length / 2); // Index of the half-way option
const s = Math.floor(EL.size / 2); // Get the size (also half-way)
EL.options[i].classList.add("highlight"); // (PS: this is bad UX)
EL.scroll(0, h * (i - s));
});
select option.highlight {
background: #0bf;
color: #fff;
}
<select size="3">
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
<option value="4">value 4</option>
<option value="5">value 5</option>
<option value="6">value 6</option>
<option value="7">value 7</option>
<option value="8">value 8</option>
<option value="9">value 9</option>
<option value="10">value 10</option>
</select>
NOTE: The CSS-.highlight option might be a really bad UI and lead to people thinking that that option is actually selected while it's clearly not.
Avoid doing stuff that users are not used to see in the web world.
Therefore: instead of doing
EL.options[i].classList.add("highlight"); // (PS: this is bad UX)
rather do:
EL.options[i].selected = true;
Related
On load, how to select second option using selectize plugin?
https://github.com/selectize/selectize.js
As per below example, it have to select 21-Nov-2017.
I can able to select option using value.. but, this value will be dynamic and will change daily.
Thanks
HTML:
<select>
<option value="20-Nov-2017">20-Nov-2017</option>
<option value="21-Nov-2017">21-Nov-2017</option>
<option value="22-Nov-2017">22-Nov-2017</option>
</select>
You can select the second value on the basis of index like this
$('#selectBox :nth-child(2)').prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectBox">
<option value="0">Number 0</option>
<option value="1">Number 1</option>
<option value="2">Number 2</option>
<option value="3">Number 3</option>
<option value="4">Number 4</option>
<option value="5">Number 5</option>
<option value="6">Number 6</option>
<option value="7">Number 7</option>
</select>
In version 1.6 and higher the prop() method is recommended:
$('.selDiv option:eq(1)').prop('selected', true)
In older versions:
$('.selDiv option:eq(1)').attr('selected', 'selected')
I need to test select box values using javascript. But Its outputs the previous value on click, don't know what would be the case.
Here's my code:
$(document).ready(function(){
$('select').click(function(){
var id = this.id;
var text = $('#'+id+' :selected').text();
alert(text);
});
});
<select id="combo">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
<option value="5">Test 5</option>
<option value="6">Test 6</option>
<option value="7">Test 7</option>
</select>
I gave the static id for testing purpose, but in real I want to take out the id from select box.
My question is, how can I get the exact value output(HTML) of options on click.
$(document).ready(function(){
alert($('#combo').val());
alert($('#combo option:selected').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="combo">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
<option value="5">Test 5</option>
<option value="6">Test 6</option>
<option value="7">Test 7</option>
</select>
You can use $('select').val(). This will give you the select field value. Listen for change event to capture the changes.
Here is the common and easy approach:
$("#combo").change(function(){
var selectedvalue = $( "#combo option:selected" ).text();
});
I have a global select box on the page that I want to use to set all of the other select boxes on the page. They all have the same options in them.
So when I change the global drop down, how do I set all of the other ones to the same value.
All of my other select boxes have an id that starts with "inventory_location_select_"
$("#global_location").change(function(){
var globalValue = $("#global_location").val();
$("input[id^=inventory_location_select_]").val(globalValue);
});
Here is my html:
Main Select Box:
<select id="global_location">
<option selected="selected">Choose Option</option>
<option value="3542">Acme Pos 1</option>
<option value="3545">Acme Pos 2</option>
<option value="4892">Acme Test 1234567890</option>
<option value="4896">FBA CA Prep</option>
<option value="4889">FBA Prep 1</option>
<option value="4895">FBA Prep 2</option>
<option value="4897">FBA Prep 3</option>
<option value="4893">POD 3 Area 1</option>
</select>
One of my other boxes:
<select id="inventory_location_select_1">
<option>Choose Option</option>
<option value="3542">Acme Pos 1</option>
<option value="3545">Acme Pos 2</option>
<option value="4892">Acme Test 1234567890</option>
<option value="4896">FBA CA Prep</option>
<option value="4889">FBA Prep 1</option>
<option value="4895">FBA Prep 2</option>
<option value="4897">FBA Prep 3</option>
<option value="4893">POD 3 Area 1</option>
</select>
This seems so easy, I just cant figure it out.
The selector is wrong, you are trying to select input elements:
$("select[id^=inventory_location_select_]").val(globalValue);
Change:
$("input[id^=inventory_location_select_]").val(globalValue);
to
$("[id^=inventory_location_select_]").val(globalValue);
Your elements are selects, but you tried to change inputs. Either way you don't need to necessarily specify them. If you need to, use $("select[id^=inventory_location_select_]").val(globalValue);
jsFiddle example
Suppose
<select class="csrSelect" id="queueSelect">
<option value="">Select Another Queue to Manage</option>
<option value="1">Store 1</option>
<option value="2">Store 2</option>
<option value="3">Store 3</option>
<option value="4">Store 4</option>
<option value="5">Store 5</option>
<option value="6">Store 6</option>
</select>
and the css class 'csrSelect' has implemented heapbox on this select box. Now i want to call an onChange event like:
<select class="csrSelect" id="queueSelect" onChange="Changed()">
<option value="">Select Another Queue to Manage</option>
<option value="1">Store 1</option>
<option value="2">Store 2</option>
<option value="3">Store 3</option>
<option value="4">Store 4</option>
<option value="5">Store 5</option>
<option value="6">Store 6</option>
</select>
But it is not working.Please Help me.
You just need to use heapbox events.You should use heapbox onchange event in your purpose.
$(".mySelect").heapbox({
'onChange':function(){},
'openStart':function(){},
'openComplete':function(){},
'closeStart':function(){},
'closeComplete':function(){},
});
You can read documentation from http://www.bartos.me/heapbox/
Its working perfect..
Enjoy...
You can setup heapbox to trigger events of original elements this way:
$('select').heapbox({
"onChange":function(val, elm) {
elm.trigger('change');
}
});
Paul here. I'm new to JavaScript and trying to build an alarm clock similar to that described in this question:
Why does my alarmclock script stop working?
Working demo from Whakkee: http://www.obviousmatter.com/testso/hours2.html
However I would like to use dropdown select instead of text input.
(my demo of what I mean by 'dropdown select', this is not a working example)
http://paulodonovan.net/Experiments/JavaScript/rise-and-shine/rise-and-shine_0.2.html
For an experiment I tried substituting 'text input' with 'select with options' but I don't know how to integrate the select:
<html>
<body>
<div>
<form name="frm">
<select name="hour">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
</select>
<select name="mins">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
<input type="button" value="Set Alarm" onclick="justonce=1;">
</form>
<font color=#660000 size=20 face=Tahoma><span id="hours"></span></font>
</div>
</body>
</html>
<script type="text/javascript">
obj_hours=document.getElementById("hours");
justonce=0;
function wr_hours()
{
time=new Date();
time_min=time.getMinutes();
time_hours=time.getHours();
time_wr=((time_hours<10)?"0":"")+time_hours;
time_wr+=":";
time_wr+=((time_min<10)?"0":"")+time_min;
obj_hours.innerHTML=time_wr;
if (justonce==1 && frm.mins.value==time_min && frm.hour.value==time_hours) {
alert('Hello. Rise and Shine. :-)');
justonce=0;
}
}
setInterval("wr_hours();",1000);
</script>
That doesn't work, any thoughts why? Perhaps I need to use index?
I was hoping to personalize this project a bit and also add some other features, e.g.
Select a Youtube Video to play as alert, from a list of 10 songs and by pasting a url. I found a similar example in terms of features, but the code is very complex to my eyes..: http://onlineclock.net/video/
'German time mode' checkbox: '(everything is 10min earlier so you'll never be late.)'
If time permits:
- Checkbox to 'Vintage Style' switching on an alternative CSS style sheet. That could include an analogue alarm clock I can built in CSS.
Of course I would rather understand and will write from scratch, I don't expect anyone to build it for me but any pointers to relevant tutorials or techniques etc. would be much appreciated.
Thanks, Paul
This question seems to me, to be
Part 1
How can I get the chosen value from a <select>?
The easiest way is to give the <select> an id attribute, for example
<select id="foobar">
<option value="00">00</option>
<option value="01">01</option>
</select>
Now, in your JavaScript, you can access the chosen value using the following code
document.getElementById('foobar').value;
Remember that an id must be unique for the whole page.
Part 2
How can I subtract 10 minutes from the time?
The current code you're using doesn't use a Date object for user's selection nor use Number s, it uses String s (as <option> values). This means that to subtract 10 minutes you'll have to use one (or do something excessively complicated). As you're not using Date in this, I'll avoid it in my answer (though you might want to consider learning about it anyway).
To do what you want you'll need to add a couple more steps. In the following, form_min and form_hours are the user's selected times.
Step 1. Convert minutes and hours to Number.
form_min = parseInt(form_min, 10);
form_hours = parseInt(form_hours, 10);
Step 2. Subtract 10 minutes
form_min = form_min - 10;
Step 3. If minutes are negative, subtract 1 hour and add 60 minutes.
if (form_min < 0) {
form_hours = form_hours - 1;
form_min = form_min + 60;
}
Step 4. Convert back to String.
form_min = (form_min < 10 ? "0" : "") + form_min;
form_hours = (form_hours < 10 ? "0" : "") + form_hours;
If you work with .selectedIndex (60 options starting from 0 for minutes, etc) you can skip Step 1 as you will have the value as a Number due to the fact the option value matches the option's index in this context.
Add id attribute to: <select id="hours" name="hours">
This is how you need to get the value from the hours drop down:
var hourField = document.getElementById("hours");
var obj_hours = hourField.options[hourField.selectedIndex].value;
You may need to do the same in your mins dropdown box too.