【发布时间】:2016-12-13 17:37:20
【问题描述】:
我有以下动态下拉选择标签:
<select name="order_accept" class="select_class order_accept">
<option value=''>Choose Option</option>
<option data-toggle="modal" data-target="#myModal" value="0" data-poid="<?php echo $po_id; ?>" <?php if($order_status
== 0) echo 'selected = "selected"'; ?>>In Process</option>
<option data-toggle="modal" data-target="#myModal" value="2" data-poid="<?php echo $po_id; ?>" <?php if($order_status
== 2) echo 'selected = "selected"'; ?>><b>Yes, Completed</b></option>
<option data-toggle="modal" data-target="#myModal" value="3" data-poid="<?php echo $po_id; ?>" <?php if($order_status
== 3) echo 'selected = "selected"'; ?>>Cancel Order</option>
</select>
现在例如它显示这些选择选项 4 次。
我想用选定的data-poid 值调用 ajax。所以我使用以下 jQuery:
<script type="text/javascript">
$('.order_accept').on('change', function() {
$('#myModal').modal('show');
});
$(document).ready(function(){
$("#yes").click(function(event) {
event.preventDefault();
$('.order_accept_msg').show();
var poid = $('.order_accept option:selected').data('poid');
alert(poid);
var oid = $('.order_accept').val();
var token = <?php echo "'".generate_Form_Token('order_accept')."';"; ?>
$.ajax({
url : <?php echo "'".SITE_URL."'"; ?> + 'order-accept',
type : 'POST',
dataType : 'html',
data : {
'poid' : poid,
'oid' : oid,
'_token' : token,
},
beforeSend : function () {
$('#yes').prop('disabled', true);
},
success : function (result) {
$('.order_accept_msg').html(result);
$('.order_accept_msg').show(result);
setTimeout(function(){
$('#no').trigger("click");
$('#yes').prop('disabled', false);
$('.order_accept_msg').hide();
}, 3000);
}
});
});
});
</script>
现在,如果我选择第一个下拉选择选项,那么它会得到正确的 data-poid 值,然后如果选择另一个下拉选择选项,那么它会得到第一个 data-poid 值!
我想获取当前选中的data-poid 值!
更新:
每个下拉选择选项如下所示:
【问题讨论】:
-
那是因为您将相同的
data-poid分配给所有选项data-poid="<?php echo $po_id; ?>"。 -
不,我在 php while 循环中使用此下拉菜单,但在检查元素后我看到不同的
data-poid。 -
那么
alert(poid);显示的值总是相同的问题?? -
是的,它显示相同的值。注意:成功进行ajax调用后,我没有加载整个页面。
-
尝试在 onchange 事件中显示
alert($('.order_accept option:selected').data('poid'))。
标签: javascript jquery