2
我想通過使用ajax和序列化哈希得到選擇菜單顯示隱藏。昨晚我有這個系統工作，但是我將#selector從一個窗體改成了一個窗體，並且突然停止了運行。我不得不擴大表格的範圍以提供更多關於發佈的數據，並且不希望爲此一次對所有數據進行序列化，因爲這會對系統造成額外的壓力。jQuery show hide基於序列化哈希的選擇菜單
該網頁有點按預期工作。它顯示第一個選擇，允許我選擇一個選項，我可以看到AJAX發佈，但散列值是空的，我認爲這是破壞上面的PHP。我無法弄清楚爲什麼散列是空的。我認爲它沒有得到選擇的價值，但我無法解決爲什麼..
如果可能，請你指出我要去哪裏錯了？
<section id="add">
<div class="container">
<form method="post">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Step 1: Instance Select</strong></h3>
</div>
<div id="selector">
<div class="panel-body">
<div class="col-md-6">
<select class="form-control box1" name="box1"></select>
<input name="box1hash" class="box1hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box2" name="box2"></select>
<input name="box2hash" class="box2hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box3" name="box3"></select>
<input name="box3hash" class="box3hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box4" name="box4"></select>
<input name="box4hash" class="box4hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box5" name="box5"></select>
<input name="box5hash" class="box5hash" type="hidden" />
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Step 2: Event Details</strong></h3>
</div>
<div class="panel-body">
<input name="event_name" type="text" class="form-control" />
</div>
</div>
<input type="submit"/>
</form>
</div>
$(document).on('change', '#selector', function(e) {
ajax_post(this);
});
ajax_post();
})(jQuery);
function show_hide_select(select){
if ($(select).find('option').length < 1) {
$(select).hide();
} else {
$(select).show();
}
}
function ajax_post(element=null) {
var frm = $('#selector');
if (element != null) {
// Reset selections
var found=false;
frm.find('select').each(function(e){
if (found==true) {
$(this).hide().find('option:selected').prop("selected", false)
}
if (element==this) found=true;
});
}
$.ajax({
url: '?ajax=1',
type: "POST",
data: frm.serialize(),
dataType: 'json',
success: function (data) {
if (data.box1hash != frm.find('.box1hash').val()) {
frm.find('.box1').html(data.box1?data.box1:'');
frm.find('.box1hash').val(data.box1hash);
show_hide_select(frm.find('.box1'));
}
if (data.box2hash != frm.find('.box2hash').val()) {
frm.find('.box2').html(data.box2?data.box2:'');
frm.find('.box2hash').val(data.box2hash);
show_hide_select(frm.find('.box2'));
}
if (data.box3hash != frm.find('.box3hash').val()) {
frm.find('.box3').html(data.box3?data.box3:'');
frm.find('.box3hash').val(data.box3hash);
show_hide_select(frm.find('.box3'));
}
if (data.box4hash != frm.find('.box4hash').val()) {
frm.find('.box4').html(data.box4?data.box4:'');
frm.find('.box4hash').val(data.box4hash);
show_hide_select(frm.find('.box4'));
}
if (data.box5hash != frm.find('.box5hash').val()) {
frm.find('.box5').html(data.box5?data.box5:'');
frm.find('.box5hash').val(data.box5hash);
show_hide_select(frm.find('.box5'));
}
}
});
}
</script>
我完全不知道，但我想你應該從''的＃DIV selected'的serialize''inputs'和'select'。不是整個'＃selected' div看到這裏> https://stackoverflow.com/questions/9589126/jquery-serialize-serializearray-from-an-element-that-is-not-a-form –
AJAX表明，數據是從其他隱藏字段發佈散列，但不是來自box2 ... box two是用於在頁面上未顯示的PHP中驗證的一個。我認爲問題在於jquery沒有獲得第一個框的價值，也沒有序列化內容本身。我已經更新了我的問題以進一步解釋這一點。 –
你的js的第一行缺少了嗎？當你更改表單容器時，jquery'change'的性質和組件選擇器也會發生變化（因爲它不再是一個表單，我認爲你的'frm.serialize（）'將不再起作用，因爲可能需要這種不同的策略。你能總結一下你的總體預期行爲嗎？ – Sam0