How to show another select values if is a value selected - javascript

I have a simple form on the my website. Like: Select 1 and Select 2. I want that if I Select 1 value Home, Select 2 value changes to e.g. residance.
How can do that with database? I'm getting these values from database:
Select 1 values = Home, Otels
Select 2 values = if selected Home (residance, room, apart),
if selected Otel (2 stars, 3stars, 4stars)
<div class="row pick-size">
<div class="col-lg-4 col-md-8 col-sm-6">
<select class="selectpicker" data-size="3" data-style="select-with-transition btn btn-simple">
<option value="0">Select</option>
<option value="1">Home</option>
<option value="2">Otels</option>
</select>
</div>
<div class="col-lg-4 col-md-8 col-sm-6">
<select class="selectpicker" data-size="3" data-style="select-with-transition btn btn-simple">
<!--if selected Home show this values-->
<option value="1">residance</option>
<option value="2">room</option>
<option value="3">apart</option>
<!--if selected Otels show this values-->
<option value="0">2 stars</option>
<option value="1">3 stars</option>
<option value="2">4 stars</option>
</select>
</div>
</div>

You could just use the innerHTML JavaScript property to add a different dropdown.
I'd recommend hiding the second dropdown until a value is selected in the first too. This'll provide a better user experience.
But there are some more elegant solutions here.

Related

Displaing element that should not be displayed in select html with javascript

I am using this way to have 2 languages in my html page using JavaScript described in this issue:
stack overflow language using JavaScript
Now I have to put lang in the select so when I choose one language the other element with lang disappears but I can see both of them.
<div class="col">
<select class="custom-select custom-select-lg mb-3 " id="mySelect" onchange="brightness()" >
<option selected lang="en">Brightness</option>
<option selected lang="es">Luminosidad</option>
<option value="0.1">1</option>
<option value="0.2">2</option>
<option value="0.3">3</option>
</select>
</div>
If I do this it is working but I want the text to be included inside the select and options:
<p lang="en">Brightness</p>
<p lang="es">Luminosidad</p>
<select class="custom-select custom-select-lg mb-3 " id="mySelect" onchange="brightness()" >
<option value="0.1">1</option>
<option value="0.2">2</option>
<option value="0.3">3</option>
Thank you
In the select option for 1st and second lang, You need to add value to them. Then target the value to pass your javascript function. E.g: if value == "en", you do something, and if value == "es", do another thing.

Only send data from html form select is it is active

