Javascript jquery关于属性（从加载的html加载）

我有两个选择选项。当我选择第一个选项时，它会使用javascript将其发布到链接，然后将完整选项返回给第二个选项，其中包含来自数据库的数据

我在第二个选择中有一个属性，叫做数据价格。当我试图使用它时，它什么也没有显示：

var x = $("#services").find(':selected').attr('data-price');

但是，当我尝试使用第一个select属性时，它工作正常。有人知道怎么修理吗？谢谢

<script type="text/javascript">

$(document).ready(function(){
    var category = document.getElementById("category").value;

    $.ajax({
        type:'POST',
        url:'<?=base_url();?>dashboard/ajaxData',
        data:'main_category='+category,
        success:function(html){
        $('#services').html(html);
        }
    }); 
    $('#category').on('change',function(){
        var category = $(this).val();
        if(category){
            $.ajax({
                type:'POST',
                url:'<?=base_url();?>dashboard/ajaxData',
                data:'main_category='+category,
                success:function(html){
                    $('#services').html(html);
                }
            }); 
        }else{
            $('#services').html('<option value="">Select category first</option>');
        }
    });

});
    var x = $("#services").find(':selected').attr('data-price');
    document.getElementById("demo").innerHTML = x;

</script>


        <div class="form-group">
            <label>Category</label>

            <select name="category" id="category" class="form-control">
                <?php foreach($categories->result() as $cat): ?>
                <option data-price="55" value="<?=$cat->id;?>">- <?=$cat->title;?></option>
                <?php endforeach; ?>
            </select>
        </div>  

        <div class="form-group">
            <label>Service</label>

            <select name="service" id="services" class="form-control">
            <option data-price=""></option>
            </select>
        </div>  
<div id="demo"></div>

---

要查找所选内容，请执行以下操作：

$("#services option:selected")

然后你可以从这个选项中得到你想要的任何东西。 对于数据属性，它可以是：

$("#services option:selected").data('price');

或者

$("#services option:selected").attr('data-price');

这个答案是基于这样一个假设，即您的select作为服务的id属性，如果不是这样，那么上面的所有代码都将失败

根据您发布的更新代码，您可能希望在用户更改选择时更新所选值。 我会像这样绑定更改事件：

$("#services option:selected").change(function(){
    var price = $(this).attr('data-price');
    $('#demo').html(price);
});

---

您也可以使用.data方法$services.find'：selected'.data'price'；为了得到正确的答案，把你的html文件放到没有html文件的地方。首先，要简化问题。请确定，查找元素或获取属性时存在问题。console.log x对象或x.html。我添加了代码以显示u，谢谢您确定正确设置了数据属性吗？您没有共享AJAX调用返回的HTML。谢谢，问题在于服务位置选项：选中，它应该在$'services'.htmlhtml；之后，再次感谢你。