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>
Related
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
i have problem in javascript
i make carwebsite
i need to achieve functionality as per the image
when I choose company in "make" select box,
it shows me all classes. Then I need to choose a "class" from second dropdown and it should show me all Models
now i get one code
<script type="text/javascript">
$(document).ready(function(){
$('.car').change(function()
{ getcar = $(this).val();
//console.log(getcar);
$('.subcar').hide();
$('.'+getcar).show();
}); });
// end DOM
</script>
this is select (make)
<select name="car" class="car">
<option value="0" SELECTED="SELECTED">--Choose--</option>
<option value="Acura">Acura</option>
<option value="Alfa_Romeo">Alfa Romeo</option>
<option value="Aston_Martin">Aston Martin</option>
<option value="Audi">Audi</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
<option value="Can_Am">Can Am</option>
<option value="Chery">Chery</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Citroen">Citroen</option>
<option value="Daihatsu">Daihatsu</option>
<option value="Dodge">Dodge</option>
<option value="Ducati">Ducati</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="GMC">GMC</option>
</select>
this is select (class)
<select name="branch_name" class="subcar Acura" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="CL">CL</option>
<option value="CSX">CSX</option>
<option value="EL">EL</option>
<option value="ILX">ILX</option>
<option value="ZDX">ZDX</option></select>
<select name="branch_name" class="subcar Alfa_Romeo" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="101">101</option>
<option value="156">156</option>
<option value="156CROSSWAGON">156CROSSWAGON</option>
<option value="Spider">Spider</option>
</select>
<select name="branch_name" class="subcar Aston_Martin" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="DB9">DB9</option>
<option value="Healey">Healey</option>
<option value="Vantage">Vantage</option>
</select>
how can i make third select
???
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";
}
}
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>
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;
});