Develop Reference

Linking <option> with onclick [duplicate]

This question already has answers here:
adding onclick event to html select option
(3 answers)
Closed 1 year ago.
I am building my own shopping website, and I got stuck in this part:
<label for="option">Option</label>
<select id="option">
<optgroup>
<option onclick="changeValueA()">Option A</option>
<option onclick="changeValueB()">Option B</option>
</optgroup>
</select>
<p>You choosed Option <span id="option-value"></span></p>
<script>
function changeValueA(){
document.getElementById("option-value").innerHTML = "Option A";
}
function changeValueB(){
document.getElementById("option-value").innerHTML = "Option B";
}
</script>
I want to make "option-value" display "Option A" if changeValueA() is called by clicking the Option A from <select>, and I want to make "option-value" display "Option B" if changeValueB() is called by clicking the Option B from <select>.
However, the code doesn't work. It would be really grateful if you help me this part!

option elements don't respond to click events (as you can see by the added console.logs below); you instead need to check the <select>'s value:
// these functions never run:
function changeValueA() {
console.log("A")
document.getElementById("option-value").innerHTML = "Option A";
}
function changeValueB() {
console.log("B")
document.getElementById("option-value").innerHTML = "Option B";
}
// This one will be triggered by the select's onchange handler,
// and passes the selected value in so you don't need multiple
// similar functions:
function changeValue(val) {
document.getElementById("option-value").innerHTML = val;
}
<label for="option">Option</label>
<select id="option" onchange="changeValue(this.value)">
<optgroup>
<option onclick="changeValueA()">Option A</option>
<option onclick="changeValueB()">Option B</option>
</optgroup>
</select>
<p>You chose <span id="option-value"></span></p>

How to get value of HTML dropdown menu for use in a JavaScript function? [duplicate]

This question already has answers here:
How to get selected value from Dropdown list in JavaScript
(6 answers)
Closed 2 years ago.
I'm trying to pass the answers from multiple dropdown menus like this one to a single button to answer question for a user. Any advice is very much appreciated.
<script lang="text/JavaScript">
function myFunction(){
//variables
var firstClass = document.getElementById("class1").value;
console.log(firstClass);
if(firstClass == Yes) {
firstClass = true;
}
else {
firstClass = false;
}
}
</script>
<form id="collegeGrad">
<p>Have you completed CLASS 1?</p>
<label>First Class</label>
<select id="class1">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
Currently the program says that "Yes" is not defined?

You missed the quotes on the first If statement.
It should have been like this ==>
if (firstClass == 'Yes') {firstClass = true;}

How to get selected text from select tag using event listener? [duplicate]

This question already has answers here:
Get selected option text with JavaScript
(16 answers)
Closed 2 years ago.
HTML
<select id='alpha'>
<option value='1'>one</option>
<option value='2'>two</option>
</select>
JAVASCRIPT
const select_node = document.getElementById('alpha');
select_node.addEventListener('change', (e)=>{
console.log(e.target.value); // get selected value.
},false);
I am getting selected value but how can I get selected text ?
I have tried google but nothing found anything.
So How can I get selected text using event listener ?

Try:
e.target.options[e.target.selectedIndex].text
.options property collects all of the <select> <option>s
.selectedIndex property returns the current index number of selected <option>
.text property of course is the text within an <option>TEXT</option>
or here's an easier way:
e.target.selectedOptions[0].text;
.selectedOptions property is .options and .selectedIndex together.
const select_node = document.getElementById('alpha');
select_node.addEventListener('change', (e) => {
console.log(e.target.value); // get selected value.
console.log(e.target.options[e.target.selectedIndex].text); // get selected text.
console.log(e.target.selectedOptions[0].text); // get selected text an easier way.
}, false);
<select id='alpha'>
<option value='1'>one</option>
<option value='2'>two</option>
</select>

You need to access the dropwdown's options at the dropdown's selectedIndex:
var select_node = document.getElementById("alpha");
select_node.addEventListener('change', (e)=>{
console.log(e.target.options[e.target.selectedIndex].text); // get selected value.
});

Unable to retrive data attribute using jquery [duplicate]

This question already has answers here:
html - how to get custom attribute of option tag in dropdown?
(7 answers)
Closed 3 years ago.
I have a select option dropdown like:
<select name="futsalSelect" id="futsalSelect" class="form-control">
<option data-timezone="MST" value="1" selected="">Sample futsal One</option>
<option data-timezone="EST" value="3">Sample futsal Three</option>
</select>
Now, I want to retrive that data-timezone value whenever I change that select option.
So, I tried with:
$("#futsalSelect").change(function() {
futsal_id = $(this).val();
timezone = $(this).attr("data-timezone");
console.log(timezone); //undefined
$("#futsalTimezone").text(timezone);
});
But, it is returning undefined.

You want to read the data attribute of the option, not of select.
This will do it:
$('#futsalSelect').change(function() {
futsal_id = $(this).val();
timezone = $(this).find('option:selected').data('timezone');
console.log(timezone); //undefined
$('#futsalTimezone').text(timezone);
});

It is returning undefined because this inside the function refers to the main #futsalSelect element and not the selected option. To get the desired value, do it like this:
$("#futsalSelect").change(function() {
timezone = this.options[this.selectedIndex].getAttribute("data-timezone");
console.log(timezone);
$("#futsalTimezone").text(timezone);
});

use the option:selected selector:
$("#futsalSelect").change(function() {
futsal_id = $("#futsalSelect option:selected" ).val();
timezone = $("#futsalSelect option:selected" ).attr("data-timezone");
console.log(timezone); //undefined
$("#futsalTimezone").text(timezone);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="futsalSelect" id="futsalSelect" class="form-control">
<option data-timezone="MST" value="1" selected="">Sample futsal One</option>
<option data-timezone="EST" value="3">Sample futsal Three</option>
</select>

you're trying to get the value from select data-timezone.
you must take it to option inside select.
hope it helps.

How to determine which options selected in multiple <select>? [duplicate]

This question already has answers here:
Get selected value of a dropdown's item using jQuery
(31 answers)
Closed 8 years ago.
I have this <select>:
<select id="week" multiple="multiple" >
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="7">Sunday</option>
</select>
How can I know that whether each <option> is selected or not in jQuery or JS?

Try to use :selected selector to grab the selected option elements,
$('#week option:selected').each(function(){
//Your code to manipulate things over selected option elements
});

You need to use .is :
$('#week option').each(function() {
if($(this).is(':selected')){
//code
}
});

You can use length property of selected and total options, see below jquery :
var totalOptions = $('#week option').length; // all options available
var selectedOptions = $('#week option:selected').length;// selected options
if(totalOptions == selectedOptions)
alert('All options selected');
else
alert('Not all options selected');