I have a series of select parts of a form, the javascript hides multiple possibilities for the following dropdown until the current drop down has a selection made, this determines which dropdown the user sees using the style="display:none;" attribute and javascript to switch it to block, .css({'display':'block'});.
The problem is that each <select> segment has the same name, e.g. <select class="form-control" name='phylum' id="sel1_1" style="display:none;"> this name='phylum' is used in the post phase of the form and needs to be associated with whichever dropdown list is used, but all of these have the default as 0 so if this is set it is overwritten by the final select in the list.
In javascript I therefore need to disable the html code, switching display:none; to display:block; has no effect as it is style only. Could I add disabled to all the <select> elements and somehow activate the required one?
Some example html and javascript snippets follow.
html
<div class='col-12 left'>
<div class='form-group'>
<label id="sel1_0" style="display:none;" for='uname'>Phylum/Division</label>
<select class="form-control" name='phylum' id="sel1_1" style="display:none;">
<option value="phylum" data-value="0">Choose</option>
<option value="Annelid" data-value="1">Annelid</option>
<option value="Arthropod" data-value="2">Arthropod</option>
<option value="Bryozoa" data-value="3">Bryozoa</option>
<option value="Chordata" data-value="4">Chordata</option>
<option value="Cnidaria" data-value="5">Cnidaria</option>
<option value="Echinoderm" data-value="6">Echinoderm</option>
<option value="Mollusc" data-value="7">Mollusc</option>
<option value="Nematode" data-value="8">Nematode</option>
<option value="Platyhelminthes" data-value="9">Platyhelminthes</option>
<option value="Rotifer" data-value="10">Rotifer</option>
<option value="Sponge" data-value="11">Sponge</option>
</select>
<select class="form-control" name='phylum' id="sel1_2" style="display:none;">
<option value="0" data-value="0">Choose</option>
<option value="1" data-value="1">C1</option>
<option value="2" data-value="2">D1</option>
</select>
</div>
</div>
javascript
$("#sel0").change(function() {
$('#sel1_1').css({'display':'block'});
The following doesn't seem to work
$('#sel1_1').css({'active'});

HTML Form Select Dropdown Options and Hidden Form Fields Not showing in PHP Form using JS Script

Recently i set up a script in JS with help from Stack to show a Form Row labled "other" when i select an option called "Other" from a dropdown option above. Example is below. This works well for one dropdown. But as soon as I add another dropdown Menu and "other" form row the JS code breaks and neither the 1st or 2nd Form Dropdown Options get posted to the Database and the form row "other" does not show. I hope i have explained the issue correctly. I essentially want one JS script to repeat for all dropdown forms so when "other" option value is selected i want the form row "other" to display below so custom data can be typed in. Using Bootstrap 4.3.1 with all JS querir plugins working. The datbase is connected with no issues posting data when its just a text field. So i was hoping someone might have work around and i will have a lot of dropdowns with the "Other" form row posting different form data in to the database. Many thanks.
<script>
function handleSelect() {
document.getElementById("other").value = document.getElementById("mySelect").value;
var selected = document.getElementById("mySelect").value;
var details = document.getElementById("other-details");
if (selected === "") {
details.classList.remove("d-none");
details.classList.add("d-block");
} else {
details.classList.remove("d-block");
details.classList.add("d-none");
}
}
</script>
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<label class="control-label custom_label col-xs-12">Cemetery</label>
<select name="cemetery" class="form-control" id="mySelect" onchange="handleSelect();">
<option value="select" selected="selected">Select Cemetery</option>
<option value="Akatarawa">Akatarawa</option>
<option value="Taita">Taita</option>
<option value="Wainuiomata">Wainuiomata</option>
<option value="Whenua Tapu">Whenua Tapu</option>
<option value="Makara">Makara</option>
<option value="Karori">Karori</option>
<option value="St Johns">St Johns</option>
<option value="Awa Tapu">Awa Tapu</option>
<option value="Paraparaumu">Paraparaumu</option>
<option value="">Other</option>
</select>
</div>
</div>
<div class="form-row d-none" id="other-details">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<input type="text" id="other" class="form-control" name="cemetery" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<label class="control-label custom_label col-xs-12">Headstone - Stone Color</label>
<select name="headstone_color" class="form-control" id="mySelect" onchange="handleSelect();">
<option value="headstone_color" selected="selected">Select Headstone - Stone Color</option>
<option value="Black">Black</option>
<option value="African Grey">African Grey</option>
<option value="Platinum Blue">Platinum Blue</option>
<option value="Blue Pearl">Blue Pearl</option>
<option value="Emerald Pearl">Emerald Pearl</option>
<option value="White Pearl">White Pearl</option>
<option value="Imperial Red">Imperial Red</option>
<option value="Balmoral Red">Balmoral Red</option>
<option value="G603-Chinese White/Grey">G603-Chinese White/Grey</option>
<option value="">Other</option>
</select>
</div>
</div>
<div class="form-row d-none" id="other-details">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<input type="text" id="other" class="form-control" name="headstone_color" />
</div>
</div>
Please check the select id. both of the select has the same id as myselect. The id must be unique. So please make your code generic and use some unique ids.
Thanks
Something like this?
<script>
function handleSelect() {
document.getElementById("other1").value = document.getElementById("mySelect1").value;
var selected = document.getElementById("mySelect1").value;
var details = document.getElementById("other-details1");
document.getElementById("other2").value = document.getElementById("mySelect2").value;
var selected = document.getElementById("mySelect2").value;
var details = document.getElementById("other-details2");
if (selected === "") {
details.classList.remove("d-none");
details.classList.add("d-block");
} else {
details.classList.remove("d-block");
details.classList.add("d-none");
}
}
</script>
and so on ??

Select dropdown option by text if same list of class are found in protractor js

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.

Changing display attribute by dropdown selection

So I'm trying to make an interactive form where the value of one dropdown affects the content of another drop down. I have seen some similar question on SO, and I decided to take the best from all answers. Anyway I'm stuck at the last part and can't seem to figure out why it wont work.
The form:
<div class="form-group">
<label class="col-lg-2 control-label">Dienst</label>
<div class="col-lg-2">
<select id="dienst" name="dienst" class="form-control">
<option value"" disable selected> </option>
<option value="Psychiatrie">Psychiatrie</option>
<option value="Oncologie">Oncologie</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Ziekte</label>
<div class="col-lg-2">
<select name="ziekte" class="form-control">
<option value"" disable selected> </option>
<option class="Psychiatrie_select" value"" >Jong Dementie</option>
<option class="Psychiatrie_select" value"" >Neuropsychiatrische stoornissen</option>
<option class="Oncologie_select" value"" >Other</option>
</select>
</div>
</div>
The JS code
$('select#dienst').on('change', function() {
event.preventDefault();
var dienst = $('[name="dienst"]').val();
if(dienst == "Psychiatrie"){
document.getElementsByClassName(Psychiatrie_select).style.display = 'block';
}
});
The logic behind it:
I first get the value of the first drop down list ( id = dienst ) and based on that I want to change the display value of the options of the second drop down ( where class is Psychiatrie_select )
I have also debugged by console.log(dienst) and that shows that the selection of the first drop down menu is stored in dienst. What could be wrong because my css display attribute doesn't seem to change.

Categories