No sé JS en absoluto, pero necesito algunas características js en mi proyecto django. te agradeceria mucho si me ayudas. Me gustaría cambiar el estilo de las etiquetas de opción de la etiqueta seleccionada con id="id_car_model". Debería verificar los atributos de valor para cada etiqueta de opción y hacer coincidir con el "pk", que obtiene de JSON.
La condición: if value != pk add style="display:none". Cada valor debe coincidir con cada paquete. Para este ejemplo, la lista debe ser con 1 y 2 pk.
Y esta entrada de selección debe estar inactiva hasta que reciba este JSON.
He intentado encontrar la solución, pero no sé aplicarla.
html
<select name="car_model" id="id_car_model"> <options value selected>----------</option> <options value="1">520</option> <options value="2">720</option> <options value="3">301</option> <options value="4">308</option> </select>Obtiene JSON del back-end de django.
principal.js
$.ajax({ type: 'POST', url: 'car-model-ajax/', data: model_data, dataType: 'json', success: function (response) { console.log(response) console.log(response.car_models) var jsonModels = response.car_models var models = JSON.parse(jsonModels) console.log(models) models.map(el => console.log(el.pk)) }, error: function (response) { console.log(response) }, })esta en la consola
{car_models: '[{"model": "adapp.carmodel", "pk": 1, "fields": {"…pk": 2, "fields": {"brand": 12, "model": "720"}}]'} main.js:263 [{"model": "adapp.carmodel", "pk": 1, "fields": {"brand": 12, "model": "520"}}, {"model": "adapp.carmodel", "pk": 2, "fields": {"brand": 12, "model": "720"}}] main.js:266 (2) [{…}, {…}] main.js:267 1 main.js:267 2Si entendí la tarea correctamente, aquí está la versión fija de su función (con comentarios en los lugares necesarios):
$.ajax({ type: 'POST', url: 'car-model-ajax/', data: model_data, dataType: 'json', success: function (response) { // show all items (activate previously disabled) $("#id_car_model option:disabled").removeAttr('disabled'); const models = JSON.parse(response.car_models).map((el) => el.pk); // hide all that we don't have in the models array $("#id_car_model option").each(function(val){ if(!models.includes(val)){ $(this).attr('disabled', 'disabled'); } }); }, error: function (response) { console.log(response) }, })Aquí hay un fragmento de código con el que puedes jugar:
const idsToShow = [1,2]; $("#id_car_model option").each(function(val){ if(!idsToShow.includes(val)){ $(this).attr('disabled', 'disabled'); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <select name="car_model" id="id_car_model"> <option value="0" selected>----------</option> <option value="1">520</option> <option value="2">720</option> <option value="3">301</option> <option value="4">308</option> </select> </body>