<select onchange="test()" id="select_id">
<option value="0">-Select-</option>
<option value="1">Communication</option>
</select>
Мне нужно получить значение выбранной опции в javascript: кто-нибудь знает, как получить выбранное значение или текст, пожалуйста, скажите, как написать функцию для этого. Я назначил функцию onchange() для select, что мне делать после этого?
Используйте для этого JavaScript или jQuery.
Использование JavaScript
<script>
function val() {
d = document.getElementById("select_id").value;
alert(d);
}
</script>
<select onchange="val()" id="select_id">
Использование jQuery
$('#select_id').change(function(){
alert($(this).val());
})
Нет необходимости в функции onChange, после. Вы можете получить значение в одной строке:
document.getElementById("select_id").options[document.getElementById("select_id").selectedIndex].value;
Или, разделить его для лучшей читаемости:
var select_id = document.getElementById("select_id");
select_id.options[select_id.selectedIndex].value;
в
function test(a) {
var x = (a.value || a.options[a.selectedIndex].value); //crossbrowser solution =)
alert(x);
}
<select onchange="test(this)" id="select_id">
<option value="0">-Select-</option>
<option value="1">Communication</option>
<option value="2">Communication</option>
<option value="3">Communication</option>
</select>
в
Ух-ты, действительно многоразовые решений, среди ответов пока нет.. я имею ввиду, что обработчик стандарт случае должны сделать единственный аргумент наступлении "события", а не'т должны использовать идентификаторы на всех.. я'd с помощью:
function handleSelectChange(event) {
// if you want to support some really old IEs, add
// event = event || window.event;
var selectElement = event.target;
var value = selectElement.value;
// to support really old browsers, you may use
// selectElement.value || selectElement.options[selectElement.selectedIndex].value;
// like el Dude has suggested
// do whatever you want with value
}
Вы можете использовать этот обработчик с каждого – рядный JS:
<select onchange="handleSelectChange(event)">
<option value="1">one</option>
<option value="2">two</option>
</select>
в jQuery:
jQuery('#select_id').on('change',handleSelectChange);
или ванили устанавливать обработчик на JS:
var selector = document.getElementById("select_id");
selector.onchange = handleSelectChange;
// or
selector.addEventListener('change', handleSelectChange);
И Дон'т придется переписывать для каждого выбора элемента у вас есть.
Пример сниппета:
в
function handleSelectChange(event) {
var selectElement = event.target;
var value = selectElement.value;
alert(value);
}
<select onchange="handleSelectChange(event)">
<option value="1">one</option>
<option value="2">two</option>
</select>
в
Используйте
document.getElementById("select_id").selectedIndex
Или для получения значения:
document.getElementById("select_id").value
<script>
function test(a) {
var x = a.selectedIndex;
alert(x);
}
</script>
<select onchange="test(this)" id="select_id">
<option value="0">-Select-</option>
<option value="1">Communication</option>
<option value="2">Communication</option>
<option value="3">Communication</option>
</select>
в алерте вы'увидите значение INT выбранного индекса, рассматривайте выбор как массив и вы'получите значение
Это старый вопрос, но я не уверен, почему люди не'т предлагаем использовать объект события, чтобы получить информацию, а не искать снова через дом.
Просто зайдите через объект события в вашей функции onChange, после чего, см. пример ниже
тест функция() { консоль.журнал(событие.srcElement.значение); }`
[
][1]Может быть полезно для людей, ищущих это сегодня, если бы это было'т поведение по умолчанию 7 лет назад
Интересно, что каждый пишет о "значение" и "текст" вариант, чтобы получить от в <параметр> и никто не предложил
метка`.
Поэтому я предлагаю метка
тоже, как поддерживается всеми браузерами
Чтобы получить "значение" (так же, как другие предлагали)
function test(a) {
var x = a.options[a.selectedIndex].value;
alert(x);
}
Чтобы получить вариант
текст
(т. е. связь или -выберите-)
function test(a) {
var x = a.options[a.selectedIndex].text;
alert(x);
}
Или (новое предложение)
function test(a) {
var x = a.options[a.selectedIndex].label;
alert(x);
}
В формате HTML
<select onchange="test(this)" id="select_id">
<option value="0">-Select-</option>
<option value="1">Communication</option>
<option value="2" label=‘newText’>Communication</option>
</select>
Примечание: В приведенном выше HTML-код для
выбора
значение 2метка
вернется текст вместо связи
Также
Примечание: нельзя установить свойство Label в Firefox (только возврат).
в
function test(){
var sel1 = document.getElementById("select_id");
var strUser1 = sel1.options[sel1.selectedIndex].value;
console.log(strUser1);
alert(strUser1);
// Inorder to get the Test as value i.e "Communication"
var sel2 = document.getElementById("select_id");
var strUser2 = sel2.options[sel2.selectedIndex].text;
console.log(strUser2);
alert(strUser2);
}
<select onchange="test()" id="select_id">
<option value="0">-Select-</option>
<option value="1">Communication</option>
</select>
в
let dropdown = document.querySelector('select');
dropdown.addEventListener('change', function(event) {
console.log(event.target.value);
});
Я попытался объяснить мои собственные образцы, но я надеюсь, что это поможет вам. Вы Don'т нужна onChange, после чего=то"Тест () на" Пожалуйста, выполните фрагмент кода для получения живого результата.
в
document.getElementById("cars").addEventListener("change", displayCar);
function displayCar() {
var selected_value = document.getElementById("cars").value;
alert(selected_value);
}
<select id="cars">
<option value="bmw">BMW</option>
<option value="mercedes">Mercedes</option>
<option value="volkswagen">Volkswagen</option>
<option value="audi">Audi</option>
</select>
в
в
function test(){
var sel1 = document.getElementById("select_id");
var strUser1 = sel1.options[sel1.selectedIndex].value;
console.log(strUser1);
alert(strUser1);
// Inorder to get the Test as value i.e "Communication"
var sel2 = document.getElementById("select_id");
var strUser2 = sel2.options[sel2.selectedIndex].text;
console.log(strUser2);
alert(strUser2);
}
<select onchange="test()" id="select_id">
<option value="0">-Select-</option>
<option value="1">Communication</option>
</select>
в
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;