Javascript jQuery更改下拉列表值并禁用

下拉列表一：

下拉列表二：

当用户从父任务下拉列表中选择Requiremnet Analysis时，如何从任务类别下拉列表中选择Bug Fixed&Suntenance选项并将其选中并禁用

它具有与之关联的数据任务类别=2444，这与任务类别下拉列表的id相同

如何使用jQuery实现这一点？

您可以使用

jQuery(function ($) {
    //change event handler for the parent
    $('#parent_task').change(function () {
        //$(this).find('option:selected')  - finds the selected option element
        //then its data attribute is read and that is set as teh value of the task category
        $('#task_category').val($(this).find('option:selected').data('taskCategory')).prop('disabled', true)
    })
})

演示：

试试这个：

$('#parent_task').on('change',function(){
    if($('#parent_task option:selected').val()=="527")
    {
        $('#task_category').val("2444");
        $('#task_category').attr('disabled',true);
    }
});

---

您想禁用选项还是选择？禁用选项并将其选中。我将使用$'task\u category'。prop'disabled'，true；事实并非如此。更清楚了。因为disabled是一个属性而不是属性。我搜索了它，甚至我知道它是一个属性而不是属性。所以最好使用.prop.thanksArun：您能区分数据“任务类别”和数据“任务类别”吗。我猜这两种方法都适用，但核心区别是什么？我可以使用前者还是应该使用后者？@slimshaddyyy这是html5数据api样式，其中-后面的第一个字符是大写字符数据-partArun：我知道数据属性。想知道哪一个是更好的选择。

jQuery(function ($) {
    //change event handler for the parent
    $('#parent_task').change(function () {
        //$(this).find('option:selected')  - finds the selected option element
        //then its data attribute is read and that is set as teh value of the task category
        $('#task_category').val($(this).find('option:selected').data('taskCategory')).prop('disabled', true)
    })
})

$('#parent_task').on('change',function(){
    if($('#parent_task option:selected').val()=="527")
    {
        $('#task_category').val("2444");
        $('#task_category').attr('disabled',true);
    }
});

jQuery(document).ready(function($){
    $('#parent_task').on('change', function(event) {
        if ($(this).val() === "527") {
            var taskCategory = $(this).find(':selected').data('task-category');
            $("#task_category").val(taskCategory).prop('disabled', 'disabled');
        } else {
            $("#task_category").prop('disabled', false);
        }
    });
});