The code below outputs:
You selected Audi
How can I change this so that below the select list there is, on loading, my text about Audi which then changes to my text about BMW etc when the corresponding option is selected (using vanilla js not jQuery)?
var mySelect = document.getElementById('mySelect');
mySelect.onchange = function() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
<select id="mySelect">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<div id="demo"></div>
You can shorten your code:
demo.innerHTML = "You selected: " + mySelect.value;
mySelect.onchange = function() {
demo.innerHTML = "You selected: " + this.value;
}
<select id="mySelect">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<div id="demo"></div>
You can use the onchange event, which gets fired as soon as a new value is selected. Also, remember to properly close tags.
HTML
<select id="select">
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Mercedes">Mercedes</option>
<option value="Volvo">Volvo</option>
</select>
<div id="div"></div>
JavaScript
function onValueChanged (e)
{
document.getElementById('div').innerHTML = `You text about ${e.target.value}...`;
}
document.getElementById('select').onchange = onValueChanged;
Here's the fiddle.
This worked for me
var mySelect = document.getElementById('mySelect');
mySelect.addEventListener('change', (e) => {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
})
<select id="mySelect">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<p id="demo"></p>
You just need to add the line on the beginning.
In order to maintain the DRY principle, I used an external function to update the demo div:
function updateDemo() {
var mySelect = document.getElementById('mySelect');
document.getElementById("demo").innerHTML = `You selected: ${mySelect.value}`
}
// Just add this line:
updateDemo();
mySelect.onchange = function() {
updateDemo();
}
<select id="mySelect">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<div id="demo"></div>
Well first of all have a look here :
https://www.w3schools.com/tags/tag_option.asp
the option tag have a start and closing tag as well :)
Plus there is type error see below :
"message": "TypeError: document.getElementById(...) is null",
Here is a sample snippet
(function () {
'use strict';
document.querySelector('#mySelect').addEventListener('change', function (event) {
var x = event.target.value;
document.querySelector("#demo").innerHTML = "You selected: " + x;
})
})();
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8" />
</head>
<body>
<select id="mySelect">
<option value="Audi">Audi </option
><option value="BMW">BMW </option
><option value="Mercedes">Mercedes </option
><option value="Volvo">Volvo </option>
</select>
<div id="demo"></div>
</body>
</html>
Related
I need to make a program wherein , when i select whichever font-family,font-size,background-color and text-color from the drop -down, same changes should be made to the text in the textarea. As of now, if i change the background color , only that changes, nothing else happens to the text area. Please help.
<html>
<head>
<title>Binding</title>
</head>
<body>
<script>
function changeColor() {
var newColor = document.getElementById('bgColorPicker').value;
document.bgColor = newColor;
}
function changeFont(){
var newFont=document.getElementById('fontPicker').value;
document.getElementById('textarea').style.fontStyle=newFont;
}
function changeFontSize(){
var newFontSize=document.getElementById('fontSizePicker').value;
document.getElementById('textarea').style.fontSize=newFontSize;
}
function changeTextColor(){
var newTextColor=document.getElementById('textColorPicker').value;
document.getElementById('textarea').color=newTextColor;
}
</script>
<select id="bgColorPicker" onchange="changeColor()">
<option value="transparent">--Select--</option>
<option value="#FFFF99">Yellow</option>
<option value="#0099CC">Blue</option>
<option value="limegreen"> Green</option>
</select>
<br>
<select id="fontPicker" onchange="changeFont()">
<option value="transparent">--Select--</option>
<option value="Arial">Yellow</option>
<option value="Verdana">Blue</option>
<option value="Georgia"> Green</option>
</select>
<br>
<select id="textColorPicker" onchange="changeTextColor()">
<option value="transparent">--Select--</option>
<option value="#DAA520">GoldenRod</option>
<option value="#6B8E23">OliveDrab</option>
<option value="#DC143C">Crimson</option>
</select>
<select id="fontSizePicker" onchange="changeFontSize()">
<option value="transparent">--Select--</option>
<option value="100px">Large</option>
<option value="50px">Medium</option>
<option value="20px">Small</option>
</select>
TextArea:<textarea name='textarea' rows='15' cols='50'></textarea>
</body>
</html>
You forgot to add id to the textarea
document.getElementById('textarea').color should be document.getElementById('textarea').style.color
document.getElementById('textarea').style.fontStyle should be document.getElementById('textarea').style.fontFamily
function changeColor() {
var newColor = document.getElementById('bgColorPicker').value;
document.bgColor = newColor;
}
function changeFont() {
var newFont = document.getElementById('fontPicker').value;
document.getElementById('textarea').style.fontFamily = newFont;
}
function changeFontSize() {
var newFontSize = document.getElementById('fontSizePicker').value;
document.getElementById('textarea').style.fontSize = newFontSize;
}
function changeTextColor() {
var newTextColor = document.getElementById('textColorPicker').value;
document.getElementById('textarea').style.color = newTextColor;
}
<select id="bgColorPicker" onchange="changeColor()">
<option value="transparent">--Select--</option>
<option value="#FFFF99">Yellow</option>
<option value="#0099CC">Blue</option>
<option value="limegreen"> Green</option>
</select>
<br>
<select id="fontPicker" onchange="changeFont()">
<option value="transparent">--Select--</option>
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Georgia"> Georgia</option>
</select>
<br>
<select id="textColorPicker" onchange="changeTextColor()">
<option value="transparent">--Select--</option>
<option value="#DAA520">GoldenRod</option>
<option value="#6B8E23">OliveDrab</option>
<option value="#DC143C">Crimson</option>
</select>
<select id="fontSizePicker" onchange="changeFontSize()">
<option value="transparent">--Select--</option>
<option value="100px">Large</option>
<option value="50px">Medium</option>
<option value="20px">Small</option>
</select> TextArea:
<textarea name='textarea' id="textarea" rows='15' cols='50'></textarea>
I need some assistance with the code below, I want to set what has been chosen to the textarea but I dont want to equate/return the value attribute but the narration. for the case below the textarea is getting value 1 and I want it to get the narration Line One
var myOption = document.getElementById('priority1');
var myStrategy = document.getElementById('strategy1');
myStrategy.onchange = function () {
myOption.value = this.value;
}
<textarea id="priority1" name="priority1"></textarea>
<select id="strategy1" name="strategy1">
<option value=""></option>
<option value="1">Line one</option>
<option value="2">Line Two</option>
<option value="3">Line Three</option>
</select>
You need to find the selectedIndex's option's text content (or HTML Content).
<textarea id="priority1" name="priority1"></textarea>
<select id="strategy1" name="strategy1">
<option value=""></option>
<option value="1">Line one</option>
<option value="2">Line Two</option>
<option value="3">Line Three</option>
</select>
<script type="text/javascript">
var myOption = document.getElementById('priority1');
var myStrategy = document.getElementById('strategy1');
myStrategy.onchange = function() {
myOption.value = this.querySelectorAll('option')[this.selectedIndex].innerHTML;
}
</script>
You can change the value of each option
<!DOCTYPE html>
<html>
<head lang="en">
<title>Testing Code</title>
</head>
<textarea id="priority1" name="priority1"></textarea>
<select id="strategy1" name="strategy1">
<option value=""></option>
<option value="Line one">Line one</option>
<option value="Line two">Line Two</option>
<option value="Line three">Line Three</option>
</select>
<body>
<script type="text/javascript">
var myOption = document.getElementById('priority1');
var myStrategy = document.getElementById('strategy1');
myStrategy.onchange = function () {
myOption.value = this.value;
}
</script>
</body>
</html>
You could get the selected option by index this.options[this.selectedIndex] then get the option text using .text instead of value :
myStrategy.onchange = function () {
myOption.value = this.options[this.selectedIndex].text
}
Hoep this helps.
var myOption = document.getElementById('priority1');
var myStrategy = document.getElementById('strategy1');
myStrategy.onchange = function () {
myOption.value = this.options[this.selectedIndex].text
}
<select id="strategy1" name="strategy1">
<option value=""></option>
<option value="1">Line one</option>
<option value="2">Line Two</option>
<option value="3">Line Three</option>
</select>
<br><br>
<textarea id="priority1" name="priority1"></textarea>
I'm trying to display ALL selected values in a drop down list. The code shown below works to display only the first value however I'm struggling on understanding how to get it to display each value that is selected.
function myFunction() {
var x = document.getElementsByName("Car").item(0).value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
<p>Select a new car from the list.</p>
<select name="Car" multiple="on" size="5" onchange="myFunction()">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<br>
The car is:
<p id="demo"></p>
https://jsfiddle.net/2gq824q2/12/
Why not use jQuery when you can?
function myFunction() {
var x = $('#car').val()
$('#demo').html("You selected: " + x.join(", "))
}
$('#car').change(function() {
myFunction();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Select a new car from the list.</p>
<select id="car" name="Car" multiple="on" size="5">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<br>
The car is:
<p id="demo"></p>
Here you go: https://jsfiddle.net/2gq824q2/15/
function myFunction() {
var sSelected = '';
[].forEach.call( document.querySelectorAll('#Car :checked') , function(elm){
if(sSelected !== '') sSelected += ', ';
sSelected += elm.value;
})
document.getElementById("demo").innerHTML = "You selected: " + sSelected;
}
<p>Select a new car from the list.</p>
<select id="Car" multiple="on" size="5" onchange="myFunction()">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<br>
The car is:
<p id="demo"></p>
I updated the function, and note the select now has an ID.
I have written separate Javascript to change font color and font size. How to merge it to make the change of both simultaneously to the same font.
`enter code here`
<!DOCTYPE html>
<html>
<body>
<form>
<select onchange="ChangeFont (this);" size="1">
<option value="0.1">0.1</option>
<option value="0.25">0.25</option>
<option value="0.5">0.5</option>
<option value="0.75">0.75</option>
<option selected="1.0">1.0</option>
<option value="1.25">1.25</option>
<option value="1.5">1.5</option>
<option value="1.75">1.75</option>
<option value="2">2</option>
</select>
<span id="fontTest" style="font-size-adjust: 0.6">Change font-size-adjust</span>
</form>
<script type="text/javascript">
function ChangeFont (selectTag) {
// Returns the index of the selected option
var whichSelected = selectTag.selectedIndex;
// Returns the selected options values
var selectState = selectTag.options[whichSelected].text;
var fontTest = document.getElementById ("fontTest");
if ('fontSizeAdjust' in fontTest.style) {
fontTest.style.fontSizeAdjust = selectState;
} else {
alert ("Your browser doesn't support this example!");
}
}
</script>
</body>
</html>
Another one is font color change:
<!DOCTYPE html>
<html>
<body>
</form>
<select name="color" type="text" onchange="changeBackground(this);" >
<option value="select">Select</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="white">White</option>
<option value="black">Black</option>
</select>
<span id="coltext">This text should have the same color as you put in the text box</span>
</form>
<script>
function changeBackground(obj) {
document.getElementById("coltext").style.color = obj.value;
}
</script>
</body>
</html>
How to merge these two Java scripts? Please help me.
Try this
<!DOCTYPE html>
<html>
<body>
<form>
<select onchange="ChangeBackgroundFont(this,'font');" size="1">
<option value="0.1">0.1</option>
<option value="0.25">0.25</option>
<option value="0.5">0.5</option>
<option value="0.75">0.75</option>
<option selected="1.0">1.0</option>
<option value="1.25">1.25</option>
<option value="1.5">1.5</option>
<option value="1.75">1.75</option>
<option value="2">2</option>
</select>
<select name="color" type="text" onchange="ChangeBackgroundFont(this,'background');" >
<option value="select">Select</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="white">White</option>
<option value="black">Black</option>
</select>
<span id="fontbackgroundTest" style="font-size-adjust: 0.6">Change font-size-adjust</span>
</form>
<script type="text/javascript">
function ChangeBackgroundFont (selectTag,type) {
if(type=="font") {
// Returns the index of the selected option
var whichSelected = selectTag.selectedIndex;
// Returns the selected options values
var selectState = selectTag.options[whichSelected].text;
var fontTest = document.getElementById ("fontbackgroundTest");
if ('fontSizeAdjust' in fontTest.style) {
fontTest.style.fontSizeAdjust = selectState;
} else {
alert ("Your browser doesn't support this example!");
}
}else{
document.getElementById("fontbackgroundTest").style.color = selectTag.value;
}
}
</script>
</body>
</html>
I did for you enjoy ):
i am having two multi select dropdowns. those two dropdowns will have the same set of options (like monday, tuesday ,wednesday). now i want to have a validation where in one dropdown of these selected to some options(these are multi select dropdowns.), then the same options should not be available to select from the other dropdown.(means those should be disable.) here for multi select i am using one UI js plugin multi select dropdown javascript plugin.
<label for="shift_day_list_1">Day</label>
<input name="shift[day_list_1][]" type="hidden" value="" /><select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]"><option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option></select>
<label for="shift_day_list_2">Day</label>
<input name="shift[day_list_2][]" type="hidden" value="" /><select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_2][]"><option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option></select>
this is my js code:
$(document).ready(function() {
$('#day_list_1').SumoSelect({
placeholder: 'Select Days',
csvDispCount: 3
});
$('#day_list_2').SumoSelect({
placeholder: 'Select Days',
csvDispCount: 3
});
});
how to implement this? please help me?
I've created a full commented snippet for you:
// when all the elements in the DOM are loaded
document.addEventListener('DOMContentLoaded', function() {
// get both lists and their HTMLOptionElement nodes
var list1 = document.getElementById('day_list_1'),
list2 = document.getElementById('day_list_2'),
options1 = list1.querySelectorAll('option'),
options2 = list2.querySelectorAll('option');
// add event handlers when the lists are changed to call the update function
$(list1).change(update).SumoSelect();
$(list2).change(update).SumoSelect();
function update(e) {
// when the lists are changed, loop through their HTMLOptionElement nodes
var other = (list1 === this) ? list2 : list1;
for (var i = 0; i < options1.length; i++) {
// options of list1 should be disabled if selected in list2 and vice-versa
this[i].selected ? other.sumo.disableItem(i) : other[i].selected ? void 0 : other.sumo.enableItem(i);
}
}
});
.form-control {
width: 130px;
height: 130px;
}
<link href="http://hemantnegi.github.io/jquery.sumoselect/stylesheets/sumoselect.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://hemantnegi.github.io/jquery.sumoselect/javascripts/jquery.sumoselect.min.js"></script>
<select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_2][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
you can use normal js to achieve this.Use this following code on day_list_1 on onChange event.
document.getElementById("day_list_2").options[document.getElementById("day_list_1").selectedIndex].disabled = true;
Take a look at this jsfiddle
Click here for jsfiddle example
$("#theSelect option[value=" + value + "]").attr('disabled', 'disabled');
But before this, you need to add change event to the first select/dropdownlist. I hope you can take from here..
Try this:
$('#day_list_1').on('change', function() {
$('#day_list_2').find('option').removeProp('disabled');
var val = $(this).val() || [];
val.forEach(function(item) {
$('#day_list_2').find('[value=' + item + ']').prop('disabled', 'disabled');
});
});
$('#day_list_2').on('change', function() {
$('#day_list_1').find('option').removeProp('disabled');
var val = $(this).val() || [];
val.forEach(function(item) {
$('#day_list_1').find('[value=' + item + ']').prop('disabled', 'disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="day_list_1">Day</label>
<input type="hidden" value="" />
<select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
<label for="day_list_2">Day</label>
<input type="hidden" value="" />
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
First you have to change the id of "day_list_1", because as per HTML standard there is only one id in the entire HTML of any tag.
So you should do like this :
First one :
<select class="form-control" id="day_list_1" multiple="multiple"
name="shift[day_list_1][]">
Next one:
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_1][]">
Code for validation :
function validate(){
var error = false;
var selected_val_1 = [];
$('#day_list_1 :selected').each(function(i, selected){
selected_val_1[i] = $(selected).text();
});
var selected_val_2 = [];
$('#day_list_2 :selected').each(function(i, selected){
selected_val_2[i] = $(selected).text();
});
$.each(selected_val_1, function( index, value ) {
if($.inArray(value, selected_val_2) != -1){
error = true;
}
});
$.each(selected_val_2, function( index, value ) {
if($.inArray(value, selected_val_1) != -1){
error = true;
}
});
if(error == true){
return true;
}else{
return false;
}
}
I hope it helps you . If you have any query regarding this logic then you can revert me .
Thanks.
It will work fine for 3 drop downs also
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
var $dropdown1 = $("select[name='project_manager[]']");
var $dropdown2 = $("select[name='test_engineer[]']");
var $dropdown3 = $("select[name='viewer[]']");
$dropdown1.change(function() {
$dropdown2.empty().append($dropdown1.find('option').clone());
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$(selectedItem).each(function(v,selectedItem) {
$dropdown2.find('option[value="' + selectedItem + '"]').prop('disabled', true);
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
});
}
});
$dropdown2.change(function() {
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$(selectedItem).each(function(v,selectedItem) {
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
});
}
});
});
</script>
</head>
<body>
<select id="project_manager" name="project_manager[]" multiple="multiple">
<option></option>
<option id="option" value="1">Test 1</option>
<option id="option" value="2">Test 2</option>
<option id="option" value="3">Test 3</option>
</select>
<select id="test_engineer" name="test_engineer[]" multiple="multiple" >
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<select name="viewer[]" multiple="multiple">
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "vrLr9wyg"
}], "*")
}
</script>
</body>
</html>