Suppose I have following code:
<div class="topPagination">
<select id="itemsPage" onClick="changeItems(this.value);">
<option value="0">12 Items per Page</option>
<option value="100">View All</option>
</select>
</div>
<div id="mainContent">
</div>
<div class="bottomPagination">
<select id="itemsPage" onClick="changeItems(this.value);">
<option value="0">12 Items per Page</option>
<option value="100">View All</option>
</select>
</div>
<script>
function changeItems(itemsPage) {
want to get the id of the current <select> box.
}
</script>
how to get the id of the current box. like if select top select box or if i select bottom box.
Please help me to find a solution. I know with same ids is not the porper coding standard. But i have a situation like this.
This is not a valid HTLM code, all ids should be unique
But anyway you can use this code to get second checkbox
document.querySelectorAll('checkbox')[1];
if you need to browse through specific checkboxes, set them all some special class and use
document.querySelectorAll('.special_checkbox')[1];
If you "want to get the id of the current box", it will always be "itemsPage".
Having 2 objects in the DOM with the same ID is not valid HTML.
However, if you can change the DOM but can't change the IDs for some reason, you could do something like this:
<select id="itemsPage" onClick="changeItems(this);">
and then make your function:
function changeItems(select) {
// "select" is your element
// "select.value" is your value (that used to be passed in as "itemsPage"
}
Ultimately you should try and change one of the IDs, or use classes instead.
Try utilizing HTMLElement.dataset to substitute duplicate ids ; data-id="itemsPage-1" for first id=itemsPage ; data-id="itemsPage-2" for secondid=itemsPage ; pass selected element dataset.id at onClick event onClick="changeItems(this.value, this.dataset.id);"
function changeItems(itemsPage, id) {
console.log(itemsPage, id)
}
<div class="topPagination">
<select data-id="itemsPage-1" onClick="changeItems(this.value, this.dataset.id);">
<option value="0">12 Items per Page</option>
<option value="100">View All</option>
</select>
</div>
<div id="mainContent">
</div>
<div class="bottomPagination">
<select data-id="itemsPage-2" onClick="changeItems(this.value, this.dataset.id);">
<option value="0">12 Items per Page</option>
<option value="100">View All</option>
</select>
</div>
I think I know what it is you're trying to but this is a shot in the dark.
If you can change from using id to class this will work just fine.
window.onload=function(){
var PageItems=document.getElementsByClassName('itemsPage');
for(var i=0; i<PageItems.length; i++){
//Set Event Listeners for each element using itemsPage class name
PageItems[i].addEventListener('change',changeItems,false);
}
}
function changeItems(){
// New selected index
var Selected=this.selectedIndex;
var changeItems=document.getElementsByClassName('itemsPage');
for(var i=0; i<changeItems.length; i++){
//Change all select options to the new selected index.
changeItems[i].selectedIndex=Selected;
}
}
<div class="topPagination">
<select class="itemsPage">
<option value="0">12 Items per Page</option>
<option value="100">View All</option>
</select>
</div>
<div id="mainContent">
</div>
<div class="bottomPagination">
<select class="itemsPage">
<option value="07">12 Items per Page</option>
<option value="100">View All</option>
</select>
</div>
If you have any questions please leave a comment below and I will get back to you as soon as possible.
I hope this helps. Happy coding!
Related
Is there possibility to get all html option from selected dropdown.
While i have
<select class="myselect">
<option data-one="11" data-two="11" data-three="111" value="1">Some text here</option>
<option data-one="22" data-two="22" data-three="222" value="2">Some text here2</option>
</select>
I would like to get whole option which is:
<option data-one="22" data-two="22" data-three="222" value="2">Some text here2</option>
As far i as tried i can get all options in html by:
$('.myselect').html()
Or just one data by :
$('.myselect').find(':selected').data('one')
Or just one value
$('.myselect').find(':selected').val()
So is there simple way to get selected whole html option from < option >... to < /option>
Like this - it is not clear if you want the tag or the data attributes so here are either
$(".myselect").on("change",function() {
console.log(this.options[this.selectedIndex]); // complete tag
console.log(this.options[this.selectedIndex].dataset); // array of data attribute values
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="myselect">
<option value="">Please select</option>
<option data-one="11" data-two="11" data-three="111" value="1">Some text here</option>
<option data-one="22" data-two="22" data-three="222" value="2">Some text here2</option>
</select>
I wasn't quite clear precisely what result you wanted, so here are a couple of ideas to get things you may be interested in:
1) To get the names and values of all the data-attributes you can just call .data() without any arguments and it will return all the data-attributes and their values in an object. There's also an example in the documentation.
2) To get the whole HTML of the selected item you can use outerHTML on the DOM element found by jQuery.
Demo of each below:
//to get the data-attributes
var selectedData = $('.myselect').find(':selected').data();
console.log(selectedData);
//to get the HTML of the selected item:
var selected = $('.myselect').find(':selected')[0].outerHTML;
console.log(selected);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="myselect">
<option data-one="11" data-two="11" data-three="111" value="1">Some text here</option>
<option data-one="22" data-two="22" data-three="222" value="2">Some text here2</option>
</select>
I want to make it if you pick something in dropdown list except Condition, it will search all elements for that and show them.
my jquery:
$('#searchbtn').click(function(){
var e = document.getElementById("condition");
var strUser = e.options[e.selectedIndex].value;
$('.item').each(function(){
var itemcondition = $('.condition').html();
if (itemcondition === strUser.toLowerCase()){
$(this).show();
}
if (itemcondition !== strUser.toLowerCase()){
$(this).hide();
}
});
})
my html:
<select id="condition">
<option>Condition</option>
<option value="factory new">Factory New</option>
<option value="minimal wear">Minimal Wear</option>
<option value="field tested">Field Tested</option>
<option value="well worn">Well Worn</option>
<option value="battle scarred">Battle Scarred</option>
</select>
this is how element looks like:
<div class="item" data-keywords="m4a4 howl">
<div class="name">M4A4 Howl</div>
<div class="condition">Factory New</div>
<div class="price">800 000 coins</div>
<button>Buy</button>
</div>
Here is how you can fix it.
Your html attribute and javascript code should be changed. You should give option value with ID/slug of condition of your products -- it shouldn't have space as we will manage this data easier in the next step.
<select id="condition">
<option>Condition</option>
<option value="factory-new">Factory New</option>
<option value="minimal-wear">Minimal Wear</option>
<option value="field-tested">Field Tested</option>
<option value="well-worn">Well Worn</option>
<option value="battle-scarred">Battle Scarred</option>
</select>
and your products list should classes corresponding your selected option value like this.
<div class="item factory-new field-tested" data-keywords="m4a4 howl">
<div class="name">M4A4 Howl</div>
<div class="condition">Factory New</div>
<div class="price">800 000 coins</div>
<button>Buy</button>
</div>
And your javascript should be changed almost entirely. It's much easier to understand.
$('#searchbtn').click(function() {
var $condition = $("#condition");
var condition = $condition.val();
$('.item').hide();
$('.item.' + condition).show();
})
hope it helps.
I'm looking to have separate sections of my form become visible dependant on the selection from a drop down menu.
Currently i'm having two issues, its only hiding the first area i want hidden and also i'm struggling with the syntax to get the multiple options working using if statements.
Am i looking at this the right way or is there an easier way of doing this.
In the code below i've only got 2 if statements as i've been struggling to get that correct so haven't done it for all 8 options i need to.
function showfield(name){
if (name=='Supplier meetings') {
document.getElementById('div1').style.display="block";
} else {
document.getElementById('div1').style.display="none";
if (name=='Product meetings') {
document.getElementById('div2').style.display="block";
} else {
document.getElementById('div2').style.display="none";
}
}
}
function hidefield() {
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='none';
document.getElementById('div3').style.display='none';
document.getElementById('div4').style.display='none';
document.getElementById('div5').style.display='none';
document.getElementById('div6').style.display='none';
document.getElementById('div7').style.display='none';
document.getElementById('div8').style.display='none';
}
in my html i have:
<body onload="hidefield()">
<select name="acti" value="" onchange="showfield(this.options[this.selectedIndex].value)">
<option value="1">Worked hours</option>
<option value="2">Overtime</option>
<option value="3">Sickness</option>
<option value="4">Unpaid leave</option>
<option value="5">Compassionate leave</option>
<option value="6">Holiday inc bank holidays</option>
<option value="7">Team meetings</option>
<option value="8">One to ones</option>
<option value="9">One to one prep</option>
<option value="10">Huddles</option>
<option value="Supplier meetings">Supplier meetings</option>
<option value="Product meetings">Product meetings</option>
<option value="Training/coaching">Training/coaching</option>
<option value="Handling other peoples cases">Handling other peoples cases</option>
<option value="15">Project work</option>
<option value="16">Surgery time for GK</option>
<option value="17">Letter checks and feedback</option>
<option value="18">MI/Reporting/RCA</option>
</select>
Then divs that contain the parts i need displayed off each option.
Hope that makes sense.
Thanks
Instead of writing condition for each option value, you can use the value directly in selecting the div that is to be shown:
function showfield(name){
hidefield();
document.getElementById( 'div-' + name).style.display="block";
}
For this to work, your id's should match up with corresponding option values.
e.g. <option value="1">1</option>
corresponding div:
<div id="div-1"></div>
You can add a data-div attribute to every option which will be ID of respective div which will be shown and other divs will be hidden.
You need a class on every div so they can be hidden using that class name except the div which will be shown based on selection.
HTML
<select name="acti" value="" onchange="showfield(this.options[this.selectedIndex].value)">
<option value="1" data-div="one">Worked hours</option>
<option value="2" data-div="two">Overtime</option>
</select>
<div id="one">First Div</div>
<div id="two">Second Div</div>
Javascript
function showfield(val)
{
var divID = $("select[name=acti]").find("option[value='" + val + "']").attr("data-div");
$(".divClass").hide();//You can also use hidefield() here to hide other divs.
$("#" + divID).show();
}
What is the best way to add another class to this script:
<script type="text/javascript">
$(document).ready(function(){
$('.carlocation').hide();
$('#parking-options').change(function() {
$('.carlocation').hide();
$('#' + $(this).val()).show();
});
});
</script>
I am fine with the same ID displaying this classes, I am just unsure about how to add another class to this script. As '.carlocation' , '.insertclass' or '.carlocation .insertclass' does nothing but break the script.
Thanks!
EDIT - The rest of the markup.
I would like .carlocation and .car-position to start off as two hidden divs but in the first drop down when "Self parking" is selected that the other two selections display.
<li>
<label for="select-choice-0" class="select">Parking Method:</label>
<select name="select-choice-15" id="parking-options" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
<option value="">Select One</option>
<option value="self">Self Parking</option>
<option value="auto">Valet Parking</option>
</select>
</li>
<li>
<div id="self" class="carlocation">
<h1>Enter Car Location:</h1>
<label for="select-choice-0" class="select">Floor:</label>
<select name="select-choice-15" id="location-floor" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
<option value="">Floor Select</option>
<option value="f1">F1</option>
<option value="f2">F2</option>
<option value="f3">F3</option>
<option value="f4">F4</option>
</select>
</div>
</li>
<li>
<div id="self" class="car-position">
<label for="select-choice-0" class="select">Row:</label>
<select name="select-choice-15" id="position-row" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
<option value="">Row Select</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>
</select>
<li>
Hide your elements with CSS:
.carlocation, .car-position {
display: none;
}
Remove the repeated "self" id from both of the divs, and instead add the "self" value to the class attribute on both:
<li>
<div class="self carlocation">
<!-- ... -->
</div>
</li>
<li>
<div class="self car-position">
<!-- ... -->
</div>
</li>
Side Note: Your second div was missing its closing tag.
Then bind to the change event of the form:
$("#parking-options").on("change", function(){
$("div.self").toggle( $(this).val() === "self" );
});
This bases the visibility of all .self divs on the value of the select being "self". If "self" is selected, all div.self items will become visible. Otherwise, they become hidden.
Fiddle: http://jsfiddle.net/jonathansampson/5KJV5/
Or you could slide them into view:
$("#parking-options").on("change", function(){
$(this).val() === "self"
? $("div.self").slideDown()
: $("div.self").slideUp();
});
Fiddle: http://jsfiddle.net/jonathansampson/5KJV5/2/
To select multiple selectors try this-
$("selector1,selector2")
It will definetly work.
For more information visit jQuery selectors reference.
Your jQuery selector can interact with multiple classes (or any other elements) by making a comma separated list within the quotes of the selector, in other words:
$('.carlocation, .insertclass, .anotherclass').hide();
Edit: Note that case sensitivity can be an issue in some cases, so '.insertclass' is not always the same as '.insertClass' - see JQuery class selectors like $(.someClass) are case sensitive? for more.
It looks like you might have gotten hung up initially by not having all of your selectors in the same quotes. Having a space between classes as in '.carlocation .insertclass' is actually saying "select an element with the class "insertclass" that is a child of an element with class "carlocation"
If you are going to be interacting with the same set of elements more than once, you can optimize your code by assinging them to a variable:
var $myselection = $('.carlocation, .insertclass, .anotherclass');
(note that putting the '$' in the variable name just helps remind you that it's a jQuery object, you could name it whatever you want).
You can now use any of the normal jQuery methods on $myselection:
$myselection.hide();
$myselection.show();
or use it later (so long as the variable is accessible within the scope that you're looking for it, which wouldn't be a problem in your initial example).
I'm fairly new to javascript and I'm trying to make an form for my website and I'm stuck on the javascript,
This is what I have:
<script type="text/javascript">
function hide(opt) {
if (getElementsByClassName(opt).style.display='none';){
getElementsByClassName(opt).style.display='block';
}
else{
getElementsByClassName(opt).style.display='none';
}
}
</script>
What I intended the script to do was recieve a variable (the option chosen by the user) and then reveal all the elements with the class of the same name (so if the option was orc the orc div would be displayed, but be hidden if the option chosen was elf etc.)
Html:
<form name="chargen" action="" method="post">
Name:<Input name="name" type="text" />
Gender:<select name="gender">
<option>Choose Gender...</option>
<option>Male</option>
<option>Female</option>
</select>
Species:<select name="species" onchange="hide(document.chargen.species.options[
document.chargen.species.selectedIndex ].value)">
<option> Choose Species...</option>
<option value="human">Human</option>
<option value="orc">Orc</option>
<option value="elf">Elf</option>
<option value="dwarf">Dwarf</option>
<option value="drow">Drow</option>
<option value="ent">Ent</option>
</select>
<div class="human" style="display:none;">
Sub Species:<select name="subspecies1">
<option>Norseman</option>
<option>Hellenic</option>
<option>Heartlander</option>
</select>
</div>
<div class="orc" style="display:none;">
Sub Species:<select name="subspecies2">
<option>Black Orc</option>
<option>Fel Orc</option>
<option>Green Orc</option>
</select>
</div>
<div class="human" style="display:none;">
Homeland:<select name="homeland1">
<option>Choose Homeland...</option>
<option value="citadel">Citadel</option>
<option value="wildharn">Wildharn</option>
<option value="Merith">Merith</option>
</select>
</div>
<div class="orc" style="display:none;">
Homeland:<select name="homeland2">
<option>Choose Homeland...</option>
<option value="1">Berherak</option>
<option value="2">Vasberan</option>
</select>
</div>
Unfortunately nothing happens when I change the contents of the species combobox (I've tried on multiple browsers) What am I doing wrong?
I realise that getElementsByClassName() is a HTML5 function, but according to the interwebs it is compatible with all major browsers.
Thanks for your time
getElementsByClassName returns an array, you must iterate on the result. And be careful to the = in tests (instead of ==).
But I suggest you have a look at jquery. Your life will be easier as what you want can be done as :
$('.human, .orc, .elf, .dwarf, .drow, .ent').hide();
$('.'+opt).show();
(see fiddle : http://jsfiddle.net/dystroy/2GmZ3/)