Javascript attributes for select option - javascript

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>

Related

Javascript select list, show content onchange

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>

To make changes in the Textarea according to the selection

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>

Alert when selecting some particular value from drop down in JavaScript

Below are the dropdown data..
<select size="1" name="Test_Data">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
I want to get alert/pop up when I select the data which is start from IN in drop down list.

Try this:
https://jsfiddle.net/mminetto/bggwnkwj/
var select = $('select[name="Test_Data"]');
select.on('change', function(){
var options = select.children('option:selected');
if(options.length > 0 && options[0].innerText.startsWith("IN")){
alert(this.value);
alert(options[0].innerText);
}
});

<select size="1" name="Test_Data" id="dropdown">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
in javascript
<script>
$("#dropdown").change(function(){
if($(this).find("option:selected").text().startsWith("IN")){
alert("option with IN selected =>"+$(this).find("option:selected").text());
}
});
</script>

Try this code
HTML
<select size="1" onChange="showAlert()" id="dataCountry" name="Test_Data">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
</select>
JavaScript
<script>
function showAlert() {
var el = document.getElementById('dataCountry'); // get the index
var text = el.options[el.selectedIndex].innerHTML; // get the label
var n = text.search("IN"); //search number of IN
if(n>=0) {
alert(text);
}
}
</script>

How to Merge Java scripts to change font size and font color By getting User Input

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 ):

selected value from select box in javascript

I want to get the value of the select box using javascript i have the following code.
html part
<select name="marked" id="marked" onchange="checkdata(this); ">
<option value="">SELECT</option>
<option value="all">ALL</option>
<option value="none">NONE</option>
<option value="read">READ</option>
<option value="unread">UNREAD</option>
</select>
script
<script type="text/javascript">
function checkdata()
{
for(var i=0; i < document.myform.message.length; i++)
{
document.myform.message[i].checked=true;
}
}
</script>
i tried the code
var all = document.myform.marked.options[document.myform.selectedIndex].value;
alert(all);
no alert is coming
i also tried
var all= document.getElementById('marked').value;
alert(all);
alert is coming but the value for every selection in "1"

You missed the '.marked':
var all = document.myform.marked.options[document.myform.marked.selectedIndex].value;
alert(all);

var e = document.getElementById("ctl00_cphContent_ddlVoteType");
var strOption = e.options[e.selectedIndex].value;
working fine for me. please check

Try
<form method="POST" name="me">
<select size="1" name="D1" onChange="checkData()">
<option value="99">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
<script Language="JavaScript"><!--
function checkData()
{
var myTest =
me.D1.options[me.D1.options.selectedIndex].value;
///or me.D1.options[me.D1.selectedIndex].value
alert(myTest);
}
</script>

the following code is working for me
Java Script :
function checkdata()
{
alert(document.getElementById('marked').value);
}
HTML :
<select name="marked" id="marked" onchange="checkdata(this);">
<option value="">SELECT</option>
<option value="all">ALL</option>
<option value="none">NONE</option>
<option value="read">READ</option>
<option value="unread">UNREAD</option>
</select>

get the selected value onchange
<script Language="JavaScript">
function checkdata(marked){
var marked_value = marked.value; // store the selected value marked_value
alert(marked_value); // do further processing with "marked_value" if needed
}
</script>
for option selects you don't use "checked" that is for radio and checkbox

Categories