Este es mi Json
var data_depat = [
{'nombre_dept': 'Categoria 1',
'id_dept':'1',
'municipios': [
{'id_mun': '1', 'nombre_mun': 'opc 1'},
{'id_mun': '2', 'nombre_mun': 'opc 2'},
{'id_mun': '3', 'nombre_mun': 'opc 3'},
]
},
{'nombre_dept': 'Categoria 2',
'id_dept':'2',
'municipios': [
{'id_mun': '4', 'nombre_mun': 'opc 4'},
{'id_mun': '5', 'nombre_mun': 'opc 5'},
{'id_mun': '6', 'nombre_mun': 'opc 6'},
]
},
{'nombre_dept': 'Categoria 3',
'id_dept':'3',
'municipios': [
{'id_mun': '7', 'nombre_mun': 'opc 7'},
{'id_mun': '8', 'nombre_mun': 'opc 8'},
{'id_mun': '9', 'nombre_mun': 'opc 9'},
]
},
{'nombre_dept': 'Categoria 4',
'id_dept':'4',
'municipios': [
{'id_mun': '10', 'nombre_mun': 'opc 10'},
{'id_mun': '11', 'nombre_mun': 'opc 11'},
{'id_mun': '12', 'nombre_mun': 'opc 12'},
]
}
];
asi hasta el momento tengo mi html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>primer ejemplo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type='text/javascript'></script>
<script type="text/javascript" src="jquery/index.js"></script>
</head>
<body>
<form>
<select name="categorias" id="categoria">
<option value=>Categoria 1</option>
<option>Categoria 2</option>
<option> Categoria 3</option>
<option>Categoria 4</option>
</select>
</form>
</body>
</html>