Develop Reference

Change a select option thanks to another option

What I'm trying is something pretty basic, but I can't do it because the examples I see aren't anything similar to what I'm looking for.
There are 2 select, one of them you choose manually and the other dynamically changes depending on the value of the first one.
If the value of the first select is 1, that in the second one they only appear whose value is 1 as well.
I want to make it 100% JavaScript, I don't want any JQuery.
HTML.php
<select onchange="catch_value_types()" name="types" id="types">
<option value="1">Meat</option>
<option value="2">Fish</option>
<option value="3">Vegetables</option>
</select>
<select name="food" id="food">
<option value="1">Pork</option>
<option value="1">Cow</option>
<option value="1">Chicken</option>
<option value="2">Sardine</option>
<option value="2">Salmon</option>
<option value="2">Mackerel</option>
<option value="3">Spinach</option>
<option value="3">Kale</option>
<option value="3">Green peas</option>
</select>
JavaScript.js
function catch_value_types() {
var types_value_option = document.getElementById("types").value;
// What should I put here?
}

Loop through the options and hide if value doesnot match
function catch_value_types() {
const selectedValue = document.getElementById("types").value;
const select2 = document.getElementById("food");
Array.from(select2.options).forEach((node) => node.style.display = node.value === selectedValue ? "block": "none");
}
<select onchange="catch_value_types()" name="types" id="types">
<option value="1">Meat</option>
<option value="2">Fish</option>
<option value="3">Vegetables</option>
</select>
<select name="food" id="food">
<option>Please Select</option>
<option value="1">Pork</option>
<option value="1">Cow</option>
<option value="1">Chicken</option>
<option value="2">Sardine</option>
<option value="2">Salmon</option>
<option value="2">Mackerel</option>
<option value="3">Spinach</option>
<option value="3">Kale</option>
<option value="3">Green peas</option>
</select>

submit any of the text of the selected option using html

