У меня есть раскрывающееся меню выбора с двумя вариантами. В основном я использую JavaScript, чтобы получить значение выбранного раскрывающегося списка и вставить его в текстовую область. Вот мой код:

$(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>

Пока это работает, так как когда я выбираю элемент из меню выбора, значение параметра копируется в поле текстуры.

Однако я хочу, чтобы значение параметра было заменено абзацем, а не просто содержало слово, например:

"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."

Как лучше всего сделать что-то подобное в JS?

Tia

1
Ayush Lal 7 Авг 2020 в 08:05

2 ответа

Лучший ответ

Основываясь на вашем вопросе и комментариях к другому ответу, вот как вы можете достичь того, что ищете;

$(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>

Отсюда вы можете продолжать строить свое else if заявление и удовлетворять свои потребности. Например, если вы добавили test3, вы обновите if statement, чтобы он выглядел так;

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);
}

Обратите внимание на разницу между .val() и .text().

.val() заглянет внутрь ЗНАЧЕНИЯ, где .text() будет искать ТЕКСТ между тегом параметра; следующим образом;

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

Итак, в if statement, который я предоставил, он помещает значение .text() в текстовое поле, но если вы хотите, чтобы он поместил значение .val() в текстовое поле, просто обновите, где у меня есть { {X3}} быть .val() - если в этом есть смысл?

0
Dexterians 7 Авг 2020 в 06:41

В этом примере я установил value в test option для абзаца.

textarea теперь содержит значение вместо текста.

$(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>
2
Andrew Arthur 7 Авг 2020 в 05:37