Conditionally add selected attribute when building a dropdown with jquery

Question

I'm building a select dropdown, with the following function:

        $.each(data,function(key, value) {
            $select.append('<option value=' + key + '>' + value + '</option>');
        });

Here I copy a sample of my origin data:

231:"Building"
232:"Trusting"
234:"Engineering"
235:"(*)Monitoring"
236:"Managing"

When building it, I want to:

Mark the option that begins with '(*)' as selected, so I need to conditionally add the attr 'selected' to the option.
Remove the '(*)' from the value shown.

Thanks for your help!

Possible duplicate of http://stackoverflow.com/questions/815103/jquery-best-practice-to-populate-drop-down — GavinBrelstaff, Apr 08 '17 at 15:35
You can simply check whether '(*)' contains in your value, replace it with the empty string show it as selected. — Sumit Gulati, Apr 08 '17 at 15:39
@SumitGulati OK, the problem is that I don't know how to write it in jquery... — Capiedge, Apr 08 '17 at 15:42

score 0 · Accepted Answer · answered Apr 08 '17 at 15:38

You can use .find to figure out if the string starts with '(*)' then add selected to the end of the option and use slice to remove the '(*)'.

data = {
  231:"Building",
  232:"Trusting",
  234:"Engineering",
  235:"(*)Monitoring",
  236:"Managing"
}
$select = $("#select");
from = '(*)';
$.each(data,function(key, value) {
  if (value.indexOf(from) == 0) {
    $select.append('<option value=' + key + ' selected>' + value.slice(from.length) + '</option>');
  } else {
    $select.append('<option value=' + key + '>' + value + '</option>');
  }
});

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

Conditionally add selected attribute when building a dropdown with jquery

1 Answers1