CODEWITHSUNDEEP
javascripthtml
user2839151
user2839151

Reputation: 41

Javascript attributes for select option

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>

Upvotes: 1

Views: 61

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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>

Upvotes: 0

kzhao14
kzhao14

Reputation: 2630

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>

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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>

Upvotes: 4

Related Questions