Tengo un cuadro de selección y un campo de entrada.

<label for="contact">Contact</label>
<select id="contact" name="contact">
    <option data-phone="+14151234567" value="John Smith">John Smith</option>
    <option data-phone="+15151234567" value="Jessica Smith">Jessica Smith</option>
    <option data-phone="+16151234567" value="Jerome Smith">Jerome Smith</option>
</select>

<label for="phone">Phone</label>
<input type="text" name="phone"/>

Cuando el usuario selecciona una opción del cuadro de selección Contact, quiero que el atributo data-phone de la opción se complete con la entrada de texto Phone.

Para el usuario, eligen un nombre de una lista y el número de teléfono de la persona se rellena automáticamente en los campos de entrada a continuación.

¿Cómo hago esto?

1
Amin Shah Gilani 20 mar. 2017 a las 17:43

2 respuestas

La mejor respuesta

Existe un change () que asocia una función para que se ejecute cuando se produce un evento de cambio. Las etiquetas select funcionan con el método change(). igual que checkbox o radio

Por lo que debe "escuchar" cuando se cambia select y ver cuál de options está seleccionado (con option:selected). luego 'obtenga' el atributo data-phone de la opción 'seleccionada' y agréguelo como un 'valor' al campo de entrada.

Y eso es todo

También le sugiero que utilice una primera opción 'en blanco' para la etiqueta de selección. como he usado a continuación (<option disabled selected value>)

Déjame saber si funciona. salud

$("#contact").change(function(){
   var phoneNr = $(this).children("option:selected").attr("data-phone")
   $("input[name='phone']").attr("value",phoneNr)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="contact">Contact</label>
  <select id="contact" name="contact">
    <option disabled selected value> --- select an option --- </option>
    <option data-phone="+14151234567" value="John Smith">John Smith</option>
    <option data-phone="+15151234567" value="Jessica Smith">Jessica Smith</option>
    <option data-phone="+16151234567" value="Jerome Smith">Jerome Smith</option>
  </select>

  <label for="phone">Phone</label>
  <input type="text"  name="phone"/>
2
Mihai T 20 mar. 2017 a las 14:58

Puede usar jQuery change evento, jQuery .val() y Funciones .data():

var $contact = $('#contact');
$contact.on('change', fillPhone);

function fillPhone() {
    $('input[name="phone"]').val(
        $contact.find('option:selected').data('phone')
    );
}

fillPhone();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="contact">Contact</label>
<select id="contact" name="contact">
    <option data-phone="+14151234567" value="John Smith">John Smith</option>
    <option data-phone="+15151234567" value="Jessica Smith">Jessica Smith</option>
    <option data-phone="+16151234567" value="Jerome Smith">Jerome Smith</option>
</select>

<label for="phone">Phone</label>
<input type="text" name="phone"/>
0
sergdenisov 20 mar. 2017 a las 15:13