Select can't be selected on the value

Question

I generate multi select-box. Next I add some options to this select and try to set selected options. But this does not work. This is my code to set the Selected item:

for(xx=0;xx<obj.length; xx++)
{
    //console.log(obj.length);
    idd = obj[xx].id_produkt_lista;   
    id_statusd =  obj[xx].id_status;

    $('#sel_' + idd).find("option[value=" + id_statusd + "]").attr('selected','selected');

}

The variables in the code above are:

• idd - the id of the select box whose option I want to set.
• id_statusd - value which should be selected on select #sel+id

My html code is as follows:

<tbody>
    <tr id="47">
        <td id="" class="">2</td>
        <td id="">
            <select class="sel" id="sel_47">
            <option value="2" style="color: rgb(186, 175, 28);">drukowanie</option>
            <option valuea="3" style="color: rgb(8, 193, 255);">na zgrzewalni</option>
            <option value="4" style="color: rgb(112, 51, 158);">na oklejaniu</option>
            <option value="5" style="color: rgb(112, 51, 158);">laminowanie</option>
            <option value="6" style="color: rgb(112, 51, 158);">przycinanie</option>
            <option value="7" style="color: rgb(112, 51, 158);">oklejanie</option>
            <option value="8" style="color: rgb(237, 90, 21);">na cięciu</option>
            <option value="9" style="color: rgb(237, 90, 21);">na frezowaniu</option>
            <option value="10" style="color: rgb(237, 90, 21);">burtowanie i klejenie</option>
            <option value="11" style="color: rgb(237, 90, 21);">spawanie</option>
            <option value="12" style="color: rgb(237, 90, 21);">elektryka</option>
            <option value="14" style="color: rgb(90, 35, 163);">zamowienie zewnetrzne</option>
            <option value="15" style="color: rgb(62, 201, 65);">MAGAZYN-gotowe</option>
        </select>
        </td>
     </tr> 
     <tr id="48">
         <td id="" class="">3</td>
         <td id="">
        <select class="sel" id="sel_48">
            <option value="2" style="color: rgb(186, 175, 28);">drukowanie</option>
            <option value="3" style="color: rgb(8, 193, 255);">na zgrzewalni</option>
            <option value="4" style="color: rgb(112, 51, 158);">na oklejaniu</option>
            <option value="5" style="color: rgb(112, 51, 158);">laminowanie</option>
            <option value="6" style="color: rgb(112, 51, 158);">przycinanie</option>
            <option value="7" style="color: rgb(112, 51, 158);">oklejanie</option>
            <option value="8" style="color: rgb(237, 90, 21);">na cięciu</option>
            <option value="9" style="color: rgb(237, 90, 21);">na frezowaniu</option>
            <option value="10" style="color: rgb(237, 90, 21);">burtowanie i klejenie</option>
            <option value="11" style="color: rgb(237, 90, 21);">spawanie</option>
            <option value="12" style="color: rgb(237, 90, 21);">elektryka</option>
            <option value="14" style="color: rgb(90, 35, 163);">zamowienie zewnetrzne</option>
            <option value="15" style="color: rgb(62, 201, 65);">MAGAZYN-gotowe</option>
        </select>
         </td>
       </tr> 
       <tr id="49">
           <td id="" class="">4</td>
           <td id="">
            <select class="sel" id="sel_49"><option value="2" style="color: rgb(186, 175, 28);">drukowanie</option>
            <option value="3" style="color: rgb(8, 193, 255);">na zgrzewalni</option><option value="4" style="color: rgb(112, 51, 158);">na oklejaniu</option>
            <option value="5" style="color: rgb(112, 51, 158);">laminowanie</option><option value="6" style="color: rgb(112, 51, 158);">przycinanie</option>
            <option value="7" style="color: rgb(112, 51, 158);">oklejanie</option><option value="8" style="color: rgb(237, 90, 21);">na cięciu</option>
            <option value="9" style="color: rgb(237, 90, 21);">na frezowaniu</option><option value="10" style="color: rgb(237, 90, 21);">burtowanie i klejenie</option>
            <option value="11" style="color: rgb(237, 90, 21);">spawanie</option><option value="12" style="color: rgb(237, 90, 21);">elektryka</option>
            <option value="14" style="color: rgb(90, 35, 163);">zamowienie zewnetrzne</option><option value="15" style="color: rgb(62, 201, 65);">MAGAZYN-gotowe</option>
            </select></td></tr> </tbody>

Answer 1

You don't need to set the selected attribute on the option in this way. All you have to do is use the 'val' function on the select.

See this in action here: http://jsfiddle.net/ht6xD/

So you code might look like:

for(xx=0;xx<obj.length; xx++)
{
    //console.log(obj.length);
    idd = obj[xx].id_produkt_lista;   
    id_statusd =  obj[xx].id_status;

    $('#sel_' + idd).val(id_statusd);
}

Unlikely to be related to the problem, but you should still fix. In the first <select> change

<option valuea="3"

to

<option value="3"

EDIT

I've mocked this up (http://jsfiddle.net/HacLZ/). Really this is something you should have considered doing yourself, but its done now.

The code works ok, in all three solutions (yours, mine and nbrooks). So there must be something else wrong. I suspect you have duplidate IDs.

Answer 2

Try this

JS CODE

$(document).ready(function(){
    $('select').change(function(){
         var id = $(this).attr('id');
        console.log($('#'+id+'').find('option:selected').text());
    });     
});

JS FIDDLE

Answer 3

.val() accepts a callback parameter which can compute the new value of the element, given the index and the previous value.

Something like this should work:

$("select.sel").val(function(index, value) {
    return obj[index]["id_status"];
});

Answer 4

If idd and id_statusd contains expected values it should work ok, however try changing your selecting line to:

$('#sel_' + idd + ' option[value="' + id_statusd + '"]').attr('selected','selected');