JQuery set select box value to selected

Question

Please help i am doing this to use in my mobile with jquery mobile

var obj = jQuery.parseJSON(finalresult);
 //alert(obj);
var dept = '2';
$(document).ready(function () {
    //$("#opsContactId").empty();
    $.each(obj, function (k, v) {
        var $opt = $("<option/>");
        $opt.attr("value", k);
        //alert(k);
        //alert(v);
        //var value1=v;
        if (k == dept) {
            //$opt.attr("selected","selected");
            //alert("in if");
            $("#opsContactId").val(k);
            //document.getElementById("opsContactId").value=k;
            // $('#opsContactId').selectmenu('refresh', true);  
        }
        $opt.text(v);
        $opt.appendTo($("#opsContactId"));
    });
});

not able to set an option to be selected by dafault

Answer 1

As others as stated, jQuery's .prop() would be the most suitable answer here as jQuery Docs mention themselves:

"The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value."

To further your on your example, jQuery allows for method 'chaining' which returns the jQuery object after the method has completed, thus you can add another method directly after it.

<select id="opsContactId">   
</select>

<script>
$(document).ready(function() {
    var tmp = [ 1, 2, 3, 4, 5 ], 
        dept = 2;

    $.each( tmp, function( k, v ) {
        $("<option/>").attr("value", k)
                      .text( "Value - " + v)
                      .appendTo( $("#opsContactId") )
                      .prop( 'selected', ( k == dept ? 'selected' : '' ));        
    });
});
</script>

Fiddle: http://jsfiddle.net/twdgC/

---

Later I forgot you mentioned the jQuery mobile aspect of your question, which changes the dynamic of the question a little bit. The snippet above is run after the page has loaded (Thus, all the jQuery mobile attachments have already been set/made), which would happen to give you the result of (below)

Fiddle: http://jsfiddle.net/5ksG8/

This obviously isn't helpful when trying to construct an <select> list, thus we'll need to append the snippet above with:

$("#opsContactId").selectmenu('refresh', true );

After the snippet has run, thus it 'reloads' the entire list, finally providing you with (below)

Fiddle: http://jsfiddle.net/YxVg6/

You were doing this in your original snippet, the issue was - you were executing it within the loop (And it was commented out!).

Answer 2

jsBin demo

if you have a match you'll need to add the attribute selected. however I don't know how your object looks like...

var obj  = {"1":"one","2":"two","3":"three","4":"four"}; // let's say that's how it looks
var dept = '2';

$(function () {

  var $sel = $("#opsContactId"); 
  $.each(obj, function (k, v) {
    var $opt = $("<option/>", {value:k, text:v}).appendTo( $sel );
    if (k == dept) $opt.prop({selected:true}); 
  });

});

Answer 3

Would something like this not be easier?

Would something like this not be easier?

var selected = "selected";   // work this out
var text = "Option Text"; // work this out
var value = "Option Value"; // work this out
$("#opsContactId").append('<option value="' + value + '" '+ selected + '>' + text + '</option>');