When I click on the focus button I want the select box to automatically scroll and then show the selected option.I am unable to achieve it using focus. Is there any javascript or jQuery method which can help me fix this ?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-2.1.4.js"></script>
<script>
$(document).ready(function () {
$("#focus").click(function () {
$("select#selectId").find(":selected").focus();
});
});
</script>
</head>
<body>
<select title="Title" id="selectId" style="width: 143px; height: 125px; overflow: scroll;" multiple="multiple">
<option value="1">1 </option>
<option value="2">2 </option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</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="31">31</option></select>
<button type="button" id="focus">focus on selected</button>
</body>
</html>
You can use scrollIntoView() DOM method:
$(document).ready(function () {
$("#focus").click(function () {
$("#selectId").focus().find(":selected")[0].scrollIntoView();
});
});
EDIT: doesn't work on IE11 (other vs???)
$(document).ready(function () {
$("#focus").click(function () {
var indx = $("select#selectId").find(":selected").index();
$('#selectId').animate({
scrollTop: indx * 14
}, 500);
});
});
You can also use this, you can able to control scroll speed here.
I wrote a simple script . This is a better answer because in my case, the contents of the select change dynamically so the scroll height is not a constant. Fiddle link : https://jsfiddle.net/962vxk4f/
$(document).ready(function () {
$("#focus").click(function (e) {
$selectId = $("#selectId");
var $index = $selectId.find(":selected").index();
var lastPos = 0;
$selectId.children().each(function () { lastPos++; });
var currScrollPos = ($index / lastPos) * parseInt($selectId[0].scrollHeight);
$selectId.scrollTop(currScrollPos);
});
});
Related
i got a for loop and i would like to manipulate the counter i with a input on screen. Below i can select from 1 to 10 and i want this selection to get replaced by the counter in the loop. That means when i choose 2, then i should be 2. I started with the code below, but document.getElementById('options').innerHTML = "i"; seems to be the wrong code to manipulate. Thanks so much for your help!
<select id="options" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
for (i=0, i<someArray; i++){
do somethingWith[i];}
document.getElementById('options').innerHTML = "i";
You need to get the value of the select element and assign that to i.
var i = document.querySelector('#options').value;
for(i < someArray; i++){
//code
}
Add this to HTML
<select onChange="doWork(this)">
In Js
function doWork(obj){
obj.innerHTML = obj.value
}
If want to do some thing on selection, use onchange method with select to trigger a function every time you are selecting an option.
<select id="options" size="1" onchange="myFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<p id="demo"></p>
<script>
function myFunction() {
var selectedValue = document.getElementById("options").value;
var somethingWith = [];
for (i=0; i < selectedValue; i++){
somethingWith.push(i);
}
document.getElementById('demo').innerHTML = somethingWith;
}
</script>
But if you only want to dynamically select an option in select tag, this might help
Select your favorite fruit:
<select id="mySelect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
<button type="button" onclick="myFunction()">banana</button>
<script>
function myFunction() {
document.getElementById("mySelect").value = "banana";
}
</script>
If a have several selects how can i run a jquery function when all selects have changed and not just the first i choose?
I have this html:
<div class="container">
<select name="talla1" class="talla1">
<option value="none">Select</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
<select name="talla2" class="talla1">
<option value="none">Select</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
<select name="talla3" class="talla1">
<option value="none">Select</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
</div>
With this jQuery function:
$('.container select').change(function() {
alert('changed');
});
but this fires the alert only when change the first select and i want to do it once all selects inside the container have changed its value and i when return to default in any select run other function, was i clear enough?
thanks in advance
You can keep a record of changes on each select and use that value to see if all 3 are changed.
var eventArray = [];
$('.container select').on('change',function(){
indexOfSelect = $('.container select').index( $(this) );
if($.inArray(indexOfSelect, eventArray) == -1)
eventArray.push( '' + indexOfSelect + '' );
if(eventArray.length == $('.container select').length)
alert('All changed');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
<select name="talla1" class="talla1">
<option value="none">Select</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
<select name="talla2" class="talla1">
<option value="none">Select</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
<select name="talla3" class="talla1">
<option value="none">Select</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
</div>
Change your jquery code to this :
$(".talla1").each(function(){
$(this).change(function(){
//alert('called');
$(this).addClass('active');
if($(".container").find('.active').length == $(".talla1").length){
alert('finish');
}
});
});
Here is the working fiddle.
Do tell if it worked.
Happy Coding.
when a class is added to multiple elements its event is binded to every element and the class works for all. simply give a common class to all your select on which you want to fire a event
<script>
$(document).ready(function() {
change_count = 0;
$("select.talla1").on('change', function(event) {
change_count++;
if($("select.talla1").length == change_count){
alert("all changed");
}
});
});
</script>
this works for all the select which has class talla1
I want to change the fonts and size of the text dynamically
but I don't see any answer in the browser and also no errors in my code
this is demo
html:
<body>
<form id="texteditor">
<select id="font">
<option value="School">School</option>
<option value="SansitaOne">SansitaOne</option>
<option value="oliver">oliver</option>
<option value="JuraLight">Jura-Light-webfont</option>
<option value="Jura">Jura-DemiBold-webfont</option>
<option value="DJGROSS">DJGROSS-webfont</option>
<option value="College">College</option>
<option value="BYekan">BYekan</option>
<option value="BRoya">BRoya</option>
<option value="BMitraBold">BMitraBold</option>
<option value="BMitra">BMitra</option>
</select>
<select id="size">
<option value="7">7</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="17">17</option>
<option value="20">20</option>
</select>
</form>
<textarea class="changeme">this is my text example !!!</textarea>
</body>
jquery :
$("#font").change(function() {
//alert($(this).val());
$('.changeMe').css("font-family", $(this).val());
});
$("#size").change(function() {
$('.changeMe').css("font-size", $(this).val() + "px");
});
Aside from not including jQuery in the example, you had a typo.
$('.changeMe') should be $('.changeme')
UPDATED EXAMPLE HERE
$("#font").change(function() {
$('.changeme').css("font-family", $(this).val());
});
$("#size").change(function() {
$('.changeme').css("font-size", $(this).val() + "px");
});
HTML
<select id="my-select" multiple="multiple" size="8" style="width:200px">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</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>
</select>
JQUERY
$('#my-select option').on('click',function(){
var count = $('#my-select').find('option:selected').length;
$('#dg').html(count);
if(count>10){
$(this).attr('selected',false);
alert('limit 10');
}
});
http://jsfiddle.net/LxNMm/
When you click on the options, calculate count of selected options and limit it to 10, but if you click on the options with pressing shift key and select a range, selection could be greater than 10. How can a detect count of selected options when select a range with pressing shift key
You can try updating the values this way:
$('#my-select').on('change', function () {
var count = $(this).find('option:selected').length;
$('#dg').html(count);
if (count > 10) {
$('option:gt(9)', this).attr('selected', false);
count = $(this).find('option:selected').length;
$('#dg').html(count);
alert('error');
}
});
Your updated demo fiddle
Don't use the click event of the <option />s but the change event of the <select />
$('#my-select').on('change', function () {
var count = $(this).find('option:selected').length;
$('#dg').html(count);
if (count > 10) {
$(this).find("option").prop('selected', false);
alert('error');
}
})
fiddle
I have problem with disabling some value from option field. I try to disable all the values who is less than value from another div field. My code looks like this:
<div id="cur-hour">09</div>
<select id="time_to_hour" class="select">
<option value="">---</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</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>
</select>
And I have this js code:
$(function(){
if($("#time_from_hour > option").val() < $("#cur-hour").val()) {
$('#time_from_hour > option').prop('disabled', true);
}
});
But it didn't work - here is jsfiddle: http://jsfiddle.net/qhPp7/36/
$(function(){
var n=parseInt($("#cur-hour").html());
$("#time_to_hour option").each(function(){
if(parseInt($(this).val()) < n ) {
$(this).prop('disabled', true);
}
});
});
http://jsfiddle.net/qhPp7/38/
Your condition won't work because the value of option tag is a string.
Also val() is not used for divs, so instead use .html() or .text()
Also it has to parsed as integer
try this
$(function(){
var options = document.getElementById('time_to_hour').options;
var chk = document.getElementById('cur-hour').innerHTML;
for(var o=0;o< options.length;o++)
{
var va = parseInt(options[o].value);
if(va!="" && va<chk)
{
alert(va);
options[o].disabled=true;
}
}
});
Kindly use span to store the value it makes easier to find it.
09
$(function(){
$('#time_to_hour option').each(function () {
if (parseInt($("#index").text()) > parseInt($(this).text())) {
this.disabled = true;
}
});
});
I hope above code will work out for you...
Here is the working example from your fiddle http://jsfiddle.net/qhPp7/35/