Display selected value on dropdown in jQuery

Question

I have a dropdown in my edit form, but it doesn't display the selected value on the index.

 var ingredients=<?php echo $boms->load('rawMaterial') ?>;
 console.log('BillOfMaterials', ingredients);

I put onClick=setIngredientsId on my edit button.

function setIngredientsId(id){

        ingredients.forEach(element => {

            if(element.id==id){
                console.log('hello', element.raw_material)
                $('#modal-title-new-ingredients').html("Edit Ingredient")
                $('#bom_id').val(element.id);
                $('#ingredients').val(element.raw_material_id);
                $('#consumption').val(element.quantity);
            }
        });
    }

Below is my dropdown HTML:-

<select class="noselecttwo form-control" name="ingredients" id="ingredients" required>
  <option disabled selected value> -- Select a Ingredient -- </option>
    @foreach ($ingredients as $ingredient)
       <option id="var{{$ingredient->id}}" value="{{$ingredient->id}}">{{ $ingredient->name.' - '. $ingredient->rawMaterialUnit->name}}</option>
    @endforeach
</select>

I'm pretty sure you only miss this: ` $('#ingredients').trigger('change');` This way you let JS update the UI — Techno
– Techno, Commented Jun 1, 2021 at 10:18
$('ingredients option[value=' + element.raw_material_id + ']').prop('selected',true); ? — 4b0
– 4b0, Commented Jun 1, 2021 at 10:22
@RobBiermann yes, finally! Only missed a single line, thanks a lot! :) — cdogol
– cdogol, Commented Jun 1, 2021 at 12:56
Hey @Shree, I guess yours is correct too but it doesn't work on my code. Anyway, the answer from Rob solve the problem. Thanks to you too! :) — cdogol
– cdogol, Commented Jun 1, 2021 at 12:59

cdogol · Accepted Answer · 2021-06-01 13:00:25Z

1

Only missed a single line, here for those who face the same problem!

$('#ingredients').trigger('change');

This way you let JS update the UI. Thanks Rob for helping at the comment section!

answered Jun 1, 2021 at 13:00

cdogol

1551 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display selected value on dropdown in jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related