Codejoy
Codejoy

Reputation: 3816

Having django select the right option for a html select tag

I have a template in django that is a pretty simple table that loads up based on the list passed into it from the view. a snippet of the HTML code:

{% for hou in bookings_list %}
    <tr value={{hou.pk}}>
       <td><a href="mailto:{{hou.user.user.email}}"> {{ hou.user.user.first_name }} {{ hou.user.user.last_name }}</a></td>
       <td> <select id="room_number" name={{hou.pk}} class="select form-control">
        <option value=-1 id=-1> ------ </option>
        {% for room in room_list %}
          <option value={{room.id}} id={{hou.pk}}>{{ room.room_name }}</option>              
        {% endfor %}
        </select>
        </td>

     <td> .. more stuff ..</td>
    </tr>
{% endfor %}

(bookings_list is a list of bookings for housing that the user has booked (includes room they are assigned to unless no one assigned them a room from a new booking so it is NULL), the room list is a list of all possible rooms for the person in charge to select to assign to a user via the booking)

I have ajax working with a jquery change call that when the select is selected it gives the room_id to what ever room.id was selected on the front end and saves the record in the view. But if I reload this page, the ------ always shows up. I know I have to figure out how to set the selected for the option if the room_id from the hou is not null, just not sure how to go about that in this instance.

Upvotes: 0

Views: 39

Answers (1)

Yellowduck
Yellowduck

Reputation: 492

Assuming room is a foreign key to bookings:

<td> <select id="room_number" name={{hou.pk}} class="select form-control">
        <option value=-1 id=-1> ------ </option>
        {% for room in room_list %}
          {% if hou.room.id == room.id %}
          <option value={{room.id}} id={{hou.pk}} selected>{{ room.room_name }}</option>  
          {% else %}
          <option value={{room.id}} id={{hou.pk}}>{{ room.room_name }}</option>  
          {% endif %}            
        {% endfor %}
        </select>
        </td>

Upvotes: 1

Related Questions