Question

I have the following select dropdown that occurs when a user clicks an item:

        $(this).html($("<select/>", {
          class: 'sel',
        }).append($("<option/>", { text: "WIP" }))
          .append($("<option/>", { text: "C" }))
          .append($("<option/>", { text: "A" }))
          .append($("<option/>", { text: "AR" }))
          .append($("<option/>", { text: "NS" }))
        );

In addition, I have a variable called status that is defined that as either “WIP”, “C”, “A”, “AR”, or “NS”.

status = trim(($(this).text()));

I want to make it such that when I click the select dropdown, the option == status will be selected. For example:

status = "WIP"
<select class="sel">
     <option selected="selected">WIP</option>
     <option>C</option>
     ...
</select>        

Answer 1

The way I understand the question, you want to set a default option so that before the user clicks there’ll be an option selected.

Here’s how you would do that:

var status = "WIP";

$("<select/>", {
    class: 'sel',
})
.append( $("<option/>", { text: "WIP" }) )
.append( $("<option/>", { text: "C" }) )
.append( $("<option/>", { text: "A" }) )
.append( $("<option/>", { text: "AR" }) )
.append( $("<option/>", { text: "NS" }) )
.val( status )
.appendTo(this);

Note that the whole select element should be built before appending it to the DOM. This is much better for performance, since any interaction with the DOM is very expensive.