Set innerHtml of select element based on variable

Question

How can I set the default value of an element by comparing the innerHTML to a variable?

This is the select box

<select name="added_by" class="form-item-added_by" required="" id="id_added_by">
  <option value="" selected="">---------</option>

  <option value="1">admin</option>

</select>

This is what I've tried, but nothing happens.

<script type = "text/javascript">
    $(document).ready(function(){
        {%for note in notes%}
     added_by = "{{note.added_by}}"
     $(".form-item-added_by").val(added_by).change();
     {%endfor%}
        });
    </script>

I feel like this is trying to mix a server side loop with client side logic. — Taplar
– Taplar, Commented Oct 30, 2018 at 19:18

Reez0 · Accepted Answer · 2018-10-30 19:17:01Z

1

That's not going to work because you're changing the select based on the value which in this case is 1, so the variable added_by is not going to match anything.

Try this

<script type = "text/javascript">
    $(document).ready(function(){
        {%for note in notes%}
     added_by = "{{note.added_by}}"
     $('.form-item-added_by').val(function(){
    return $('.form-item-added_by option').filter(function(){
                return $(this).text() === added_by;
           }).val();
});
     {%endfor%}
        });
    </script>

answered Oct 30, 2018 at 19:17

Reez0

2,7273 gold badges22 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Set innerHtml of select element based on variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related