Я пытаюсь просмотреть раскрывающийся список с несколькими вариантами выбора и добавить все выбранные параметры в список, разделенный запятыми.
Мой выпадающий код:
<select name = "testnameID" id = "testnameID" multiple>
<option value = "1">Test number 1</option>
<option value = "2">Test number 2</option>
<option value = "3">Test number 3</option>
<option value = "4">Test number 4</option>
<option value = "5">Test number 5</option>
<select>
В своем теге я использую следующее, но думаю, что его можно упростить или улучшить:
var testnameID = $('#testnameID').val();
var testnameText;
Array.from(document.querySelector("#testnameID").options).forEach(function(option_element) {
let option_text = option_element.text;
let is_option_selected = option_element.selected;
if (is_option_selected===true){
testnameText = testnameText + option_text +", ";
console.info("TestnameText: "+testnameText);
console.info("\n\r");
}
});
Мне нужно сгенерировать переменную testnameText, которая, если бы были выбраны первые три элемента, вернула бы значение «Тест № 1, Тест № 2, Тест № 3».
Я сам запутался!
Я использую val() для получения значений. Это работает, но мне нужно создать список параметров текста.
Вы можете попробовать использовать Document.querySelectorAll() для таргетинга на все выбранные параметры следующим образом:
Array.from(document.querySelectorAll("#testnameID option:checked")).forEach(function(option_element) {
let option_text = option_element.text;
var testnameText = option_text +", ";
console.info("TestnameText: "+testnameText);
console.info("\n\r");
});
<select name = "testnameID" id = "testnameID" multiple>
<option value = "1" selected>Test number 1</option>
<option value = "2" selected>Test number 2</option>
<option value = "3" selected>Test number 3</option>
<option value = "4">Test number 4</option>
<option value = "5">Test number 5</option>
<select>
Вы также можете попробовать использовать выражения Array.prototype.map() и стрелочных функций, которые короче.
В следующем примере создается массив выбранных параметров:
var checkedOptions = Array.from(document.querySelectorAll("#testnameID option:checked"));
var res = checkedOptions.map(option_element => ("TestnameText: "+option_element.text));
console.info(res);
<select name = "testnameID" id = "testnameID" multiple>
<option value = "1" selected>Test number 1</option>
<option value = "2" selected>Test number 2</option>
<option value = "3" selected>Test number 3</option>
<option value = "4">Test number 4</option>
<option value = "5">Test number 5</option>
<select>
В этом случае может помочь функция jquery each(). Таким образом, получить выбранные параметры довольно просто:
$('#testnameID :selected').each(function (index, el) {
console.info("TestnameText: " + $(el).text());
});
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"
integrity = "sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0 = " crossorigin = "anonymous"></script>
<select name = "testnameID" id = "testnameID" multiple>
<option value = "1" selected>Test number 1</option>
<option value = "2" selected>Test number 2</option>
<option value = "3" selected>Test number 3</option>
<option value = "4">Test number 4</option>
<option value = "5">Test number 5</option>
</select>
Большое спасибо - я использовал это, чтобы заставить его работать! Потрясающий.
@petworthnick, с удовольствием.
selectedOptions содержит все выбранные параметры выбранного элемента. Вы можете использовать его следующим образом:
const select = document.querySelector('select');
select.addEventListener('change', e => {
// Option texts as an array
const texts = Array.from(e.target.selectedOptions).map(({text}) => text);
// Option texts as a comma-separated string
const textsStr = texts.join(', ');
console.info(texts);
console.info(textsStr);
});
<select multiple>
<option value = "1">Test number 1</option>
<option value = "2">Test number 2</option>
<option value = "3">Test number 3</option>
<option value = "4">Test number 4</option>
<option value = "5">Test number 5</option>
</select>
Это работает и вне события, просто ссылайтесь на элемент select напрямую, а не на e.target
.
Спасибо - я попробую и посмотрю, смогу ли я заставить его работать.
Поскольку вы используете множественный выбор, .val() все равно должен возвращать все выбранные значения, не так ли? Во всяком случае, при отправке формы. Если он возвращает массив, вы можете просто сделать
Array.join(',')
. Но, честно говоря, на мой взгляд, множественный выбор ужасно неудобен для пользователя, поэтому я бы все равно рекомендовал использовать флажки... Кроме этого, ваш код мне кажется хорошим. -- Однако ответ @mamun - хорошее улучшение.