Disable Option 2 when Option 1 is selected - javascript

I need to adapt some code I've used for a website I'm creating for a school I work for, to disallow certain options to be selected at the same time.
The user is presented the following HTML drop down list 6 times:
<select type="select" name="optRes2" select id="optRes2">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing">Computing</option>
<option value="Drama">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles">Textiles</option>
</select>
The user should NOT be able to select both Art and Textiles at the same time. They can select EITHER Art OR Textiles - but not both.
For example: User selects 'Art' in opt1, so Textiles is disabled in the remaining 5 menus. If the user goes back and deselects Art, Textiles should then be enabled throughout. Hopefully you understand what I mean.
I already have the code to prevent the same option being selected multiple times:
$(function() {
$('select').change(function(){
if($(this).attr('id') == 'opt1' && $(this).val() == 'Default'){
$('select').not(this).prop('disabled', true).val('Disabled');
} else {
$('select').not(this).removeProp('disabled');
$('select option').removeProp('disabled');
$('select').each(function() {
var val = $(this).val();
if(val != 'Default' || val != 'Disabled'){
$('select option[value="'+val+'"]').not(this).prop('disabled', true);
}
});
}
});
});
The user then clicks submit and all of this is then submit to a MySQL server for review at a later date.
Menus are named opt1, opt2, opt3, opt4, optRes1 and optRes2.
Thanks everyone,
Jack

