¿Cómo relleno una entrada de texto basada en el atributo de datos de un cuadro de selección?

Question

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?

javascript jquery html

1

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

Answer 1

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

Answer 2

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

¿Cómo relleno una entrada de texto basada en el atributo de datos de un cuadro de selección?

2 respuestas

Nuevas preguntas

javascript