Load predefined data from columns and update field with possible selection with Javascript

Question

Hey everybody, I am trying to resolve my problem with custom list in SharePoint 2013.
In my list I have 3 dropdown items -

Parent
Child
Child1

When I select specific item in Parent, values for Child will change.
After that I will select specific item in Child, also values for Child1 will change.

I make this with javascript but now I want to change that.
I would like to make it like that - Parent - specific value (user can't change the value)
Child - specific value (user can't change the value) - specific value will refresh Child1 and user can select one option.

Piece of code -

function nastavSluzba(){
$('#Produktova_Skupina_Sluzba').find('select').select('');
$('#Vyber_Oblasti').find('select').val('')
$('#tableNapoveda').remove();
$("#Vyber_Oblasti").find('select').attr("disabled", false);
$("#Produktova_Skupina_Sluzba").find('select').attr("disabled", false);
$("#Vyber_Oblasti").find('select').css({"background-color": "white","color": "black"});

        }

function nastavPytam(){
    $('#Pytam_Sa_Na').find('select').find('option').remove().end().append('<option value="0">(None)</option>').val(0);  

    $('#Produktova_Skupina_Sluzba').find('select').select(function() {      
    $('#Pytam_Sa_Na').find('select').find('option').remove().end().append('<option value="0">(None)</option>').val(0);
     zmenDefaultHodnotySelectov();      
     hideDoplnujuce();
        getSluzba(list_komponenty,$(this).find(":selected").text(),$("#Vyber_Oblasti").find(":selected").text(),function(id,psn,tim){
            $("#Pytam_Sa_Na").find('select').append("<option value='"+id+"'>"+psn+"</option>");                                 
        });

        $('#tableNapoveda').remove();           
        getNapoveda(list_napoveda,$(this).find(":selected").text(),function(znenie,napoveda){
            console.log(znenie,napoveda);                   
            //$("#Pytam_Sa_Na").after(znenie,napoveda);             
            $('#tableNapoveda tr:last').after('<tr><td>'+znenie+'</td><td>'+napoveda+'</td></tr>');                     
        });   
    });
}



function nastavDoplnujuce(){
    $('#Pytam_Sa_Na').find('select').on('change', function() {          
        getRiesitelSluzba(list_komponenty,$(this).find(":selected").text(),$("#Produktova_Skupina_Sluzba").find(":selected").text(),$("#Vyber_Oblasti").find(":selected").text(),function(timV){
            nastavRiesitel(timV);
        });

        hideDoplnujuce();

        getPolia(list_komponenty,$(this).find(":selected").text(),$("#Produktova_Skupina_Sluzba").find(":selected").text(),$("#Vyber_Oblasti").find(":selected").text(),function(id,di){                    
            console.log(id,di);
            $("#"+di).parent().show();
            Doplnujuce.push(di);                        
        });

    });

}

Answer 1

Hi @Erik Jacko ,
You can use following code to set Parent and Child column to read-only and display the value in the form

jQuery("select[title^='Pytam_Sa_Na']").attr("disabled","true")  
jQuery("select[title^='Produktova_Skupina_Sluzbaa']").attr("disabled","true")  

Then you can delete the function nastavPytam(). The Parent and Child column will be unable to edit. And the Child1 will take selection with Parent.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

---