I use a data attribute named notallowed. There you can set which value that should be disabled. And when a value is changed we also check if we previously disabled some fields and re-enable them.
$('select').change(function(){
var notAllowed = $(this).find('option:selected').data('notallowed');
var currentValue = $(this).val();
// Get the previous selected value.
var oldValue = $(this).data('old');
// Keep track of the previous selected value.
$(this).data('old', currentValue);
// Re-enabled all that was disabled by the previous selection.
if(oldValue) {
// Re-enable the old value in the other selects.
$('select').not(this).find('option[value="' + oldValue +'"]').prop('disabled', false);
// Get the option.
var previousNotAllowed = $(this).find('option[value="' + oldValue +'"]').data('notallowed');
if(previousNotAllowed){
$('select').not(this).find('option[value="' + previousNotAllowed +'"]').prop('disabled', false);
}
}
// If we selected a option with notallowed attribute we should disable that option in the other selects.
if(notAllowed){
var items = $('select').not(this).find('option[value="' + notAllowed +'"]').prop('disabled',true);
}
// Disable the current value in other selects.
$('select').not(this).find('option[value="' + currentValue +'"]').prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select type="select" name="optRes1" select id="optRes1">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art" data-notallowed="Textiles">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing" data-notallowed="Drama">Computing</option>
<option value="Drama" data-notallowed="Computing">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles" data-notallowed="Art">Textiles</option>
</select>
<select type="select" name="optRes2" select id="optRes2">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art" data-notallowed="Textiles">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing" data-notallowed="Drama">Computing</option>
<option value="Drama" data-notallowed="Computing">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles" data-notallowed="Art">Textiles</option>
</select>
<select type="select" name="optRes3" select id="optRes3">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art" data-notallowed="Textiles">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing" data-notallowed="Drama">Computing</option>
<option value="Drama" data-notallowed="Computing">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles" data-notallowed="Art">Textiles</option>
</select>

Try to add a overlapping div with id selection and then select every select and disable the chosen option on change like so:
<div id="selection">
<select type="select" name="optRes2" select id="optRes2">
<option value="" disabled selected hidden>Please select an option... </option>
<option value="Art">Art</option>
etc
</select>
<select type="select" name="optRes3" select id="optRes3">
<option value="" disabled selected hidden>Please select an option... </option>
<option value="Art">Art</option>
etc
</select>
</div>
and the script
<script type="text/JavaScript" language="JavaScript">
$( "#optRes2" ).change(function() {
$("div#selection select.select option").each(function(){
if($(this).val()== $('#optRes2').val() ){
$(this).attr("disabled","true");
}
});
});
$( "#optRes3" ).change(function() {
$("div#selection select.select option").each(function(){
if($(this).val()== $('#optRes3').val() ){
$(this).attr("disabled","true");
}
});
});
</script>

Better create options array, and work with data, not with HTML. Using this approach you will be able to stay DRY.
Think solution is clear.
<html>
<body>
<select type="select" name="optRes3" select id="optRes1">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing">Computing</option>
<option value="Drama">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles">Textiles</option>
</select>
<select type="select" name="optRes3" select id="optRes2">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing">Computing</option>
<option value="Drama">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles">Textiles</option>
</select>
<select type="select" name="optRes3" select id="optRes3">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing">Computing</option>
<option value="Drama">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles">Textiles</option>
</select>
<script>
function OptResDropdown(htmlDropdown, value) {
this.value = value;
this.dropdown = htmlDropdown;
this.options = this.initOptions(htmlDropdown.options);
var selected = htmlDropdown.options[htmlDropdown.selectedIndex];
this.value = value? value : (selected ? selected.value : 0);
var me = this;
htmlDropdown.addEventListener('change', function(event){
me.value = event.target.value;
me.update(me.value);
});
this.update();
}
OptResDropdown.instances = {};
OptResDropdown.prototype.initOptions = function(options){
var me = this;
var out = [];
for(var i = 0; i < options.length; i++) {
var option = options[i];
out.push({value: option.value, label: option.innerText});
}
return out;
};
OptResDropdown.prototype.update = function(value) {
for(var key in OptResDropdown.instances) {
var me = OptResDropdown.instances[key];
me.dropdown.innerHTML = '';
var options;
if(value === 'Art') {
options = me.options.filter(function(option){
return option.value !== 'Textiles';
});
} else if(value === 'Textiles') {
options = me.options.filter(function(option){
return option.value !== 'Art';
});
} else {
options = me.options;
}
options.forEach(function(option){
var opt = document.createElement('option');
opt.value = option.value;
opt.innerText = option.label;
me.dropdown.appendChild(opt);
})
me.dropdown.value = me.value;
}
};
var opt1 = new OptResDropdown(optRes1);
var opt2 = new OptResDropdown(optRes2);
var opt3 = new OptResDropdown(optRes3);
OptResDropdown.instances.opt1 = opt1;
OptResDropdown.instances.opt2 = opt2;
OptResDropdown.instances.opt3 = opt3;
</script>
</body>
</html>

Related

how to make subcategory required with javascript?

hello everyone i need help.
i need first selected must be select model type and must be required ?
how to make id="subcategory" required ?
required for id="subcategory" not working why ?
<select id="category" required>
<option value="">select model type</option>
<option class="Volvo" value="1">Volvo</option>
<option class="Saab" value="2">Saab</option>
<option class="Opel" value="3">Opel</option>
<option class="Audi" value="4">Audi</option>
</select>
<select id="subcategory">
<optgroup class="Volvo">
<option value="">select model type</option>
<option value="44">XC60</option>
<option value="55">XC90</option>
</optgroup>
<optgroup class="Saab">
<option value="">select model type</option>
<option value="66">Saab 9XX</option>
<option value="77">Saab Aero-X</option>
</optgroup>
<optgroup class="Opel">
<option value="">select model type</option>
<option value="88">Corsa A</option>
<option value="99">Corsa B</option>
</optgroup>
<optgroup class="Audi">
<option value="">select model type</option>
<option value="616">Audi A4</option>
<option value="717">Audi A8</option>
</optgroup>
</select>
<script>
$('#subcategory').find('optgroup').hide(); // initialize
$('#category').change(function() {
var $cat = $(this).find('option:selected');
var $subCat = $('#subcategory').find('.' + $cat.attr('class'));
$('#subcategory').find('optgroup').not("'"+ '.' + $cat.attr('class') + "'").hide(); // hide other optgroup
$subCat.show();
$subCat.find('option').first().attr('selected', 'selected');
});
</script>
Here is an idea on where I updated slightly the second select to make the select mode type outside the optgroup. You will see that you won't be able to click on send until you select both values.
You can refer to this link to understand my changes:
https://stackoverflow.com/a/6048891/8620333
$('#subcategory').find('optgroup').hide(); // initialize
$('#category').change(function() {
var $cat = $(this).find('option:selected');
var $subCat = $('#subcategory').find('.' + $cat.attr('class'));
$('#subcategory').find('optgroup').not("." + $cat.attr('class')).hide();
$subCat.show();
$('#subcategory option').removeAttr('selected');
$('#subcategory > option').attr('selected', 'selected');
//adding this will make it required
$('#subcategory').attr('required','required')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="category" required>
<option value="" disabled selected>select model type</option>
<option class="Volvo" value="1">Volvo</option>
<option class="Saab" value="2">Saab</option>
<option class="Opel" value="3">Opel</option>
<option class="Audi" value="4">Audi</option>
</select>
<select id="subcategory">
<option value="">select model type</option>
<optgroup class="Volvo">
<option value="44">XC60</option>
<option value="55">XC90</option>
</optgroup>
<optgroup class="Saab">
<option value="66">Saab 9XX</option>
<option value="77">Saab Aero-X</option>
</optgroup>
<optgroup class="Opel">
<option value="88">Corsa A</option>
<option value="99">Corsa B</option>
</optgroup>
<optgroup class="Audi">
<option value="616">Audi A4</option>
<option value="717">Audi A8</option>
</optgroup>
</select>
<input type="submit" value="send">
</form>

Ignore 1st option from multiple select box-jquery

I have multiple select box with same options which are mutually exclusive .For example if select box A and select box B has option1 ,option2 and option 3 , Then if I select option1 for select box A, then it should not be available on select box B
My demonstration
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
$('.alert_type').change(function() {
var selected_value=$(this).val();
$(".alert_type option[value='" + selected_value + "']").not(this.selectedOptions[0]).hide();
});
But I want to make 1st option as exception i.e <option value="">Select below</option> as I need flexibility to revert all the option
You can see on fiddle below , if I select option1 from select box 1 ,"select below" from option 3 is also removed which I want to put in exception
Fiddle
https://jsfiddle.net/timus2001/rbuyk7na/3/
When I try with
$(".alert_type option").show();
to show all at first it is not mutually exclusive any more (see the picture)
Ok. let me see if I get you this time:
$('.alert_type').change(function() {
var selected_values = [],
iteration;
$(".alert_type option").show();
$(".alert_type").each(function(){
iteration = $(this).find('option:selected').val();
if ( iteration !== "" ) {
selected_values.push( iteration );
}
})
for ( var i = 0; i < selected_values.length; i++ ) {
$(".alert_type option[value='"+ selected_values[i] +"']").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="select" class="alert_type">
<option selected>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
This is what you need:
$('select.alert_type').on('change keyup',function() {
var val = $(this).val();
$('select.alert_type option').prop('disabled',false);
$(this).siblings().find('option[value='+val+']').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
Good luck :D

How to make select appear one after one in JS?

I am new in JS and I need some help. I want my 2-nd selectto appear only if the first one is already chosen, the 3-th select to appear after the second choise is done and the submit button to appear after the third choise is done.Is it possible to do that using a loop ?
<style>
select{float:left}
#month,#day,input{display:none}
</style>
<select required id='year' class='selectOption' onchange='select(this)'>
<option value=""> Select year</option>
<option value="">2016</option>
<option value="">2015</option>
<option value="">2014</option>
<option value="">2013</option>
<option value="">2012</option>
<option value="">2011</option>
<option value="">2010</option>
<option value="">2009</option>
<option value="">2008</option>
<option value="">2007</option>
</select>
<select required id='month' class='selectOption' onchange='select(this)'>
<option value=""> Select month</option>
<option value="">January</option>
<option value="">February</option>
<option value="">March</option>
<option value="">April</option>
<option value="">May</option>
<option value="">June</option>
<option value="">July</option>
<option value="">August</option>
<option value="">September</option>
<option value="">October</option>
<option value="">November</option>
<option value="">December</option>
</select>
<select required id='day' class='selectOption' onchange='select(this)'>
<option value="">Select Day</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>
<input type="submit" class='selectOption'>
</form>
function select(par) {
var i = 0;
var x = document.getElementsByClassName('selectOption');
if (par.selectedIndex !== "0" && i<x.length) {
x[i++].style.display = 'block';
}
}
</script>
you can achieve this by hiding all select but the first one on page load and displaying them one by one after selecting the previous select.
<select required id='month' class='selectOption hide' onchange='select(this)'>
<select required id='day' class='selectOption hide' onchange='select(this)'>
plunker : http://plnkr.co/edit/oKwq0q4IB5poKuUOa6oG?p=preview
Define your function like this.
function select(par) {
if (par.selectedIndex !== 0) {
par.nextElementSibling.className = "selectOption";
}
}

Get or Set Value(s) on A Multi-select Form Field

When you have a multi-select form field such as the following, how do you get, and set the selected option values?
<select class="items" multiple="multiple" size="5">
<option value="apple">apple</option>
<option value="ant">ant</option>
<option value="ape">ape</option>
<option value="age">age</option>
<option value="boy">boy</option>
<option value="banana">banana</option>
<option value="carrot">carrot</option>
</select>
Getting the value(s)
var items = [];
$('select.items option:selected').each(function() {
items.push( this.value );
});
Is this the only way to get the array of values or is there a sleeker way?
Setting the value(s)
var items = ['apple', 'ape', 'carrot'];
$.each(items, function() {
$('select.items option[value="' + this + '"]').prop('selected', true);
});
Is there a sleeker way to do this?
It's quite straight-forward to get the selected values array; use the jQuery .val() method.
var items = $('select.items').val();
//sample result: ["apple","ape","boy","daisy","eagle"]
Please note that JavaScripts value property, which works well for other form fields, returns just the first selected value
function out( v ) {
$('pre.out').text( JSON.stringify( v ) );
}
$('select.items').on('change', function() {
out( $(this).val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="items" multiple="multiple" size="5">
<option value="apple">apple</option>
<option value="ant">ant</option>
<option value="ape">ape</option>
<option value="age">age</option>
<option value="boy">boy</option>
<option value="banana">banana</option>
<option value="carrot">carrot</option>
<option value="cat">cat</option>
<option value="daisy">daisy</option>
<option value="desk">desk</option>
<option value="elephant">elephant</option>
<option value="eagle">eagle</option>
<option value="fox">fox</option>
<option value="fat">fat</option>
<option value="goat">goat</option>
<option value="good">good</option>
<option value="gum">gum</option>
<option value="hut">hut</option>
<option value="hop">hop</option>
<option value="insect">insect</option>
<option value="ice">ice</option>
<option value="jump">jump</option>
<option value="kite">kite</option>
<option value="lamp">lamp</option>
<option value="lap">lap</option>
<option value="monkey">monkey</option>
<option value="mat">mat</option>
<option value="nature">nature</option>
<option value="nose">nose</option>
<option value="owl">owl</option>
<option value="pocket">pocket</option>
<option value="pick">pick</option>
<option value="quote">quote</option>
<option value="rabbit">rabbit</option>
<option value="run">run</option>
<option value="soft">soft</option>
<option value="sit">sit</option>
<option value="table">table</option>
<option value="toy">toy</option>
<option value="understand">understand</option>
<option value="vote">vote</option>
<option value="winter">winter</option>
<option value="xmas">xmas</option>
<option value="yes">yes</option>
<option value="zoo">zoo</option>
</select>
<pre class="out"></pre>
To set the selected values also requires no looping. Use the same jQuery .val() method.
$('select.items').val( ['apple','ape','boy','age','eagle'] );
$('button.set').on('click', function() {
$('select.items').val( ['apple','ape','boy','age','eagle'] );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="items" multiple="multiple" size="5">
<option value="apple">apple</option>
<option value="ant">ant</option>
<option value="ape">ape</option>
<option value="age">age</option>
<option value="boy">boy</option>
<option value="banana">banana</option>
<option value="carrot">carrot</option>
<option value="cat">cat</option>
<option value="daisy">daisy</option>
<option value="desk">desk</option>
<option value="elephant">elephant</option>
<option value="eagle">eagle</option>
<option value="fox">fox</option>
<option value="fat">fat</option>
<option value="goat">goat</option>
<option value="good">good</option>
<option value="gum">gum</option>
<option value="hut">hut</option>
<option value="hop">hop</option>
<option value="insect">insect</option>
<option value="ice">ice</option>
<option value="jump">jump</option>
<option value="kite">kite</option>
<option value="lamp">lamp</option>
<option value="lap">lap</option>
<option value="monkey">monkey</option>
<option value="mat">mat</option>
<option value="nature">nature</option>
<option value="nose">nose</option>
<option value="owl">owl</option>
<option value="pocket">pocket</option>
<option value="pick">pick</option>
<option value="quote">quote</option>
<option value="rabbit">rabbit</option>
<option value="run">run</option>
<option value="soft">soft</option>
<option value="sit">sit</option>
<option value="table">table</option>
<option value="toy">toy</option>
<option value="understand">understand</option>
<option value="vote">vote</option>
<option value="winter">winter</option>
<option value="xmas">xmas</option>
<option value="yes">yes</option>
<option value="zoo">zoo</option>
</select>
<button class="set">SET</button>

Center a drop-down select scroll bar to the selected item

I have a drop-down selector with a large amount of items. I want to center scroll the box when it gets opened to have the selected item centered in the middle of it.
Here's a picture to show what I want, except I'm looking to do this in a drop-down list selector.
Here's an example of the dropdown I'm using:
<select name="EndTime" id="endTime">
<option value="00:00">12:00am</option>
<option value="00:15">12:15am</option>
<option value="00:30">12:30am</option>
<option value="00:45">12:45am</option>
<option value="01:00">1:00am</option>
<option value="01:15">1:15am</option>
<option value="01:30">1:30am</option>
<option value="01:45">1:45am</option>
<option value="02:00">2:00am</option>
<option value="02:15">2:15am</option>
<option value="02:30">2:30am</option>
<option value="02:45">2:45am</option>
<option value="03:00">3:00am</option>
<option value="03:15">3:15am</option>
<option value="03:30">3:30am</option>
<option value="03:45">3:45am</option>
<option value="04:00">4:00am</option>
<option value="04:15">4:15am</option>
<option value="04:30">4:30am</option>
<option value="04:45">4:45am</option>
<option value="05:00">5:00am</option>
<option value="05:15">5:15am</option>
<option value="05:30">5:30am</option>
<option value="05:45">5:45am</option>
<option value="06:00">6:00am</option>
<option value="06:15">6:15am</option>
<option value="06:30">6:30am</option>
<option value="06:45">6:45am</option>
<option value="07:00">7:00am</option>
<option value="07:15">7:15am</option>
<option value="07:30">7:30am</option>
<option value="07:45">7:45am</option>
<option value="08:00">8:00am</option>
<option value="08:15">8:15am</option>
<option value="08:30">8:30am</option>
<option value="08:45">8:45am</option>
<option value="09:00">9:00am</option>
<option value="09:15">9:15am</option>
<option value="09:30">9:30am</option>
<option value="09:45">9:45am</option>
<option value="10:00">10:00am</option>
<option value="10:15">10:15am</option>
<option value="10:30">10:30am</option>
<option value="10:45">10:45am</option>
<option value="11:00">11:00am</option>
<option value="11:15">11:15am</option>
<option value="11:30">11:30am</option>
<option value="11:45">11:45am</option>
<option value="12:00">12:00pm</option>
<option value="12:15">12:15pm</option>
<option value="12:30">12:30pm</option>
<option value="12:45">12:45pm</option>
<option value="13:00">1:00pm</option>
<option value="13:15">1:15pm</option>
<option value="13:30">1:30pm</option>
<option value="13:45">1:45pm</option>
<option value="14:00">2:00pm</option>
<option value="14:15">2:15pm</option>
<option value="14:30">2:30pm</option>
<option value="14:45">2:45pm</option>
<option value="15:00">3:00pm</option>
<option value="15:15">3:15pm</option>
<option value="15:30">3:30pm</option>
<option value="15:45">3:45pm</option>
<option value="16:00">4:00pm</option>
<option value="16:15">4:15pm</option>
<option value="16:30">4:30pm</option>
<option value="16:45">4:45pm</option>
<option value="17:00">5:00pm</option>
<option value="17:15">5:15pm</option>
<option value="17:30">5:30pm</option>
<option value="17:45">5:45pm</option>
<option value="18:00" selected="selected">6:00pm</option>
<option value="18:15">6:15pm</option>
<option value="18:30">6:30pm</option>
<option value="18:45">6:45pm</option>
<option value="19:00">7:00pm</option>
<option value="19:15">7:15pm</option>
<option value="19:30">7:30pm</option>
<option value="19:45">7:45pm</option>
<option value="20:00">8:00pm</option>
<option value="20:15">8:15pm</option>
<option value="20:30">8:30pm</option>
<option value="20:45">8:45pm</option>
<option value="21:00">9:00pm</option>
<option value="21:15">9:15pm</option>
<option value="21:30">9:30pm</option>
<option value="21:45">9:45pm</option>
<option value="22:00">10:00pm</option>
<option value="22:15">10:15pm</option>
<option value="22:30">10:30pm</option>
<option value="22:45">10:45pm</option>
<option value="23:00">11:00pm</option>
<option value="23:15">11:15pm</option>
<option value="23:30">11:30pm</option>
<option value="23:45">11:45pm</option>
</select>
I'm sure there's a better way of doing this, but it does work
HERE
$('#listF').click(function() {
var n = 10;
var val = this.selectedIndex;
if ((this.selectedIndex < ($(this).find('option').length - n)) && (this.selectedIndex > n)) {
this.selectedIndex += n;
this.selectedIndex -= (2 * n);
this.selectedIndex += n;
} else {
this.selectedIndex = ((this.selectedIndex<n)?0:99);
this.selectedIndex = val;
}
});
Edit: Adding a check before updating the selectedIndex so that you can select the last n( 10 here) items as well.
Edit2: Fixing the bug pointed out by rolfv1
I made this small example to give you an idea how to do this, what you basically do is that you first select the item that will be at the bottom of the list when you have the desired item in the middle, so in your image, first select the item "T3", and then select the actual desired item, see this Fiddle as the example:
http://jsfiddle.net/rolfv1/RZeLN/1/
<form name="form">
<select size=6 name="list">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
<option value="g">g</option>
<option value="h">h</option>
<option value="i">i</option>
<option value="j">j</option>
<option value="k">k</option>
<option value="l">l</option>
<option value="m">m</option>
</select>
<input type="button" onclick="choose();" value="select" />
</form>
and the test function in this case is just:
function choose(){
document.form.list.value="k";
document.form.list.value="i";
}
Of course the script and everything would have to be adjusted to your needs, but it shows the idea I hope
So as I mentioned in my comment, I upgraded the script of tewathia a bit (so most credits go to him), so now the script works both when navigating up and down in the list, and it will always try to put the selected item as close to the center as possible:
$('#listF').click(function(){
var n = 10;
if(this.selectedIndex+n+1 > ($(this).find('option').length)){
n=$(this).find('option').length-this.selectedIndex-1;
}
if(this.selectedIndex < n){
n=this.selectedIndex;
}
this.selectedIndex-=n;
this.selectedIndex+=2*n;
this.selectedIndex-=n;
});

Categories