I am creating a select box that when I select a value in main select box Domains, it will appear other select box Types like Diatoms or Flagellates.... I am done with that part however, I am trying to change back the selected item in a select box that new appear to the main first one. I mean when I selected a Diatoms in Domains select box and it will appear then I select some item in Diatoms. Then I change other items in Domains and other select box will appear, the Diatoms will disappear. But the thing is the selected item that I select still remain like when I select it, I want to change it back to first option default, not the item. Here is my code
I already tried to put 'selectedIndex', 0. However it not work.
HTML
<ul class="inline_list">
<li class="Domains">
<select>
<option selected disabled hidden>Domains</option>
<option value="Diatoms">Diatoms</option>
<option value="Flagellates">Flagellates</option>
<option value="Dinoflagellates">Dinoflagellates</option>
<option value="Ciliates">Ciliates</option>
<option value="Coccolithophore">Coccolithophore</option>
<option value="Miscellaneous">Miscellaneous</option>
<option value="Other_plankton">Others</option>
</select>
</li>
<li class="Diatoms domains_types">
<select>
<option selected disabled hidden>Types</option>
<option value="Asterionellopsis">Asterionellopsis</option>
<option value="Bacillaria">Bacillaria</option>
</select>
</li>
<li class="Flagellates domains_types">
<select>
<option selected disabled hidden>Types</option>
<option value="amoeba">amoeba</option>
<option value="Chrysochromulina">Chrysochromulina</option>
</select>
</li>
<script src="js/select_box.js"></script>
</ul>
CSS
.domains_types{
display: none;
}
Jquery
$(document).ready(function(){
$('.Domains').ready(function(){
$('select').change(function(){
$("select option:selected").each(function(){
if($(this).attr("value")=="Diatoms"){
$('.domains_types').hide();
$('.Diatoms').css('display','inline-block');
}
if($(this).attr("value")=="Flagellates"){
$('.domains_types').hide();
$('.Flagellates').css('display','inline-block');
}
});
}).change();
});
});
You code can be easily optimised to reduce the redundancy in your code. Some straightforward improvements that we can do are:
Removing the ready event listener from $('.Domains'). The ready function is specific to the document object only, which maps to the DOMContentLoaded event. It's simply a convenience method made available by jQuery.
Instead of iterating through all options, you can simply get the value of the <select> element by calling this.value. This removes one layer of nesting form your code
Instead of creating a new if statement for each possible value, you can actually just use '.' + this.value to select the correct element, since you have one-to-one mapping of the first <select> elements options values to the <li> wrapper for the second level of <select> elements. For example, if the value selected is Flagellates, then the selector will select for $('.' + this.value) which evaluates to $('.Flagellates')
To "reset" your second level of <select> element, simply select the first option and set its selected property to true, i.e. $('option:first-child').prop('selected, true').
hidden is not an attribute/property of an <option> element. You can remove it.
With that in mind, here is the improved and working code:
$(document).ready(function() {
$('.Domains select').change(function() {
$('.domains_types')
.hide() // Hide the <li> element
.find('select option:first-child') // Get the nested select's first option
.prop('selected', true); // Select it
$('.' + this.value).css('display', 'inline-block');
}).change();
});
.domains_types {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="inline_list">
<li class="Domains">
<select>
<option selected disabled>Domains</option>
<option value="Diatoms">Diatoms</option>
<option value="Flagellates">Flagellates</option>
<option value="Dinoflagellates">Dinoflagellates</option>
<option value="Ciliates">Ciliates</option>
<option value="Coccolithophore">Coccolithophore</option>
<option value="Miscellaneous">Miscellaneous</option>
<option value="Other_plankton">Others</option>
</select>
</li>
<li class="Diatoms domains_types">
<select>
<option selected disabled>Types</option>
<option value="Asterionellopsis">Asterionellopsis</option>
<option value="Bacillaria">Bacillaria</option>
</select>
</li>
<li class="Flagellates domains_types">
<select>
<option selected disabled>Types</option>
<option value="amoeba">amoeba</option>
<option value="Chrysochromulina">Chrysochromulina</option>
</select>
</li>
</ul>
Related
I'm wondering if it's possible to have code where the Select option has 2 different value (which effect 2 different things)
Basically, I'm trying to create an option where depending on the select choice, it changes the price and also changes the link that pressing the button will go to.
I found this code on one of the posts here and it works perfectly, but I'm looking to add a Price in between the select menu and the button which is also effected by the select choice.
Eg.
1 Year Only - $50 [Button links to correct purchase link]
Subscription (Billed Annually) - $45/pa [Button links to correct purchase link]
Sorry if i'm not explaining it very well.
<select id="menu">
<option selected="selected" disabled="">Please choose an option</option>
<option value="https://checkout-1-year">1 Year</option>
<option value="https://checkout-subscription">Subscription (Billed Annually)</option>
</select>
<input type="button" id="goBtn" value="Purchase">
<script type="text/javascript">
var goBtn = document.getElementById("goBtn");
var menu = document.getElementById("menu");
goBtn.onclick = function() {
window.location = menu.value;
}
</script>
They can't have two values, but what you can do is set the value and a data- attribute, which can store any string you like and then be retrieved using the data-* Attribute API.
Here's an example:
const list = document.getElementById("menu");
console.log(list.options[1].value, list.options[1].dataset.value);
console.log(list.options[2].value, list.options[2].dataset.value);
<select id="menu">
<option selected="selected" disabled="">Please choose an option</option>
<option value="https://checkout-1-year" data-value="something">1 Year</option>
<option value="https://checkout-subscription" data-value="something else">Subscription (Billed Annually)</option>
</select>
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'm working in Protractor and javasript. My page has 3 dropdowns of same class "imageeditor". I want to select the 2nd dropdown and click the option say "Package" by passing the text as parameter.I want the different xpath and css to perform the select option.
<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>
<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>
<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>
You can get the desired select element by index:
var desiredImageEditor = $$(".imageeditor select").get(1);
Now, in order to select an option, you have multiple ways to do so. One is to select the inner option by the class name and click it:
var desiredOption = desiredImageEditor.$("option.image-package-panel");
desiredImageEditor.click(); // open up dropdown
desiredOption.click();
Or, it should also be possible to just send keys to the select element:
desiredImageEditor.sendKeys("Package");
There is also this convenient abstraction over select and option.
I use this code to autoselect an option on a dropdown. How can I change it so as to not match the value, but tha data-id attribute?
window.onload = function(){
document.getElementsByName("program")[0].value=+param1;
}
<select name="program">
<option data-id="1234" value="567">text</option>
<option data-id="897" value="65475">text</option>
</select>
You can do that by looking for that attribute value with querySelector() and setting the found option's selected attribute.
I would also suggest to respond to the document.DOMContentLoaded event instead of window.load:
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('option[data-id="1234"]')
.setAttribute('selected', 'selected');
});
<select>
<option data-id="12" value="7">other option</option>
<option data-id="1234" value="567">select this</option>
</select>
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).