Question

I’m trying to select a certain option in a select box, but it’s not working:

var category = $(row + 'td:nth-child(4)').text();
$('#category_id', theCloned).load('/webadmin/video/get_categories',function(){
   $('#category_id', theCloned).val(category);
});

There’s no error thrown, but it doesn’t change the select box. What am I doing wrong here?

Here is an example of the options loaded by the load() call:

<option value="1">Capabilities</option>
<option value="2">Application Focus</option>
<option value="5">Fun</option>

The value of the category variable is “Fun” or “Capabilities”, etc.

Answer 1

var $selectbox = $('#category_id', theCloned), // cache the element to avoid lookup overheads
    category = $(row + 'td:nth-child(4)').text();
$selectbox.load('/webadmin/video/get_categories', function(){
   $selectbox
    .find('option')
    .filter(function(){
        return $(this).text() === category;
    })
    .prop('selected', true);
});

---

Update 1

Updated the code to adjust to the code you presented in your update. This will work. However if an option will contain a part of the string and not the full string it will still be part of the selected elements. E.g.
If the options will be

<option value="1">Capabilities</option>
<option value="2">Application Focus</option>
<option value="5">Fun</option>
<option value="6">Fun Time</option>
<option value="6">Funhouse</option>

And the category variable will have the value Fun, all three last options will be part of the selector.

---

Update 2

Changed the code to filter the options whose text fully matches the value of the category variable. Thus, you won’t have to worry about the Update 1 above.