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?
2 respuestas
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"/>
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"/>
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.