Select option by code, which select is filled dynamically

Question

I am trying to select programmatically an option from a HTML Select which is filled dynamically by code.

The selected is filled with a for:

for(var i =0; i< valores.length ; i++)
{
    var opcion= "<option value="+valores[i]['id_estado']+">"+valores[i]['nombre_estado']+"</option>";
    selectEstado.append(opcion);    
}

and then select a option with:

$("#select_estado option[value='"+valores[0]['estado']+"']").attr('selected', true);

but when I do the select locates in the value=0, any ideas?

See this: https://stackoverflow.com/questions/5206070/programmatically-choose-item-in-select-drop-down — , Sep 25 '17 at 17:43
Thank you Francesco. I use that on my Javascript code, I put the select tag in the code because I know the value which has to be marked. Mehdi Bouzidi is a good answer too. — Héctor Capulín Patiño, Sep 29 '17 at 17:50

Mehdi Bouzidi · Accepted Answer · 2017-09-25T18:52:49.867

I don't know how you did declare your valores array, so I felt free to declare a new array that takes the keys you used in your question.

So if you declared your array the same way I did then you shouldn't use this syntax valores[i]['id_estado'] but you should use this one valores[i].id_estado

Otherwise, to select an option by it value you should use the simple function val().

Finally I support my answer with this question: Set select option 'selected', by value

$(function(){

var valores={ 
0:{'id_estado':1,'nombre_estado':3},
1:{'id_estado':5,'nombre_estado':2},
2:{'id_estado':20,'nombre_estado':1}
        };
        
 var count=Object.keys(valores).length;
for(var i =count-1; i>= 0 ; i--)
{
    var opcion= "<option value="+valores[i].id_estado+">"+valores[i].nombre_estado+"</option>";
    $("#select_estado").append(opcion);      
}

$("button").on("click",function(){
$("select").val(valores[1].id_estado);
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <select id="select_estado"></select>
 <button type="button" >Select</button>

Hope it helps !

@HéctorCapulínPatiño welcome :) would you please click on approve the answer by clicking the **Check Mark** — Mehdi Bouzidi, Sep 29 '17 at 17:48

Select option by code, which select is filled dynamically

1 Answers1