Selected item in dropdown based on value using jquery not working

Question

I have two dropdowns one for the clientes and one for the contacts of the cliente. When the page is loaded I want the primary contact of the cliente to be selected or when the user selected a diffrent cliente. Here is the html that is generated.

    <select id="drContacto" name="drContacto" class="form-control valid" aria-invalid="false">
<option value="39">Remi</option>
<option value="40">Bob</option>
<option value="56">Marck</option>
<option value="71">Luck</option>
<option value="122">Zoe</option>
<option value="123">roberto</option>
<option value="124">jason</option>
</select>

This is the jquery I have writen.

<script type="text/javascript">
    $(document).ready(function () {
        var clienteID = $('#drClient').val();
        $.ajax({
            url: '/ordenderecibo/FillContactos',
            type: "GET",
            dataType: "JSON",
            data: { ID: clienteID },
            success: function (cities) {
                $("#drContacto").html(""); // clear before appending new list
                $.each(cities, function (i, contactos) {
                    $("#drContacto").append(
                        $('<option></option>').val(contactos.contacto_id).html(contactos.nombre_contacto));
                });
                $("#drContacto option[value=" +  @Model.contrato.contacto_id + "]").prop("selected", true);
            }
        });
    });
    function FillContactos() {
        var clienteID = $('#drClient').val();
        $.ajax({
            url: '/ordenderecibo/FillContactos',
            type: "GET",
            dataType: "JSON",
            data: { ID: clienteID },
            success: function (cities) {
                $("#drContacto").html(""); // clear before appending new list
                $.each(cities, function (i, contactos) {
                        $("#drContacto").append(
                            $('<option></option>').val(contactos.contacto_id).html(contactos.nombre_contacto));
                });
                $("#drContacto option[value=" +  @Model.contrato.contacto_id + "]").prop("selected", true);
            }
        });
    }
</script>

EXAMPLE

Lets say that

@Model.contrato.contacto_id = 56

I would want it to be selected like this

    <select id="drContacto" name="drContacto" class="form-control valid" aria-invalid="false">
<option value="39">Remi</option>
<option value="40">Bob</option>
<option value="56" selected="selected">Marck</option>
<option value="71">Luck</option>
<option value="122">Zoe</option>
<option value="123">roberto</option>
<option value="124">jason</option>
</select>

However this is NOT the case and I don't understand why. Any help would be greatly appreciated. Thank you.

prathameshk73 · Accepted Answer · 2020-06-07 14:13:07Z

Try to set the value of the dynamic options instead of setting val of the options.

Use this

 $('<option value="'+contactos.contracto_id+'"></option>')

This will assign value property to the option tag.

<html>
<head>
	<title>Demo</title>
	<script src="https://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script>
	
<script>

$(document).ready(function() {
	var cities = [ {'contracto_id': 39, 'nombre_contacto':'Remi'},
	{'contracto_id': 39, 'nombre_contacto':'Remi'},
	{'contracto_id': 40, 'nombre_contacto':'Bob'},
	{'contracto_id': 56, 'nombre_contacto':'Marck'},
	{'contracto_id': 71, 'nombre_contacto':'Luck'},
	{'contracto_id': 123, 'nombre_contacto':'roberto'} ];
	var ModelContactoId = 56;
	$.each(cities, function (i, contactos) {
      $("#drContacto").append(
                            $('<option value="'+contactos.contracto_id+'"></option>').html(contactos.nombre_contacto));
	});
	
	$("#drContacto option[value=" +  ModelContactoId + "]").prop("selected", true);
})

</script>
</head>
<body>
	<select id="drContacto" name="drContacto" class="form-control valid" aria-invalid="false">

    </select>
	
</body>
</html>

Swati · Accepted Answer · 2020-06-07 14:07:50Z

As ajax call is asynchronous means that the code evaluated before the request result is returned so maybe ajax is still not getting where to apply selected option.One way make this work is when you are appending option there only apply selected value to option.i.e: Your ajax success will look like below :

 $.each(cities, function(i, contactos) {
    //check with the value if same 
  if (@Model.contrato.contacto_id == contactos.contacto_id) {
      //add selected to option
    $("#drContacto").append($('<option selected="selected"></option>').val(contactos.contacto_id).html(contactos.nombre_contacto));
  } else {
    $("#drContacto").append($('<option></option>').val(contactos.contacto_id).html(contactos.nombre_contacto));
 }
 });

Demo code:

var cities = [{
  "contacto_id": "1",
  "nombre_contacto": "a"
}, {
  "contacto_id": "2",
  "nombre_contacto": "b"
}, {
  "contacto_id": "3",
  "nombre_contacto": "c"
}];
var values = 2;
$.each(cities, function(i, contactos) {
//compare values if same
  if (values == contactos.contacto_id) {
  //add selected to that option
    $("#drContacto").append($('<option selected="selected"></option>').val(contactos.contacto_id).html(contactos.nombre_contacto));
  } else {
    $("#drContacto").append($('<option></option>').val(contactos.contacto_id).html(contactos.nombre_contacto));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="drContacto" name="drContacto" class="form-control valid" aria-invalid="false">
</select>

Collectives™ on Stack Overflow

Selected item in dropdown based on value using jquery not working

EXAMPLE

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EXAMPLE

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related