When the form is submit I can only get the number assigned to the value. I want to submit any of the texts that is between the select options.
For example, when I select Bird and Dove I want to receive Bird and Dove not 3 and 3
$("#select1").change(function() {
if ($(this).data('options') === undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form method="POST" action="process.php">
<select name="select1" id="select1">
<option value="0">-Select-</option>
<option value="1">Cars</option>
<option value="2">Phones</option>
<option value="3">Birds</option>
</select>
<select name="select2" id="select2">
<option value="0">-Select-</option>
<option value="1">BMW</option>
<option value="1">Benz</option>
<option value="1">Toyota</option>
<option value="2">iPhone</option>
<option value="2">Samsung</option>
<option value="2">Motorola</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="3">Dove<option>
</select><br>
<label>Postal code</label>
<input type="number" name="zipcode" placeholder="postal code">
<button>Search</button>
</form>

When the form is submit the value of the selected option is sent. The problem is because you're using this value to match the child option elements to the parent.
To fix this you need to use value as it was intended, ie. to hold the value you want to send to the server when the form is submit, and use a different method for grouping the option elements between select. I'd suggest using a data attribute for this instead, like this:
$("#select1").change(function() {
if (!$(this).data('options')) {
$(this).data('options', $('#select2 option').clone());
}
var category = $(this).find('option:selected').data('category');
var options = $(this).data('options').filter(function() {
return $(this).data('category') == category;
});
$('#select2').html(options);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="process.php">
<select name="select1" id="select1">
<option data-category="0" value="">-Select-</option>
<option data-category="1" value="Cars">Cars</option>
<option data-category="2" value="Phones">Phones</option>
<option data-category="3" value="Birds">Birds</option>
</select>
<select name="select2" id="select2">
<option data-category="0" value="Cars">-Select-</option>
<option data-category="1" value="BMW">BMW</option>
<option data-category="1" value="Benz">Benz</option>
<option data-category="1" value="Toyota">Toyota</option>
<option data-category="2" value="iPhone">iPhone</option>
<option data-category="2" value="Samsung">Samsung</option>
<option data-category="2" value="Motorola">Motorola</option>
<option data-category="3" value="Eagle">Eagle</option>
<option data-category="3" value="Hawk">Hawk</option>
<option data-category="3" value="Dove">Dove</option> <!-- note I fixed your typo here, missing / -->
</select><br>
</form>

Just change the value from number to text.
example
<option value="Hawk">Hawk</option>
<option value="Dove">Dove<option>
Done!

Generate value of select box, based of value from other select box

I have two select box like this.
<select id="select1">
<option value="1">product 1</option>
<option value="2">product 2</option>
<option value="3">product 3</option>
</select>
<select id="select2">
<option value="1">sub product 1</option>
<option value="2">sub product 2</option>
<option value="3">sub product 1</option>
<option value="4">sub product 1</option>
<option value="5">sub product 3</option>
</select>
I want to create auto generate values of second select box based on we chose from first select box, ex I choose product 1, the second select box will only contain sub product 1.

You can use a data attribute like data-parent in select2 for identifying which product's sub-product it is. Then in select1 change event you can use filter method and the data-parent attribute to hide and show options like following.
$('#select1').change(function() {
var parent = $(this);
var visibleOptions = $('#select2 option').hide().filter(function() {
return $(this).data('parent') == parent.val();
}).show();
if(visibleOptions.length)
visibleOptions.eq(0).prop('selected', true);
else
$('#select2').val('');
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option value="1">product 1</option>
<option value="2">product 2</option>
<option value="3">product 3</option>
</select>
<select id="select2">
<option data-parent="1" value="1">sub product 1</option>
<option data-parent="2" value="2">sub product 2</option>
<option data-parent="1" value="3">sub product 1</option>
<option data-parent="1" value="4">sub product 1</option>
<option data-parent="3" value="5">sub product 3</option>
</select>

You can use this code:
Here is the working example: https://output.jsbin.com/ronoteb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var options="";
$("#select1").on('change',function(){
var value=$(this).val();
if(value=="1")
{
options="<option>Select 2</option>"
+"<option value='1'>sub product 1</option>"
+"<option value='2'>sub product 2</option>";
$("#select2").html(options);
}
else if(value=="2")
{
options="<option>Select 2</option>"
+"<option value='3'>sub product 3</option>"
+"<option value='4'>sub product 4</option>";
$("#select2").html(options);
}
else if(value=="3")
{
options="<option>Select 2</option>"
+"<option value='5'>sub product 5</option>"
+"<option value='6'>sub product 6</option>";
$("#select2").html(options);
}
else
$("#select2").find('option').remove()
});
});
</script>
</head>
<body>
<select id="select1">
<option value="" selected>select</option>
<option value="1">product 1</option>
<option value="2">product 2</option>
<option value="3">product 3</option>
</select>
<select id="select2">
</select>
</body>
</html>

To generate the dropdown on change of another select dropdown, you can initially, generate the object containing value and text to display for the second dropdown.
Then on change of first select dropdown value, you can iterate through the array and populate the second dropdown.
let selectOptions = {
1: [{
value : "1",
text: "sub product 1"
}],
2: [{
value : "2",
text: "sub product 2"
}],
3: [{
value : "3",
text: "sub product 3"
}]
}
$("#select1").change(function(){
let select2 = $("#select2");
select2.empty();
console.log(selectOptions[$(this).val()]);
selectOptions[$(this).val()].forEach(function(item){
select2.append($("<option />").val(item.value).text(item.text));
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option value="1">product 1</option>
<option value="2">product 2</option>
<option value="3">product 3</option>
</select>
<select id="select2">
<option value="1">sub product 1</option>
<option value="2">sub product 2</option>
<option value="3">sub product 3</option>
<option value="4">sub product 4</option>
<option value="5">sub product 5</option>
</select>

Show a second select box based on the option chosen in the first?

I have the following select drop down box:
<select name="selectcourier" required>
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
What I want to do is if Interlink is selected a secondary select box appears below it and disappears if it unselected and another option is chosen instead. This is the second select drop down box.
<label>Select Shipping Courier:</label>
<select name="selectcourier" required>
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
How can I go about getting this working?

bind an event with javascript on change and insert a new element in the DOM (the second select statement) like:
(provided you have jquery)
var secondSelect="your_html_here";
$("name='selectcourier'").change(function() {
if (this.val()=='Interlink') {
$('body').append(secondSelect); }
else {
$('#secondselectid').remove();
});
customise the html and where you want to append the second select

<script>
$(function(){
$('#s1').hide();
});
function call()
{
var check=$('#s2').val();
if(check=="Interlink")
{
$('#s1').show();
}
else
{
$('#s1').hide();
}
}
</script>
<select name="selectcourier" required onchange="call();" id="s2" >
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
<label>Select Shipping Courier:</label>
<select name="selectcourier" required id="s1">
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
You can use the above code to achieve your task

Just react on the event of changing the value of the first select.
If the value equals 'Interlink' display the second select - if the value is something else hide the second select.
<select name="selectcourier" required onchange="document.getElementById('interlink_addition').style.display = (this.value=='Interlink' ? 'block' : 'none')">
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
<div id="interlink_addition" style="display:none">
<label>Select Shipping Courier:</label>
<select name="selectcourier" required>
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
</div>

you can use ajax for this. write a ajax function to show second select box and call it on onChange event of the first select Box

Multiple id selectors

I have a form with 2 drop down lists on the same page using the same ids.
<select id="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select id="county">
<option value="">Select a country first...</option>
</select>
<div style="clear:both"> </div>
<select id="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select id="county">
<option value="">Select a country first...</option>
</select>
Not sure how to I change the JavaScript code so the second county drop down list functions same as the first one. The existing javascript and how it functions can be seen here:
http://jsfiddle.net/pfYEb/10/

You'll probably want to use class="country" instead of id="country" so that your selector will match both. (same for your id="county") In your jsfiddle, you'll also need to distinguish which county to change within your country change event. One easy way to do this is to use the index of the current element.
I've forked your jsfiddle here.
HTML
<select class="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select class="county">
<option value="">Select a country first...</option>
</select>
<div style="clear:both"> </div>
<select class="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select class="county">
<option value="">Select a country first...</option>
</select>
​
Relevant Javascript:
$('.country').change(function() {
var country = $(this).val(),
county = $('.county').eq($(".country").index(this)); // This matches the county
// Empty county dropdown
county.empty();
// Update dropdown with appropriate contents
if (country === '') {
county.append('<option value="">Select a country first...</option>');
} else {
$.each(counties[country], function(i, v) {
county.append('<option value="' + i + '">' + v + '</option>');
});
}
});

You can't really solve this querying by id. Element ID's have to be unique within a document by specification by the way. Your best shot, use classes instead.