Hide some choice value based on current choice value on the same field in Sharepoint 2013

Question

I use Sharepoint 2013. On the form, I have a field called 'Status' with multiple choices. e.g. "Step 1","Step 2", "Step 3", "Step 4", "Step 5", "Step 6", "Closed", etc. I have more than 10 choices.

When open an edit form, based on current Status, I only want to display some choice on this field, not all choices.

For example: If current status is 'Step 1', only show 'Step 1', 'Step 2', 'Step 4', 'Closed' on the field.

If current status is 'Step 4', only show 'Step 4', 'Step 6', and 'Step 7'.

Prefer javascript/jquery/css ...

Thanks in advance! JJ

Answer 1

You can edit the edit form page and add a content editor web part, then paste the JS script below in it:

<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script language="javascript">  
    _spBodyOnLoadFunctionNames.push("StartFunction");   
    function StartFunction()   
    {      
    if($("select[title='choices']").find(":selected").val() == 'step1')
    {
        $("select[title='choices']").find("option[value='step3']").remove();
        $("select[title='choices']").find("option[value='step5']").remove();
        $("select[title='choices']").find("option[value='step6']").remove();
        $("select[title='choices']").find("option[value='step7']").remove();
        $("select[title='choices']").find("option[value='step8']").remove();
        $("select[title='choices']").find("option[value='step9']").remove();
    }
    else if($("select[title='choices']").find(":selected").val() == 'step4')
    {
        $("select[title='choices']").find("option[value='step1']").remove();
        $("select[title='choices']").find("option[value='step2']").remove();
        $("select[title='choices']").find("option[value='step3']").remove();
        $("select[title='choices']").find("option[value='step5']").remove();
        $("select[title='choices']").find("option[value='step8']").remove();
        $("select[title='choices']").find("option[value='step9']").remove();
        $("select[title='choices']").find("option[value='closed']").remove();
    }
    } 
</script>

For anther option in the choice column, you can edit this script and add other options in it.

The result as below:

Use F12 to debug: