Develop Reference

How do I hide the select tag based on Js iteration of a list

I had a challenge getting this question but tried to research and redo it.
I'm trying to get an item in a list from a controller, then iterate through the list. Based on the content of the array, I would like to show or hide the select that has options in it. I can't seem to hide or show any of them at the moment.
var names = ['marketing']; //or ['business']
var text = "";
var i;
//$(document).ready(function() {
for (i = 0; i < names.length; i++) {
if (names[i] === 'business') {
//alert('Hooray');
$("#business").show("slow");
$(".marketing").hide("fast");
} else
if (names[i] === 'marketing') {
$("#marketing").show("slow");
$(".marketing").hide("fast");
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all" id="note">
Some content will be posted here...
</div>
<select id="marketing" multiple>
<option value="1">Definition</option>
<option value="2">Advertise</option>
<option value="3">Promotion</option>
</select>
<select id="business" multiple>
<option value="1">Definition</option>
<option value="2">Buy</option>
<option value="3">Sell</option>
</select>

If your array contains the exact name of the id you can "hide" the elements with CSS and show them with two lines of javascript
var names = ['marketing'];//or ['business']
names.forEach( name => {
$('#' + name).show('slow')
});
select {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all" id="note">
Some content will be posted here...
</div>
<select id="marketing" multiple>
<option value="1">Definition</option>
<option value="2">Advertise</option>
<option value="3">Promotion</option>
</select>
<select id="business" multiple>
<option value="1">Definition</option>
<option value="2">Buy</option>
<option value="3">Sell</option>
</select>

html form using javaScript to call out some function

I'm a beginner and I'm try to set up a form. I have written the html/css code. What I wanted to do is to click on a level of study such as Bachelors, I want all the courses under bachelors to display in the second box (choose course) while hiding the rest of the courses in the box.
label {
font-family: sans-serif;
font-size: 1rem;
padding-right: 10px;
}
select {
font-size: .9rem;
padding: 2px 5px;
}
<h2>This is a form</h2>
<p>Online Application:</p>
<form id="form1" action="#">
<label for="school-select">Choose levels of study:</label>
<select id="level-select">
<option value="">--Please choose an option--</option>
<option value="bachelor">Bachelors</option>
<option value="postgraduates">Postgraduates</option>
<option value="phd">PhD</option>
</select>
</form>
<br>
<form id="form2" action="#">
<label for="course-select">Choose course:</label>
<select id="cour">
<optgroup label="Bachelors">
<option>Microbiology</option>
<option>chemistry</option>
<option>physics</option>
</optgroup>
<optgroup label="Postgraduates">
<option>computer</option>
<option>biology</option>
<option>accounting</option>
</optgroup>
<optgroup label="PhD">
<option>business</option>
<option>fisheries</option>
<option>agric</option>
</optgroup>
</select>
</form>

Here, I've come up with a simple solution to this. I've changed your html a little bit. I've set the same values as their optgroup's label so that we can choose the specific optgroup for being shown. So the solution is simple:
Hide all the options of the second box.
Show the one by courses.querySelector('[label="' + value + '"]'); this, where value is your first box's selected value.
Have a look at the code snippet below:
function getLevels() {
var value = document.getElementById("level-select").value;
if (value) {
var courses = document.querySelector("#cour");
var all_options = courses.querySelectorAll('optgroup');
var show_courses = courses.querySelector('[label="' + value + '"]');
all_options.forEach(function (element) {
element.style.display = "none";
});
show_courses.style.display = "block";
}
}
<h2>This is a form</h2>
<p>Online Application:</p>
<form id="form1" action="#">
<label for="school-select">Choose levels of study:</label>
<select id="level-select" onchange="getLevels()">
<option value="">--Please choose an option--</option>
<option value="Bachelors">Bachelors</option>
<option value="Postgraduates">Postgraduates</option>
<option value="PhD">PhD</option>
</select>
</form>
<br>
<form id="form2" action="#">
<label for="course-select">Choose course:</label>
<select id="cour">
<option selected>--Choose Course--</option>
<optgroup label="Bachelors">
<option>Microbiology</option>
<option>chemistry</option>
<option>physics</option>
</optgroup>
<optgroup label="Postgraduates">
<option>computer</option>
<option>biology</option>
<option>accounting</option>
</optgroup>
<optgroup label="PhD">
<option>business</option>
<option>fisheries</option>
<option>agric</option>
</optgroup>
</select>
</form>

Just add onClick event in <option> tag?
<option onClick="myFunction()">Microbiology</option>
<script>
function myFunction() {
//do what you want..
}
</script>```

Add a onchange event to the select field, and push the value to a function like;
<select id="level-select" onchange="setLevel(this.value)">
Hide all option groups in css;
#cour optgroup {
display:none;
}
Give all option groups a unique ID containing the value of the first select, like;
<optgroup label="Bachelors" id="course_bachelor">
And now the function for the onchange event could be something like this;
function setLevel (val) {
var elements = document.getElementsByTagName('optgroup');
// Loop through all elements and check if they are hidden or shown
for(var i=0; i < elements.length; i++) {
if (elements[i].id === 'course_' + val) {
elements[i].style.display = 'block';
} else {
elements[i].style.display = 'none';
}
}
}

label {
font-family: sans-serif;
font-size: 1rem;
padding-right: 10px;
}
select {
font-size: .9rem;
padding: 2px 5px;
}
<h2>This is a form</h2>
<p>Online Application:</p>
<form id="form1" action="#">
<label for="school-select">Choose levels of study:</label>
<select id="level-select">
<option value="">--Please choose an option--</option>
<option value="bachelor">Bachelors</option>
<option value="postgraduates">Postgraduates</option>
<option value="phd">PhD</option>
</select>
<br>
<label for="course-select">Choose course:</label>
<select id="cour">
</select>
</form>
var select = document.getElementById("level-select");
select.onchange(() => {
if(select.value == 'bachelor') {
document.getElementById("cour").value == "<optgroup label="Bachelors">
<option>Microbiology</option>
<option>chemistry</option>
<option>physics</option>
</optgroup>"
}
})
Do this for all the conditions.

You'll need to use some Javascript to do this. Here's one solution that could work for you.
I've updated some of your html names (first dropdown values to exactly match the 'optgroup' labels in your second dropdown). Also added some CSS to have the options for the courses dropdown to not show until you've selected a valid option, which prevents the user from, say, going back to change the first dropdown value while the second dropdown value stays the same. Always 'idiot-proof' your UI:
//grab both dropdowns and store in variable
var levelSelectDropdown = document.querySelector('#level-select');
var coursesDropdown = document.querySelector('#cour');
//create an on 'change' event for first dropdown
levelSelectDropdown.addEventListener('change', levelDropdownChange);
function levelDropdownChange(e){
var selectedLevelOfStudy = e.target.value;
var coursesGroups = coursesDropdown.querySelectorAll('optgroup');
//this basically hides the 'default' empty option that's auto-selected
//by default
coursesDropdown.querySelector('option[value="default"]').style.display = 'none';
//loop through all 'optgroup' items in second dropdown (coursesGroups)
coursesGroups.forEach(function(element){
//default course dropdown to first element (this essentially resets
//the course dropdown each time level of study dropdown is changed
coursesDropdown.selectedIndex = 0;
//make sure all optgroups are hidden
element.style.display = 'none';
//only display optgroup whose label matches the value selected
//from first dropdown
if(element.getAttribute('label') == selectedLevelOfStudy){
element.style.display = 'block';
}
})
}
label {
font-family: sans-serif;
font-size: 1rem;
padding-right: 10px;
}
select {
font-size: .9rem;
padding: 2px 5px;
}
#cour optgroup {
display:none;
}
<h2>This is a form</h2>
<p>Online Application:</p>
<form id="form1" action="#">
<label for="school-select">Choose levels of study:</label>
<select id="level-select">
<option value="">--Please choose an option--</option>
<option value="bachelors">Bachelors</option>
<option value="postgraduates">Postgraduates</option>
<option value="phd">PhD</option>
</select>
</form>
<br>
<form id="form2" action="#">
<label for="course-select">Choose course:</label>
<select id="cour">
<option value="default"></option>
<optgroup label="bachelors">
<option>Microbiology</option>
<option>chemistry</option>
<option>physics</option>
</optgroup>
<optgroup label="postgraduates">
<option>computer</option>
<option>biology</option>
<option>accounting</option>
</optgroup>
<optgroup label="phd">
<option>business</option>
<option>fisheries</option>
<option>agric</option>
</optgroup>
</select>
</form>

label {
font-family: sans-serif;
font-size: 1rem;
padding-right: 10px;
}
select {
font-size: .9rem;
padding: 2px 5px;
}
<h2>This is a form</h2>
<p>Online Application:</p>
<form id="form1" action="#">
<script lang="javascript">
function onLevelofStudyChange()
{
var selectedLevel=document.getElementById("level-select").value;
var course = document.querySelector("#cour");
var alloption = course.querySelectorAll('optgroup')
var getByLabel = course.querySelector('[label="'+selectedLevel+'"]');
//Hide all Optgroups
alloption.forEach(function(element){
element.style.display = "none";
});
if(getByLabel!=null)
getByLabel.style.display = "block";
}
</script>
<label for="school-select">Choose levels of study:</label>
<select id="level-select" onchange="onLevelofStudyChange()">
<option value="">--Please choose an option--</option>
<option value="bachelor">Bachelors</option>
<option value="postgraduates">Postgraduates</option>
<option value="phd">PhD</option>
</select>
</form>
<br>
<form id="form2" action="#">
<label for="course-select">Choose course:</label>
<select id="cour">
<option>--Please Choose course--</option>
<optgroup label="bachelor" style="display:none">
<option>Microbiology</option>
<option>chemistry</option>
<option>physics</option>
</optgroup>
<optgroup label="postgraduates" style="display:none">
<option>computer</option>
<option>biology</option>
<option>accounting</option>
</optgroup>
<optgroup label="phd" style="display:none">
<option>business</option>
<option>fisheries</option>
<option>agric</option>
</optgroup>
</select>
</form>
Try this, it should work also note I have changed Optgroup label inorder to match the value of first dropdown

Change CSS color from select list option

I'm trying to change css based on a select list options, what am I doing wrong?
Help is much appreciated! (I can't change the HTML)
Many thanks.
Erwin
$("select").change(function() {
var color = $("#5f01264e722ae").val();
$("#sw_poster_text2").css("background", color);
});
.sw_poster_text2 {
margin: 30px;
background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wapf-field-input">
<select data-is-required="" data-field-id="5f01264e722ae" name="wapf[field_5f01264e722ae]" class="wapf-input">
<option value="">choose an option</option>
<option value="0z489" data-wapf-label="black">black </option>
<option value="wu4xz" data-wapf-label="brown">brown </option>
<option value="5k848" data-wapf-label="blue">blue </option>
</select>
</div>
<div class="sw_poster_text2">My name</div>

Use $(this).find('option:selected').data('wapf-label') to get the value of the select and use . instead of # to select elements with a particular class.
var color = $(this).find('option:selected').data('wapf-label')
$(".sw_poster_text2").css("background", color);
$("select").change(function() {
var color = $(this).find('option:selected').data('wapf-label')
$(".sw_poster_text2").css("background", color);
});
.sw_poster_text2 {
margin: 30px;
background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wapf-field-input">
<select data-is-required="" data-field-id="5f01264e722ae" name="wapf[field_5f01264e722ae]" class="wapf-input">
<option value="">choose an option</option>
<option value="0z489" data-wapf-label="black">black </option>
<option value="wu4xz" data-wapf-label="brown">brown </option>
<option value="5k848" data-wapf-label="blue">blue </option>
</select>
</div>
<div class="sw_poster_text2">My name</div>

Your option value not is a valid color, you need set a valid color to after set in your style try this:
$("select").change(function() {
var color = $("#5f01264e722ae").val();
$("#sw_poster_text2").css("background", color);
});
.sw_poster_text2 {
margin: 30px;
background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wapf-field-input">
<select data-is-required="" data-field-id="5f01264e722ae" name="wapf[field_5f01264e722ae]" class="wapf-input">
<option value="">choose an option</option>
<option value="black" data-wapf-label="black">black</option>
<option value="brown" data-wapf-label="brown">brown</option>
<option value="blue" data-wapf-label="blue">blue</option>
</select>
</div>
<div class="sw_poster_text2">My name</div>

Javascript : Show content of select element on focus on tab key navigation

I want to show all the contents of select element (for below snippet) on focus when navigating to it using tab key.
select {
width: 200px;
border: 1px solid #aaa;
border-radius: 4px;
height: 28px;
overflow: hidden;
}
<select id="" class="select2" >
<option value="" disabled selected>Select Fruit</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>
A solution I've found in jQuery but I want the same function in plain JavaScript which I'm not able to do.
jQuery code :-
$('.select2').select2({
minimumResultsForSearch: 20
});
$(document).on('focus', '.select2.select2-container', function (e) {
var isOriginalEvent = e.originalEvent
var isSingleSelect = $(this).find(".select2-selection--single").length > 0
if (isOriginalEvent && isSingleSelect) {
$(this).siblings('select:enabled').select2('open');
}
});

Try something like
<select id="select2" class="select2" >
<option value="" disabled selected>Select Fruit</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>
document.getElementById("select2").addEventListener("focus", myFunction);
function myFunction() {
var e = document.getElementById("select2");
console.log(e.options[e.selectedIndex].value);
}

Check if two options have been selected

I need to know if two options from a select dropdown list have been chosen so I can take the text and make a button that has that text inside of it show up. Right now the button shows with some text before the options have been clicked but doesn't show up again if closed and options have been chosen.
If someone has answered this question please let me know I couldn't find anything to help me.
Here's my code:
$(document).ready(function () {
var valueFrom = $('#revenueFrom option:selected').text();
var valueTo = $('#revenueTo option:selected').text();
if ($('#revenueFrom option').data('clicked', true) && $('#revenueTo option').data('clicked', true)) {
$('#annual-revenue-button').text("");
$('#annual-revenue-button').append(valueFrom + "To:" + valueTo + " " + "×");
$('#annual-revenue-button').show('fast');
};
});
$('.search-popup').click(function () {
$(this).hide('fast');
});
button{
background-color:whitesmoke;
border-radius: 20px;
display:none;
}
button:hover{
background-color:lightgray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class="search-popup btn" id="annual-revenue-button" type="button"></button>
<form class="form-inline revenue">
<div class="form-group">
<label>Annual Revenue</label>
<select name="revenueFrom" class="form-control" id="revenueFrom">
<option value="" selected disabled>From:</option>
<option value="0">$0</option>
<option value="1">$500,000</option>
<option value="2">$1 Million</option>
<option value="3">$2.5 Million</option>
<option value="4">$5 Million</option>
</select>
<select name="revenueTo" class="form-control to" id="revenueTo">
<option value="" selected disabled>To:</option>
<option value="0">$0</option>
<option value="1">$500,000</option>
<option value="2">$1 Million</option>
<option value="3">$2.5 Million</option>
<option value="4">$5 Million</option>
</select>
</div>
</form>

You need to set a .change() event listener on the select elements.
When one of them has been changed, check the values of those select elements are not empty, and then show your button.
$(document).ready(function () {
$('#revenueFrom, #revenueTo').change(function(){
if ($('#revenueFrom').val() && $('#revenueTo').val()) {
var valueFrom = $('#revenueFrom option:selected').text();
var valueTo = $('#revenueTo option:selected').text();
$('#annual-revenue-button').html("From: " + valueFrom + " To: " + valueTo + " ×").show('fast');
};
});
});
$('.search-popup').click(function () {
$(this).hide('fast');
});
button{
background-color:whitesmoke;
border-radius: 20px;
display:none;
}
button:hover{
background-color:lightgray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class="search-popup btn" id="annual-revenue-button" type="button"></button>
<form class="form-inline revenue">
<div class="form-group">
<label>Annual Revenue</label>
<select name="revenueFrom" class="form-control" id="revenueFrom">
<option value="" selected disabled>From:</option>
<option value="0">$0</option>
<option value="1">$500,000</option>
<option value="2">$1 Million</option>
<option value="3">$2.5 Million</option>
<option value="4">$5 Million</option>
</select>
<select name="revenueTo" class="form-control to" id="revenueTo">
<option value="" selected disabled>To:</option>
<option value="0">$0</option>
<option value="1">$500,000</option>
<option value="2">$1 Million</option>
<option value="3">$2.5 Million</option>
<option value="4">$5 Million</option>
</select>
</div>
</form>

You need to add Multiple and add [] after name=revenueFrom So an array with all of the elements is being passed on form submission.
This post may also be of use to you how to access multiple select array data in javascript
Note this function:
function getSelectedOptions(element) {
// validate element
if(!element || !element.options)
return []; //or null?
// return HTML5 implementation of selectedOptions instead.
if (element.selectedOptions)
return element.selectedOptions;
// you are here because your browser doesn't have the HTML5 selectedOptions
var opts = element.options;
var selectedOptions = [];
for(var i = 0; i < opts.length; i++) {
if(opts[i].selected) {
selectedOptions.push(opts[i]);
}
}
return selectedOptions;
}
It would also be possible to make an event listener that looks for change on the select and appends a new element somewhere else with the selected data if that's what you needed, feel free to update your question if you need a more specific answer.