We Keep Coding

show div on form option selected by user using id or class

First question here so please go easy on me ! Trying to get this form select working but after hours still struggling. Code works fine when just one option has an id, but will not work with multiple id's. Have a feeling the right approach would be to assign each select option with a class but still can't figure it out.
Any assistance would be gratefully appreciated !
<form>
<p align="center">Size :
<input type="hidden" value="1" name="qty1" />
<select name="productpr1" id="getFname" onchange="showdiv(this);">
<option selected value="ERROR - Please select finish">please select</option>
<option id="show" value="product 1:5:0:105805">product 1</option>
<option id="" value="product 2:10:0:105205">product 2</option>
<option id="show" value="product 3:15:0:105605">product 3</option>
</select>
</p>
<div id="admDivCheck" style="display:none;text-align:center;">Choose delivery date</div>
<p><input type="submit" class="button" value="ADD TO BASKET" /></p>
</form>
<script>
function showdiv(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("show").value;
if(admOptionValue == nameSelect.value){
document.getElementById("admDivCheck").style.display = "block";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
</script>
Edit
Thanks for the assistance on here - the final version which works as I need :
<input type="hidden" value="1" name="qty1" />
<select name="productpr1" id="getFname" onchange="showdiv();">
<option selected value="ERROR - Please select finish">please select</option>
<option class="show" value="product 1:5:0:105805">product 1</option>
<option class="" value="product 2:10:0:105205">product 2</option>
<option class="show" value="product 3:15:0:105605">product 3</option>
</select>
<div id="admDivCheck" style="display:none">Choose delivery date</div>
<p><input type="submit" class="button" value="ADD TO BASKET" /></p>
<script>
function showdiv() {
var getFname= document.getElementById("getFname");
var askForDelivery = getFname.options[getFname.selectedIndex].classList;
if(askForDelivery.contains('show')){
document.getElementById('admDivCheck').style.display = 'block';
}
else{document.getElementById('admDivCheck').style.display = 'none';
}}
</script>

the id property is for the object document model and should be unique, just use 1,2,3 for it

In your script admOptionValue == nameSelect.value This value checking will always same, because selected option only the value of select tag.....
function showdiv(nameSelect)
{
console.log('choosed option',nameSelect.value);
if(nameSelect.value !="") document.getElementById("admDivCheck").style.display = "block";
else document.getElementById("admDivCheck").style.display = "none";
}
<form>
<p align="center">Size :
<input type="hidden" value="1" name="qty1" />
<select name="productpr1" id="getFname" onchange="showdiv(this);">
<option selected value="">please select</option>
<option value="product 1:5:0:105805">product 1</option>
<option value="product 2:10:0:105205">product 2</option>
<option value="product 3:15:0:105605">product 3</option>
</select>
</p>
<div id="admDivCheck" style="display:none;text-align:center;">Choose delivery date</div>
<p><input type="submit" class="button" value="ADD TO BASKET" /></p>
</form>

The reason that it is not working when having multiple id's is this line here:
admOptionValue = document.getElementById("show").value;
That is always going to return the first element with id show.
You should be able to get the selected value like this:
function showdiv() {
var getFname= document.getElementById("getFname");
var selectedValue = getFname.options[getFname.selectedIndex].value;
alert(selectedValue);
}
<select name="productpr1" id="getFname" onchange="showdiv();">
<option selected value="ERROR - Please select finish">please select</option>
<option value="product 1:5:0:105805">product 1</option>
<option value="product 2:10:0:105205">product 2</option>
<option value="product 3:15:0:105605">product 3</option>
</select>
So All I did was get the selectedIndex of the select box, rather than getting the individual option by id. All the options should have a unique id, and trying to get all of them would be a huge waste of time
EDIT
As mentioned earlier, you wanted to add a class to a specific item to determine if it should show or hide another div.
All you would do is check for classList instead of value to determine if it is true.
All you would have to do is get the classList of the selected item. If it contains the desired class, show your hidden div.
function showdiv() {
var getFname= document.getElementById("getFname");
var askForDelivery = getFname.options[getFname.selectedIndex].classList;
if(askForDelivery.contains('show')){
document.getElementById('admDivCheck').style.display = 'block';
}
}
I made a fiddle to demonstrate:
https://jsfiddle.net/k68nuams/

Reset value or set to default selected option jQuery

I'm trying to reset the value of closest select option.
$(document).ready(function () {
$('.limitation_points').hide();
$('.field .limitSelected').each(function () {
$(this).change(function () {
var selected = $(this).val();
if (selected == '1') {
$(this).closest('.field').find('.limitation_points').fadeIn(200);
} else {
$(this).closest('.field').find('.limitation_points').fadeOut(200);
$(this).closest('.field').find('input[name="pillers[]"]').val("");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
<input id="limitation1" type="radio" class="limitSelected" name="limitation" value="1" />Yes
<input id="limitation2" type="radio" class="limitSelected" name="limitation" value="0" />No
<select id="pijlers" class="pillers" name="pillers[]">
<option class="placeholder" selected disabled>Make Choice</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
Till fadeIn fadeOut my code is working how it should. But This code does't reset the value of select options when value has "0".
Can anyone help me with this, what i am doing wrong here?
Thanks in advance.

Using "-1" as default value and also using select instead of input as your selector, should do the trick.
$(document).ready(function () {
$('.limitation_points').hide();
$('.field .limitSelected').each(function () {
$(this).change(function () {
var selected = $(this).val();
if (selected == '1') {
$(this).closest('.field').find('.limitation_points').fadeIn(200);
} else {
$(this).closest('.field').find('.limitation_points').fadeOut(200);
$(this).closest('.field').find('select[name="pillers[]"]').val("-1");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
<input id="limitation1" type="radio" class="limitSelected" name="limitation" value="1" />Yes
<input id="limitation2" type="radio" class="limitSelected" name="limitation" value="0" />No
<select id="pijlers" class="pillers" name="pillers[]">
<option class="placeholder" value="-1" selected disabled>Make Choice</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>

Add value attribute to the default <option> and remove disabled.
When you use the empty string reset there is no matching option for it
<option value="" class="placeholder" >Make Choice</option>

Check radio button only if and when a dropdown list element is selected

I have this jquery to check a radio button on page load:
$('input[value="modelos"]').attr('checked',true);
And then I have a dropdown list:
<select id="talents_meta_category" name="talents_meta_category">
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
How can I have input[value="modelos"] checked only if and when <option value="tab_1495127126289">Modelos</option> is selected?

You need on change condition with if like this :
$("select#talents_meta_category").change(function () {
if ($(this).val() === "tab_1495127126289") {
$('input[value="modelos"]').attr('checked',true);
}else{
$('input[value="modelos"]').attr('checked',false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="talents_meta_category" name="talents_meta_category">
<option value="">Please Select</option>
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
</br>
<input type="checkbox" name="modelos 1" value="modelos"> modelos 1<br>
<input type="checkbox" name="modelos 2" value="modelos"> modelos 2<br>
<input type="checkbox" name="modelos 3" value="modelos"> modelos 3<br>
Checkbox dynamically change based on condition (select option value)

You can try this, but I had to put in a blank option into the menu, however if that's unacceptable let me know and I'll do something else.
$("select#talents_meta_category").change(function () {
if ($(this).val() === "tab_1495127126289") {
$('input[value="modelos"]').attr('checked',true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="talents_meta_category" name="talents_meta_category">
<option></option>
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
<input type="radio" value="modelos">

You can check whether a option by testing the value attribute of the select
$(function(){
if($('#talents_meta_category').val()){
$('input[name="favorites"][value="modelos2"]').attr('checked',true);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="talents_meta_category" name="talents_meta_category">
<option value=""></option>
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463" selected>Música</option>
</select>
<label for="modelos"><input type="radio" name="favorites" value="modelos"></label>
<label for="modelos"><input type="radio" name="favorites" value="modelos2"></label>

You can use onchange function.
$("#talents_meta_category").on('change',function(){
let value = $(this).children("option:selected").val();
if(value=="tab_1495127126289"){
$('input[value="modelos"]').attr('checked',true);
}else{
$('input[value="modelos"]').attr('checked',false);
}
});

Something like this should do the trick:
// Your check the radio on page load
$('input[value="modelos"]').attr('checked', true);
// Check if `modelos` is selected
if ($('input[value="modelos"]').prop('checked')) {
// Add the `selected` attribute to the <option />
$('option[value="tab_1495127126289"]').attr('selected', true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='radio' value='modelos' />
<select id="talents_meta_category" name="talents_meta_category">
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
Hope this helps,

You can do it many different ways, here is just one....
var checkMe = 'tab_1495127126289';
$(function(){
$('input[name=talents_meta_category][value=' + checkMe + ']').prop('checked',true)
});

Hide if box is not checked, show if box is checked and dropdown value equals "Other"

So selecting Other from the dropdown menu gives you a textbox. And unchecking the box will hide the the textbox and the dropdown menu.
I am unable to directly edit the html to add a div to wrap both the dropdown menu and the textbox together.
The problem I am having is even if Other is not selected, if you uncheck the box, then check it back the Other textbox will display. I only want the Other textbox to display if the Other dropdown item is selected.
Any help would be greatly appreciated :)
// hide otherBox
$('#otherBox').hide();
// show OtherBox if other selected
$('#location_dropdown').change(function() {
$('#otherBox').toggle(this.value == 'Other');
});
$('#honor').change(function () {
if (!this.checked) {
$('#location_dropdown').hide();
$('.form label').hide();
} else {
$('#location_dropdown').show();
$('.form label').show();
$('#otherBox').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input name="honor" id="honor" checked="checked" type="checkbox"><label for="tribute_show_honor_fieldsname">Check for yes</label>
<div class="form">
<label for="location_dropdown"> Location: </label>
</div>
<select name="location_dropdown" selected="selected" id="location_dropdown" size="1">
<option value="Chicago Center">Chicago Center</option>
<option value="Columbia">Columbia</option>
<option value="Lower Manhattan">Lower Manhattan Hospital</option>
<option value="Other">Other</option>
</select>
<br />
<input name="otherBox" id="otherBox" value="" maxlength="255" type="text">

Remove $('#otherBox').show();, and add the two lines of code commented below:
$('#honor').change(function() {
if (!this.checked) {
$('#location_dropdown').hide();
$('.form label').hide();
$('#otherBox').hide(); //ADD THIS
} else {
$('#location_dropdown').show();
$('.form label').show();
$('#otherBox').toggle($('#location_dropdown').val() === 'Other'); //ADD THIS
}
});
Snippet:
// hide otherBox
$('#otherBox').hide();
// show OtherBox if other selected
$('#location_dropdown').change(function() {
$('#otherBox').toggle(this.value == 'Other');
});
$('#honor').change(function() {
if (!this.checked) {
$('#location_dropdown').hide();
$('.form label').hide();
$('#otherBox').hide();
} else {
$('#location_dropdown').show();
$('.form label').show();
$('#otherBox').toggle($('#location_dropdown').val() === 'Other');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input name="honor" id="honor" checked="checked" type="checkbox"><label for="tribute_show_honor_fieldsname">Check for yes</label>
<div class="form">
<label for="location_dropdown"> Location: </label>
</div>
<select name="location_dropdown" selected="selected" id="location_dropdown" size="1">
<option value="Chicago Center">Chicago Center</option>
<option value="Columbia">Columbia</option>
<option value="Lower Manhattan">Lower Manhattan Hospital</option>
<option value="Other">Other</option>
</select>
<br />
<input name="otherBox" id="otherBox" value="" maxlength="255" type="text">

Autoselect HTML hidden option value based on previous option

I have 2 select tags which come with the same option, male and female. One of the select, "age" is hidden.
<select name="gender">
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<select name="age" style="display:none;">
<option value="12">Male</option>
<option value="18">Female</option>
</select>
When user select "male" in "gender", I wish the "age" will automatically select "male" as well. I expect the same thing as "female". How to achieve this through javascript?

You can attach an event change to your select gender and set the value of age on every change.
Note that both elements should be loaded with a default selected value for case that the end user do not select nothing and also check that it is better to move inline styling style="display:none;" to a separated css file.
Code:
var gender = document.getElementsByName('gender')[0],
age = document.getElementsByName('age')[0];
gender.addEventListener('change', function() {
age.value = (gender.value == 1) ? 12 : 18;
console.log('Gender:', gender.value);
console.log('Age:', age.value);
});
<select name="gender">
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<select name="age" style="display:none;">
<option value="12">Male</option>
<option value="18">Female</option>
</select>

Here's an option using jQuery.
$(document).ready(function() {
$("#age").val("12");
$("#gender").change(function() {
var userselected = $(this).find(':selected').text();
if (userselected == "Male") {
$("#age").val("12");
} else {
$("#age").val("18");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="gender" id="gender">
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<select name="age" style="display:inherit;" id="age">
<option value="12">Male</option>
<option value="18">Female</option>
</select>