변경 전 선택(드롭다운) 값을 가져오는 중
''가 될 때마침.<select>츠키다 변경 전 드롭다운 값을 지정하십시오.jQuery의 1.3.2 버전을 사용하고 있으며 변경 시 이벤트를 사용하고 있지만, 그 값은 변경 후입니다.
<select name="test">
<option value="stack">Stack</option>
<option value="overflow">Overflow</option>
<option value="my">My</option>
<option value="question">Question</option>
</select>
변경 시 이벤트에서 스택으로 변경할 때(스택으로 변경할 때) 현재 옵션 My가 선택되어 있다고 가정해 보겠습니다.이 경우 이전 값(예: 예상한 값)을 원합니다.
어떻게 하면 좋을까요?
편집: 제 경우 같은 페이지에 여러 개의 선택 상자가 있으며, 모든 페이지에 동일한 내용을 적용하고 싶습니다.또한 모든 선택사항은 페이지 로드 후 ajax를 통해 삽입됩니다.
포커스 이벤트와 변경 이벤트를 결합하여 원하는 것을 달성합니다.
(function () {
var previous;
$("select").on('focus', function () {
// Store the current value on focus and on change
previous = this.value;
}).change(function() {
// Do something with the previous value after the change
alert(previous);
// Make sure the previous value is updated
previous = this.value;
});
})();
작업 예: http://jsfiddle.net/x5PKf/766
여기에는 글로벌 var를 사용하지 마십시오.데이터에 prev 값을 저장합니다.예: http://jsbin.com/uqupu3/2/edit
참조 코드:
$(document).ready(function(){
var sel = $("#sel");
sel.data("prev",sel.val());
sel.change(function(data){
var jqThis = $(this);
alert(jqThis.data("prev"));
jqThis.data("prev",jqThis.val());
});
});
페이지에 많은 선택 항목이 있는 것을 확인했습니다.이 접근방식은 각 선택 항목에 대해 선택한 데이터에 사전 값을 저장하기 때문에 고객에게도 유효합니다.
는 '아비핀토'를 한 '하겠습니다.jquery.data()
포커스를 사용하는 것은 유효한 해결책이 아닙니다.처음 옵션을 변경할 때는 이 기능이 작동하지만 해당 선택 요소를 계속 누르고 "up" 또는 "down" 키를 누릅니다.다시 포커스 이벤트를 거치지 않을 거예요.
그래서 해결책은 다음과 같이 보여야 합니다.
//set the pre data, usually needed after you initialize the select element
$('mySelect').data('pre', $(this).val());
$('mySelect').change(function(e){
var before_change = $(this).data('pre');//get the pre data
//Do your work here
$(this).data('pre', $(this).val());//update the pre data
})
값을 손으로 추적합니다.
var selects = jQuery("select.track_me");
selects.each(function (i, element) {
var select = jQuery(element);
var previousValue = select.val();
select.bind("change", function () {
var currentValue = select.val();
// Use currentValue and previousValue
// ...
previousValue = currentValue;
});
});
$("#dropdownId").on('focus', function () {
var ddl = $(this);
ddl.data('previous', ddl.val());
}).on('change', function () {
var ddl = $(this);
var previous = ddl.data('previous');
ddl.data('previous', ddl.val());
});
이벤트 '라이브'를 사용하고 있어 기본적으로는 Dimitiar와 유사한 솔루션이지만, '포커스'를 사용하는 대신 '클릭'이 트리거되면 이전 값이 저장됩니다.
var previous = "initial prev value";
$("select").live('click', function () {
//update previous value
previous = $(this).val();
}).change(function() {
alert(previous); //I have previous value
});
글로벌 변수에서 선택한 jquery를 사용하여 현재 선택한 드롭다운 값을 유지한 후 '변경 시' 작업 함수를 작성합니다.함수의 이전 값을 설정하려면 글로벌 변수를 사용할 수 있습니다.
//global variable
var previousValue=$("#dropDownList").val();
$("#dropDownList").change(function () {
BootstrapDialog.confirm(' Are you sure you want to continue?',
function (result) {
if (result) {
return true;
} else {
$("#dropDownList").val(previousValue).trigger('chosen:updated');
return false;
}
});
});
원하는 결과를 얻기 위한 몇 가지 방법이 있습니다. 저의 겸손한 방법은 다음과 같습니다.
요소가 이전 값을 유지하도록 두므로 'previousValue' 속성을 추가합니다.
<select id="mySelect" previousValue=""></select>
초기화가 완료되면 'previousValue'를 속성으로 사용할 수 있습니다.JS에서 이 이전 값에 액세스하려면 다음을 선택합니다.
$("#mySelect").change(function() {console.log($(this).attr('previousValue'));.....; $(this).attr('previousValue', this.value);}
'previousValue'를 사용한 후 속성을 현재 값으로 업데이트합니다.
앵귤러 워치 타입의 인터페이스와 함께 커스텀jQuery 이벤트를 사용하는 것은 어떨까요?
// adds a custom jQuery event which gives the previous and current values of an input on change
(function ($) {
// new event type tl_change
jQuery.event.special.tl_change = {
add: function (handleObj) {
// use mousedown and touchstart so that if you stay focused on the
// element and keep changing it, it continues to update the prev val
$(this)
.on('mousedown.tl_change touchstart.tl_change', handleObj.selector, focusHandler)
.on('change.tl_change', handleObj.selector, function (e) {
// use an anonymous funciton here so we have access to the
// original handle object to call the handler with our args
var $el = $(this);
// call our handle function, passing in the event, the previous and current vals
// override the change event name to our name
e.type = "tl_change";
handleObj.handler.apply($el, [e, $el.data('tl-previous-val'), $el.val()]);
});
},
remove: function (handleObj) {
$(this)
.off('mousedown.tl_change touchstart.tl_change', handleObj.selector, focusHandler)
.off('change.tl_change', handleObj.selector)
.removeData('tl-previous-val');
}
};
// on focus lets set the previous value of the element to a data attr
function focusHandler(e) {
var $el = $(this);
$el.data('tl-previous-val', $el.val());
}
})(jQuery);
// usage
$('.some-element').on('tl_change', '.delegate-maybe', function (e, prev, current) {
console.log(e); // regular event object
console.log(prev); // previous value of input (before change)
console.log(current); // current value of input (after change)
console.log(this); // element
});
이게 오래된 실이라는 건 알지만, 조금 더 보태야 할 것 같아요.제 경우 텍스트, Val, 기타 데이터 특성을 전달하고 싶었습니다.이 경우 전체 옵션을 값만 저장하는 것이 아니라 사전 값으로 저장하는 것이 좋습니다.
아래의 코드 예:
var $sel = $('your select');
$sel.data("prevSel", $sel.clone());
$sel.on('change', function () {
//grab previous select
var prevSel = $(this).data("prevSel");
//do what you want with the previous select
var prevVal = prevSel.val();
var prevText = prevSel.text();
alert("option value - " + prevVal + " option text - " + prevText)
//reset prev val
$(this).data("prevSel", $(this).clone());
});
편집:
요소에 .clone()을 추가하는 것을 잊었습니다.값을 되돌리려고 하면 이전 복사본이 아닌 선택 항목의 새 복사본으로 가져옵니다.clone() 메서드를 사용하면 선택 인스턴스가 아닌 선택 복사본이 저장됩니다.
자기 속성(문서 준비 완료)에 저장합니다.
$('#myselect').attr('orig',$('#myselect').val());
다음으로 변경된 값과 비교합니다.
if ($('#myselect').attr('orig')!=$('#myselect').val()) ...
그렇다면 현재 선택한 값을 저장하고 선택한 항목을 변경하면 이전 값이 저장됩니다.(원하는 대로 다시 갱신할 수 있습니다)
다음 코드를 사용합니다.테스트해 본 결과, 동작하고 있습니다.
var prev_val;
$('.dropdown').focus(function() {
prev_val = $(this).val();
}).change(function(){
$(this).unbind('focus');
var conf = confirm('Are you sure want to change status ?');
if(conf == true){
//your code
}
else{
$(this).val(prev_val);
$(this).bind('focus');
return false;
}
});
(function() {
var value = $('[name=request_status]').change(function() {
if (confirm('You are about to update the status of this request, please confirm')) {
$(this).closest('form').submit(); // submit the form
}else {
$(this).val(value); // set the value back
}
}).val();
})();
이 문제를 해결하기 위해 다른 옵션을 제안하고 싶습니다. 왜냐하면 위에서 제안한 솔루션이 저의 시나리오를 해결하지 못했기 때문입니다.
(function()
{
// Initialize the previous-attribute
var selects = $('select');
selects.data('previous', selects.val());
// Listen on the body for changes to selects
$('body').on('change', 'select',
function()
{
$(this).data('previous', $(this).val());
}
);
}
)();
이 명령어는 jQuery를 사용하여 def를 수행합니다.여기서 종속성이지만 순수 Javascript에서 작동하도록 조정할 수 있습니다(청취자를 본문에 추가하고 원래 대상이 선택 기능이었는지 확인, 실행 기능이었는지 여부 등).
변경 리스너를 본문에 연결하면 선택한 특정 리스너 뒤에 이 수신기가 발생하는지 확인할 수 있습니다. 그렇지 않으면 "data-previous" 값이 읽기 전에 덮어쓰게 됩니다.
이는 물론 설정 이전 값과 체크 값에 대해 개별 청취자를 사용하는 것을 전제로 하고 있습니다.단일 책임 패턴과 딱 맞아떨어집니다.
참고: 이 '이전' 기능이 모든 선택 항목에 추가되므로 필요한 경우 선택기를 미세 조정하십시오.
이것은 @thisisboris의 답변에 대한 개선입니다.데이터에 현재 값을 추가하여 현재 값으로 설정된 변수가 언제 변경되는지 코드가 제어할 수 있습니다.
(function()
{
// Initialize the previous-attribute
var selects = $( 'select' );
$.each( selects, function( index, myValue ) {
$( myValue ).data( 'mgc-previous', myValue.value );
$( myValue ).data( 'mgc-current', myValue.value );
});
// Listen on the body for changes to selects
$('body').on('change', 'select',
function()
{
alert('I am a body alert');
$(this).data('mgc-previous', $(this).data( 'mgc-current' ) );
$(this).data('mgc-current', $(this).val() );
}
);
})();
최적의 솔루션:
$('select').on('selectric-before-change', function (event, element, selectric) {
var current = element.state.currValue; // index of current value before select a new one
var selected = element.state.selectedIdx; // index of value that will be selected
// choose what you need
console.log(element.items[current].value);
console.log(element.items[current].text);
console.log(element.items[current].slug);
});
나는 선택을 바탕으로 다른 점을 밝혀야 했다.
jquery 및 es6 구문을 사용하면 이렇게 할 수 있습니다.
HTML
<select class="reveal">
<option disabled selected value>Select option</option>
<option value="value1" data-target="#target-1" >Option 1</option>
<option value="value2" data-target="#target-2" >Option 2</option>
</select>
<div id="target-1" style="display: none">
option 1
</div>
<div id="target-2" style="display: none">
option 2
</div>
JS
$('select.reveal').each((i, element)=>{
//create reference variable
let $option = $('option:selected', element)
$(element).on('change', event => {
//get the current select element
let selector = event.currentTarget
//hide previously selected target
if(typeof $option.data('target') !== 'undefined'){
$($option.data('target')).hide()
}
//set new target id
$option = $('option:selected', selector)
//show new target
if(typeof $option.data('target') !== 'undefined'){
$($option.data('target')).show()
}
})
})
var last_value;
var current_value;
$(document).on("click","select",function(){
last_value = $(this).val();
}).on("change","select",function(){
current_value = $(this).val();
console.log('last value - '+last_value);
console.log('current value - '+current_value);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="test">
<option value="stack">Stack</option>
<option value="overflow">Overflow</option>
<option value="my">My</option>
<option value="question">Question</option>
</select>다음은 jQuery, DOM 트래버설, 이벤트바인딩, 글로벌 변수 등을 포함하는 오버헤드가 없는 간단한 솔루션입니다.사용자에게 'before' 및 'after' 값이 포함된 메시지로 변경 내용을 확인하라는 메시지가 표시되고, 선택한 내용에 따라 변경 내용을 취소 또는 수락합니다.
<select name="test"
onfocus="handleOnFocus(this);"
onchange="if(handleOnChange(this) == false) { return false; }"
data-original-selected-index="">
<option value="stack">Stack</option>
<option value="overflow">Overflow</option>
<option value="my">My</option>
<option value="question">Question</option>
</select>
// Prompt user to confirm the change
function handleOnChange(selectObj) {
var confirmationMessage = 'Change ' +
selectObj.options[selectObj.dataset.originalSelectedIndex].text +
' to ' +
selectObj.options[selectObj.selectedIndex].text + '?';
if (!confirm(confirmationMessage)) {
selectObj.selectedIndex = selectObj.dataset.originalSelectedIndex;
return false;
} else {
selectObj.dataset.originalSelectedIndex = selectObj.selectedIndex;
return true;
}
}
// Initialize original selected index (one-time)
function handleOnFocus(selectObj) {
if (selectObj.dataset.originalSelectedIndex == '') {
selectObj.dataset.originalSelectedIndex = selectObj.selectedIndex;
}
}
JSFiddle에 대해서는, https://jsfiddle.net/humbads/f3a0v8ys/
메모 1: 변경 핸들러는 그대로 기술되어 있기 때문에 이 솔루션은 ASP에서도 사용할 수 있습니다.AutoPostBack=을 사용한 Net DropDownList 컨트롤True 및 OnSelectedIndexChanged 핸들러
메모 2: 옵션에는 공백 값을 포함할 수 없습니다.이 경우 초기값을 변경합니다.
언급URL : https://stackoverflow.com/questions/4076770/getting-value-of-select-dropdown-before-change
'programing' 카테고리의 다른 글
| 다른 .py 파일에서 함수를 호출하려면 어떻게 해야 합니까? (0) | 2022.09.11 |
|---|---|
| SQL INSERT 문에 Python dict 사용 (0) | 2022.09.11 |
| 어레이에 값을 추가하는 가장 효율적인 방법 (0) | 2022.09.11 |
| PHP의 문자열에서 각 행에 걸쳐 반복 (0) | 2022.09.11 |
| MySQL의 DATETIME 필드에서 날짜만 선택하는 방법 (0) | 2022.09.11 |