반응형
jQuery 이벤트 선택 변경 선택 항목 가져오기 옵션
선택한 요소의 변경 이벤트에 대한 이벤트를 다음과 같이 바인딩했습니다.
$('select').on('change', '', function (e) {
});
변경 이벤트가 발생할 때 선택한 요소에 액세스하려면 어떻게 해야 합니까?
$('select').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
....
});
jQuery 찾기 방법을 사용할 수 있습니다.
$('select').change(function () {
var optionSelected = $(this).find("option:selected");
var valueSelected = optionSelected.val();
var textSelected = optionSelected.text();
});
위의 솔루션은 완벽하게 작동하지만 클릭한 옵션을 원하는 고객을 위해 다음 코드를 추가합니다.이 선택 값이 변경되지 않은 경우에도 선택한 옵션을 얻을 수 있습니다.(Mozilla에서만 테스트됨)
$('select').find('option').click(function () {
var optionSelected = $(this);
var valueSelected = optionSelected.val();
var textSelected = optionSelected.text();
});
위임된 대안
다른 사용자가 수신기에 대해 위임된 접근 방식을 사용하는 경우,e.target(선택 요소를 참조합니다.)
$('#myform').on('change', 'select', function (e) {
var val = $(e.target).val();
var text = $(e.target).find("option:selected").text(); //only time the find is required
var name = $(e.target).attr('name');
}
<select id="selectId">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
$('#selectId').on('change', function () {
var selectVal = $("#selectId option:selected").val();
});
처음에 다음 항목을 만듭니다.select option그 이후에는 사용jquery사용자 변경 시 현재 선택한 값을 얻을 수 있습니다.select option가치.
저는 이것이 더 짧고 깨끗하다고 생각합니다.또한 둘 이상의 항목이 있는 경우 선택한 항목을 반복할 수 있습니다.
$('select').on('change', function () {
var selectedValue = this.selectedOptions[0].value;
var selectedText = this.selectedOptions[0].text;
});
$('#_SelectID').change(function () {
var SelectedText = $('option:selected',this).text();
var SelectedValue = $('option:selected',this).val();
});
선택된 값의 값을 얻는 또 다른 짧은 방법은,
$('#selectElement').on('change',function(){
var selectedVal = $(this).val();
^^^^ ^^^^ -> presents #selectElement selected value
|
v
presents #selectElement,
});
이것도 잘 작동할 수 있습니다.
(function(jQuery) {
$(document).ready(function() {
$("#select_menu").change(function() {
var selectedOption = $("#select_menu").val()
});
});
})(jQuery);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>공식 API 설명서 https://api.jquery.com/selected-selector/ 를 참조하십시오.
이 기능은 다음과 같습니다.
$( "select" ).on('change',function() {
var str = "";
// For multiple choice
$( "select option:selected" ).each(function() {
str += $( this ).val() + " ";
});
});
그리고.
$( "select" ).on('change',function() {
// For unique choice
var selVal = $( "select option:selected" ).val();
});
그리고 독특한 선택을 하기 쉽습니다.
var SelVal = $( "#idSelect option:selected" ).val();
이 jquery 선택 옵션 값 가져오기에 대해 변경 이벤트 선택을 사용할 수 있습니다.
$(document).ready(function () {
$('body').on('change','#select', function() {
$('#show_selected').val(this.value);
});
}); <!DOCTYPE html>
<html>
<title>Learn Jquery value Method</title>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<select id="select">
<option value="">Select One</option>
<option value="PHP">PHP</option>
<option value="jAVA">JAVA</option>
<option value="Jquery">jQuery</option>
<option value="Python">Python</option>
<option value="Mysql">Mysql</option>
</select>
<br><br>
<input type="text" id="show_selected">
</body>
</html> 언급URL : https://stackoverflow.com/questions/12750307/jquery-select-change-event-get-selected-option
반응형
'programing' 카테고리의 다른 글
| SQL Server의 LDF 파일은 무엇입니까? (0) | 2023.07.04 |
|---|---|
| 유형 스크립트와 기본적으로 대응하는 플랫폼별 가져오기 구성 요소 (0) | 2023.07.04 |
| ASP.NET에서 "스레드가 중단되었습니다"가 표시되는 이유는 무엇입니까? (0) | 2023.07.04 |
| Mongo 셸이 파일에서 쿼리를 실행하고 결과를 표시합니다. (0) | 2023.07.04 |
| UITableView 일부 셀을 "선택할 수 없음"으로 설정 (0) | 2023.07.04 |