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

Question

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

Navigation

#1 by (9 votes)

2

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

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

I would like to know if it is possible to have 2 possible inputs 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>

php javascript html

asked by anonymous 26.01.2018 / 22:45

1 answer

How to add a foreign key to a table already created Download attribute, new line in text file

score 9 · Accepted Answer

Storing arbitrary data in a tag

Using data-attributes we can put arbitrary data in almost any HTML tag. In our case, we can by several values in option 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 of the select , but we want the data of option

You currently get value with .val . This value does not come from option , since this refers to select that has changed and consequently .val comes from value updated by user selection. It happens that we need to retrieve the data-attributes that are there in option and not directly in select .

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

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

Now that we've learned how to find the option selected, just recover the data-attributes that interest us. With jQuery 1.4.3 or greater, just use .data() :

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

What if we need the textual content of tag option ?

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

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

Demonstration:

Putting together the previous steps, let's take a brief demonstration.

Note that I simplified the code to stick to the points that really matter. Understanding functionality, it's easy to adapt to your original layout .

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scripttype="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 do not need this to work, but the ideal thing is that field selectors are not ambiguous. For the above demo, we changed the classes by IDs, thus:

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

And in inputs , we add the corresponding ID:

<input id="email" ...