HTML / JS: изменение значения параметра выбора в JavaScript - PullRequest
Новая
       48

HTML / JS: изменение значения параметра выбора в JavaScript

1 голос
/ 07 августа 2020

У меня есть раскрывающееся меню выбора с двумя вариантами. В основном я использую 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

Ответы [ 2 ]

2 голосов
/ 07 августа 2020

В этом примере я установил 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>
0 голосов
/ 07 августа 2020

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

$(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; следующим образом; 

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...