반응형
jQuery는 select onChange의 값을 얻습니다.
이 작업을 수행 $(this).val();하고 onchange매개 변수를 선택 필드에 적용하여 선택 입력의 값을 얻을 수 있다는 인상을 받았습니다 .
ID를 참조하는 경우에만 작동하는 것처럼 보입니다.
이것을 사용하여 어떻게합니까?
이 시도-
$('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>이 $ (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>
모든 선택에 대해이 함수를 호출하십시오.
$('select').on('change', function()
{
alert( this.value );
});
하나만 선택 :
$('#select_id')
화살표 함수는 함수와 다른 범위를 가지며 화살표 함수에 대해 this.valueundefined를 제공합니다. 사용을 수정하려면
$('select').on('change',(event) => {
alert( event.target.value );
});
$('#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>
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>
자바 스크립트 :
$( ".target" ).change(function() {
alert( "Handler for .change() called." );
});
jQuery의 예 :
모든 텍스트 입력 요소에 유효성 테스트를 추가하려면 :
$( "input[type='text']" ).change(function() {
// Check input( $( this ).val() ) for validity here
});
작동하지 않는 경우 DOM이로드되지 않았고 요소를 아직 찾을 수 없기 때문일 수 있습니다.
수정하려면 본문 끝에 스크립트를 넣거나 문서 준비를 사용하십시오.
$.ready(function() {
$("select").on('change', function(ret) {
console.log(ret.target.value)
}
})
jQuery는 on Change 이벤트를 사용하여 선택한 HTML 요소의 값을 가져옵니다.
$(document).ready(function () {
$('body').on('change','#select_box', function() {
$('#show_only').val(this.value);
});
}); <!DOCTYPE html>
<html>
<title>jQuery Select OnChnage Method</title>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<select id="select_box">
<option value="">Select One</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
</select>
<br><br>
<input type="text" id="show_only" disabled="">
</body>
</html> jQuery(document).ready(function(){
jQuery("#id").change(function() {
var value = jQuery(this).children(":selected").attr("value");
alert(value);
});
})
추가하고 싶은 사람, 전체 사용자 지정 헤더 기능이 필요한 사람
function addSearchControls(json) {
$("#tblCalls thead").append($("#tblCalls thead tr:first").clone());
$("#tblCalls thead tr:eq(1) th").each(function (index) {
// For text inputs
if (index != 1 && index != 2) {
$(this).replaceWith('<th><input type="text" placeholder=" ' + $(this).html() + ' ara"></input></th>');
var searchControl = $("#tblCalls thead tr:eq(1) th:eq(" + index + ") input");
searchControl.on("keyup", function () {
table.column(index).search(searchControl.val()).draw();
})
}
// For DatePicker inputs
else if (index == 1) {
$(this).replaceWith('<th><input type="text" id="datepicker" placeholder="' + $(this).html() + ' ara" class="tblCalls-search-date datepicker" /></th>');
$('.tblCalls-search-date').on('keyup click change', function () {
var i = $(this).attr('id'); // getting column index
var v = $(this).val(); // getting search input value
table.columns(index).search(v).draw();
});
$(".datepicker").datepicker({
dateFormat: "dd-mm-yy",
altFieldTimeOnly: false,
altFormat: "yy-mm-dd",
altTimeFormat: "h:m",
altField: "#tarih-db",
monthNames: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"],
dayNamesMin: ["Pa", "Pt", "Sl", "Ça", "Pe", "Cu", "Ct"],
firstDay: 1,
dateFormat: "yy-mm-dd",
showOn: "button",
showAnim: 'slideDown',
showButtonPanel: true,
autoSize: true,
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: false,
buttonText: "Tarih Seçiniz",
closeText: "Temizle"
});
$(document).on("click", ".ui-datepicker-close", function () {
$('.datepicker').val("");
table.columns(5).search("").draw();
});
}
// For DropDown inputs
else if (index == 2) {
$(this).replaceWith('<th><select id="filter_comparator" class="styled-select yellow rounded"><option value="select">Seç</option><option value="eq">=</option><option value="gt">>=</option><option value="lt"><=</option><option value="ne">!=</option></select><input type="text" id="filter_value"></th>');
var selectedOperator;
$('#filter_comparator').on('change', function () {
var i = $(this).attr('id'); // getting column index
var v = $(this).val(); // getting search input value
selectedOperator = v;
if(v=="select")
table.columns(index).search('select|0').draw();
$('#filter_value').val("");
});
$('#filter_value').on('keyup click change', function () {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
var i = $(this).attr('id'); // getting column index
var v = $(this).val(); // getting search input value
table.columns(index).search(selectedOperator + '|' + v).draw();
}
});
}
})
}
참고 URL : https://stackoverflow.com/questions/11179406/jquery-get-value-of-select-onchange
반응형
'Programing' 카테고리의 다른 글
| __proto__ VS. (0) | 2020.09.30 |
|---|---|
| Ruby의 여러 줄 주석? (0) | 2020.09.30 |
| Sublime Text 2에서 기본 구문을 다른 파일 형식으로 설정 (0) | 2020.09.30 |
| 쉘 스크립트에서 "cd"가 작동하지 않는 이유는 무엇입니까? (0) | 2020.09.30 |
| Android에서 TextView를 스크롤 가능하게 만들기 (0) | 2020.09.30 |