How do I store various values in each "option" of a "select"?

Question

I have a option and two inputs to feed according to the result of select.

In the select the user is chosen and in both inputs the address and email of the selected user are entered.

I wonder if it is possible to have 2 values possible to feed the inputs.

My current code is this:

<script type="text/javascript">
    $(document).on('change', '.get-placa', function () {
        var value = $(this).val();
        $('.close').trigger('click');
        $('.nome').val(value);
        $('.email').val("<?php echo $row['email'];?>");
    });
    <div class="control-group col1">
        <label class="control-label"><?php echo get_phrase('patient');?></label>
        <div class="controls">
            <select class="form-control get-placa chzn-select" type="text"  name="patient_id">
                <option value="">select</option>
                <?php 
                    $patients = $this->db->get('patient')->result_array();
                    foreach($patients as $row):
                ?>
                <option value="<?php echo $row['address'];?>"><?php echo $row['name'];?></option>
                <?php
                   endforeach;
                ?>
            </select>
        </div>
    </div>
    <div class="control-group col1">
        <label class="control-label"><?php echo get_phrase('endereço');?></label>
        <div class="controls">
            <input  readonly="true" type="text" class="form-control nome" name="nome">
        </div>
    </div>
    <div class="control-group col1">
        <label class="control-label"><?php echo get_phrase('email');?></label>
        <div class="controls">
            <input  readonly="true" type="text" class="form-control email" name="email">
        </div>
    </div>
</script>

Answer 1

Storing arbitrary data in a tag

Using data-attributes we can put arbitrary data in almost any HTML tag. In our case, we can put various values in option in this way:

<option
   value="Rua Um"
   data-id="101"
   data-email="[email protected]"
   data-tiposanguineo="O+"
>José</option>
<!-- sempre usando data-nomedoatributo para cada ítem -->

The value is from select, but we want the data from option

You currently catch the value with .val. This value does not come from option, for the this refers to the select which has changed and consequently the .val comes from value updated by user selection. It turns out that we need to recover the data-attributes who stay there in the option and not directly on select.

Only when the selected option changes, it is not only the value that undergoes a change. The option corresponding wins the attribute :selected, then we can refer to it this way:

var option = $(this).find("option:selected");

Now that we’ve learned to locate the option selected, just recover the data-attributes that interest us. With jQuery 1.4.3 or higher, just use the .data():

var email = option.data('email'); // recuperamos o data-email
var id    = option.data('id');    // e o data-id ...
// ... e quantos outros .data() necessitarmos

And if we need the textual content of tag option?

Not your case, but in some situations, we also want the text within the tag option. Using the same logic as find above, we can get this with the text, avoiding a data-attribute redundant:

var option = $(this).find("option:selected");
var nome = option.text();

Demonstration:

Joining the previous steps, let’s have a brief demonstration.

Note that I have simplified the code to stick to the points that really matter. Understanding how it works makes it easy to adapt to your layout original.

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

<script type="text/javascript">
   $(document).on('change', '#meuselect', function () {
      var value  = $(this).val();
      var option = $(this).find("option:selected");

      var id    = option.data('id');
      var email = option.data('email');

      $('#endereco').val(value);
      $('#email'   ).val(email);
      $('#id'      ).val(id);
   });
</script>

<label class="control-label">Paciente</label><br>
<select type="text" id="meuselect">
   <option value="">select</option>
   <option value="Rua Um"   data-id="101" data-email="[email protected]">José</option>
   <option value="Rua Dois" data-id="122" data-email="[email protected]">Maria</option>
   <option value="Rua Três" data-id="134" data-email="[email protected]">Le Zuul</option>
</select><br>

<label>id</label><br>
<input id="id" readonly="true" type="text" name="id"><br>

<label>endereco</label><br>
<input id="endereco" readonly="true" type="text" name="endereco"><br>

<label>email</label><br>
<input id="email" readonly="true" type="text" name="email"><br>

Note:

You don’t need this to work, but ideally, field selectors are not ambiguous. For the above demo, we exchange the classes for Ids, thus staying:

$('#email').val(email);

And us inputs, add the corresponding ID:

<input id="email" ...