CODEWITHSUNDEEP
javascripthtml
Ayush Lal
Ayush Lal

Reputation: 87

HTML/JS: Changing select option value in JavaScript

I have a dropdown select menu with two options. Basically im using JavaScript to get the value of the selected drop down option and pasting into a text area. Here is my code:

$(document).ready(function () {
  $('#pdSev').change(function () {
    $('#textarea').html($("#pdSev option:selected").text());
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select id="pdSev" name="pdSev">
  <option selected disabled class="test">Incident Severity</option>
  <option value="test">Test</option>
  <option value="test2">Test2</option>
</select>
<textarea id="textarea" class="textarea is-rounded has-fixed-size" placeholder="Example"></textarea>

So far this currently works as when I select an item from the select menu, the option value gets replicated into the texture field.

However, I want the option value to be replaced by a paragraph instead of just containing a word, for example:

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

What would be the best way to do something like this in JS?

TIA

Upvotes: 1

Views: 100

Answers (2)

Dexterians
Dexterians

Reputation: 1021

Based on your question and comments from another answer, here is how you can achieve what you are looking for;

$(document).ready(function () {
    $('#pdSev').change(function () {
        if ($('#pdSev').val() == 'test') {
            var text = 'additional text';
            $('#textarea').val(text);
        } else if ($('#pdSev').val() == 'test2') {
            var text = 'text for this statement';
            $('#textarea').val(text);
        }
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select id="pdSev" name="pdSev">
  <option selected disabled class="test">Incident Severity</option>
  <option value="test">Test</option>
  <option value="test2">Test2</option>
</select>
<textarea id="textarea" class="textarea is-rounded has-fixed-size" placeholder="Example"></textarea>

From here you can keep building your else if statement and cater towards your needs. For example, if you added a test3 you would update the if statement to look like;

if ($('#pdSev').val() == 'test') {
    var text = 'additional text';
    $('#textarea').val(text);
} else if ($('#pdSev').val() == 'test2') {
    var text = 'text for this statement';
    $('#textarea').val(text);
} else if ($('#pdSev').val() == 'test3') {
    var text = 'here is a new statement';
    $('#textarea').val(text);
}

Just beware the difference between .val() and .text().

.val() will look inside the VALUE, where .text() will look for the TEXT between the option tag; as follows;

<option value="VALUE">TEXT</option>

So in the if statement I've provided, it is placing the .text() value in the textbox - but if you want it to place the .val() value in the textbox just update where I have .text() to be .val() - if this makes sense?

Upvotes: 0

Andrew Arthur
Andrew Arthur

Reputation: 1603

In this example I've set the value of the test option to the paragraph.

The textarea now contains the value instead of the text.

$(document).ready(function () {
    var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
    $('option[value="test"]').val(text);

    $('#pdSev').change(function () {
        $('#textarea').html($("#pdSev option:selected").val());
    })
});
<body>
  <select id="pdSev" name="pdSev">
    <option selected disabled class="test">Incident Severity</option>
    <option value="test">Test</option>
    <option value="test2">Test2</option>
  </select>
  <textarea id="textarea" class="textarea is-rounded has-fixed-size" placeholder="Example"></textarea>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Upvotes: 2

Related Questions