jQuery получить значение select onChange
у меня создалось впечатление, что я могу получить значение выбранного ввода, выполнив это $(this).val();
и применении в поле "выбрать".
казалось бы, это работает только если я ссылку на идентификатор.
Как это сделать с помощью этого.
12 ответов
попробуйте это-
$('select').on('change', function() {
alert( this.value );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>
вы также можете ссылаться на событие onchange -
function getval(sel)
{
alert(sel.value);
}
<select onchange="getval(this);">
<option value="1">One</option>
<option value="2">Two</option>
</select>
у меня сложилось впечатление, что я могу получить значение select введите, выполнив этот $(this).val ();
это работает, если вы подпишитесь ненавязчиво (что рекомендуется):
$('#id_of_field').change(function() {
// $(this).val() will work here
});
если вы используете onselect
и смешайте разметку со скриптом, вам нужно передать ссылку на текущий элемент:
onselect="foo(this);"
и затем:
function foo(element) {
// $(element).val() will give you what you are looking for
}
это помогло мне.
для выберите:
$('select_tags').on('change', function() {
alert( $(this).find(":selected").val() );
});
переключатель радио/:
$('radio_tags').on('change', function() {
alert( $(this).find(":checked").val() );
});
попробовать метод делегирования событий, это работает почти во всех случаях.
$(document.body).on('change',"#selectID",function (e) {
//doStuff
var optVal= $("#selectID option:selected").val();
});
вы можете попробовать это (используя jQuery)-
$('select').on('change', function()
{
alert( this.value );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
или вы можете использовать простой JavaScript, как это-
function getNewVal(item)
{
alert(item.value);
}
<select onchange="getNewVal(this);">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
Это то, что работал для меня. Пробовал все остальное без везения:
<html>
<head>
<title>Example: Change event on a select</title>
<script type="text/javascript">
function changeEventHandler(event) {
alert('You like ' + event.target.value + ' ice cream.');
}
</script>
</head>
<body>
<label>Choose an ice cream flavor: </label>
<select size="1" onchange="changeEventHandler(event);">
<option>chocolate</option>
<option>strawberry</option>
<option>vanilla</option>
</select>
</body>
</html>
принято от Mozilla
для всех selects вызовите эту функцию.
$('select').on('change', function()
{
alert( this.value );
});
только для одного выбора:
$('#select_id')
ищите jQuery сайт
HTML:
<form>
<input class="target" type="text" value="Field 1">
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
</form>
<div id="other">
Trigger the handler
</div>
JAVASCRIPT:
$( ".target" ).change(function() {
alert( "Handler for .change() called." );
});
пример jQuery:
чтобы добавить тест валидности ко всем элементам ввода текста:
$( "input[type='text']" ).change(function() {
// Check input( $( this ).val() ) for validity here
});
$('select_id').on('change', function()
{
alert(this.value); //or alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select_id">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
функция стрелки имеет другой объем чем функция,
this.value
даст undefined для функции стрелки.
Чтобы исправить использование
$('select').on('change',(event) => {
alert( event.target.value );
});
обратите внимание, что если они не работают, это может быть потому, что DOM не загружен, и ваш элемент еще не найден.
чтобы исправить, поместите скрипт в конец тела или используйте document ready
$.ready(function() {
$("select").on('change', function(ret) {
console.log(ret.target.value)
}
})
jQuery(document).ready(function(){
jQuery("#id").change(function() {
var value = jQuery(this).children(":selected").attr("value");
alert(value);
});
})