【问题标题】:How to get current selected option value from dynamic dropdown option?如何从动态下拉选项中获取当前选定的选项值?
【发布时间】: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="&lt;?php echo $po_id; ?&gt;"
  • 不,我在 php while 循环中使用此下拉菜单,但在检查元素后我看到不同的 data-poid
  • 那么alert(poid); 显示的值总是相同的问题??
  • 是的,它显示相同的值。注意:成功进行ajax调用后,我没有加载整个页面。
  • 尝试在 onchange 事件中显示alert($('.order_accept option:selected').data('poid'))

标签: javascript jquery


【解决方案1】:

使用类选择器'.order_accept option:selected' 将始终返回第一次出现,因此您必须使用全局变量来存储当前选择:

$(document).ready(function(){
    var current_select;

    $('.order_accept').on('change', function() {
        $('#myModal').modal('show');
        current_select = $(this);
    });
    $(document).ready(function(){          
        $("#yes").click(function(event) {            
            ...

            var poid = $('option:selected',current_select).data('poid');                        
            alert(poid);
        })
    })
})

希望这会有所帮助。

【讨论】:

  • 我们现在试试吧。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2023-03-22
  • 1970-01-01
  • 1970-01-01
  • 2012-01-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多