0
Im 콤보 선택 드롭 다운 옵션에 jquery 스크립트를 사용합니다. 스크립트는 선택한 옵션을 제출 한 후에 선택 항목으로 저장하지 않고 각 드롭 다운 목록의 첫 번째 값으로 다시 설정된다는 사실 외에도 잘 작동합니다.Jquery form select otion이 submit 후 저장되지 않습니다.
이 문제에 도움이 필요합니다. 내 기존 게시물이나 다른 대안 중 하나에 추가 할 수있는 솔루션이 있습니까?
두 개의 스크립트를 사용하여 하나는 듀얼 드롭을 선택하고 (한 드롭은 다른 드롭과 다릅니다) 다른 스크립트는 모든 옵션과 하위 옵션을 나열합니다. 여기
처음 스크립트 코드이다$(document).ready(function()
{
var selectoptions = {
"Option 1": {
"key" : "Option 1",
"defaultvalue" : 1,
"values" : {
"sub-option 1": "sub-option 1",
"sub-option 2": "sub-option 2",
"sub-option 3": "sub-option 3"
}
},
"Option 2": {
"key" : "Option 1",
"defaultvalue" : 1,
"values" : {
"sub-option 1": "sub-option 1",
"sub-option 2": "sub-option 2",
"sub-option 3": "sub-option 3"
}
},
"Option 3": {
"key" : "Option 1",
"defaultvalue" : 1,
"values" : {
"sub-option 1": "sub-option 1",
"sub-option 2": "sub-option 2",
"sub-option 3": "sub-option 3"
}
},
};
$('#first').doubleSelect('second', selectoptions);
});
샘플 양식 HTML 임 사용된다 : 여기서
(function($) {
$.fn.doubleSelect = function(doubleid, values, options) {
options = $.extend({
preselectFirst: null,
preselectSecond: null,
emptyOption: false,
emptyKey: -1,
emptyValue: 'Choose...'
},
options || {});
var $first = this;
var $secondid = "#" + doubleid;
var $second = $($secondid);
var setValue = function(value) {
$second.val(value).change();
};
/** Helper Function to remove childs from second */
var removeValues = function() {
$($secondid + " option").remove();
};
/** OnChange Handler */
$(this).change(function() {
removeValues();
var $current = this.options[this.selectedIndex].value;
if ($current !== '') {
$.each(values,
function(k, v) {
var bestk;
if ($current == v.key) {
$.each(v.values,
function(k, v2) {
if (!bestk && (v.defaultvalue !== null && v2 == v.defaultvalue)) {
bestk = k;
}
if (options.preselectSecond !== null && v2 == options.preselectSecond) {
bestk = k;
}
});
$.each(v.values,
function(k, v2) {
var o = $("<option>").html(k).attr('value', v2);
if (options.preselectSecond) {
$.each(options.preselectSecond,
function(index, selected) {
if (v2 == selected) {
o.html(k).attr("selected", "selected");
}
}
);
}
if (k === bestk) { o.html(k).attr("selected", "selected"); }
o.appendTo($second);
});
}
});
} else {
setValue(options.emptyValue);
}
});
return this.each(function() {
//remove all current items in select boxes
$first.children().remove();
$second.children().remove();
// Handle the empty option param
if (options.emptyOption) {
var oe = $("<option>").html(options.emptyValue).attr('value', options.emptyKey);
oe.appendTo($first);
}
// add all options to first select box
$.each(values,
function(k, v) {
var of = $("<option>").html(k).attr('value', v.key);
if (options.preselectFirst !== null && v.key == options.preselectFirst) {
of.html(k).attr("selected", "selected");
}
of.appendTo($first);
});
if (options.preselectFirst === null) {
var $current = this.options[this.selectedIndex].value;
if ($current !== '') {
$.each(values,
function(k, v) {
var bestk;
if ($current == v.key) {
$.each(v.values,
function(k, v2) {
if (!bestk && (v.defaultvalue !== null && v2 == v.defaultvalue)) {
bestk = k;
}
if (options.preselectSecond !== null && v2 == options.preselectSecond) {
bestk = k;
}
});
$.each(v.values,
function(k, v2) {
var o = $("<option>").html(k).attr('value', v2);
if (k === bestk) { o.html(k).attr("selected", "selected"); }
o.appendTo($second);
});
}
});
} else {
setValue(options.emptyValue);
}
} else {
$first.change();
}
});
};
})(jQuery);
제 스크립트 샘플 코드는
<form action="" method="post" enctype="multipart/form-data">
<input type="hidden" name="action" value="1" />
<fieldset>
<select type="text" name="address[state]" id="first" value="<?php // echo $_POST["address"]["state"]; ?>" class="short" tabindex="15"><option value="">--</option></select>
<select type="text" name="address[city]" id="second" value="<?php // echo $_POST["address"]["city"]; ?>" class="short" tabindex="16"><option value="">--</option></select>
</fieldset>
<input type="submit" name="submit" id="submit" class="button grey" tabindex="15" value="<?php echo SPEC($GLOBALS['_LANG']['_tpl_myaccount33']) ?>" />
</form>
이 문제에 도움을 주셔서 감사합니다. 고맙습니다.
안녕 Diodeus, 파일 자체를 실행하려면 작업이 비어 있습니다. – gdinari
Firefox + Firebug를 사용하고 NET 탭을보십시오. 어떤 필드가 서버에 다시 게시되고 있는지 확인할 수 있습니다. 도움이 될 수 있습니다. –
감사합니다. 감사합니다. – gdinari