Cambiar el valor del cuadro de texto cuando se selecciona un elemento en el cuadro desplegable

Question

Estoy intentando cambiar el valor de un cuadro de texto con el elemento que selecciono de un cuadro desplegable. Pero no está funcionando.

yo probamos este HTML:

<select name="ncontacts" id="contacts" onchange="ChooseContact(this);"> 
</select> 

y esto JS:

function ChooseContact(data) 
{ 
    alert(data); 
    document.getElementById("friendName").value = data; 
} 

Pero el cuadro de texto val no se actualiza.

Answer 1

Esto es porque this (el argumento ChooseContact) se refiere al elemento select, y no a su valor. Es necesario configurar el value del elemento friendName a la value del elemento select:

document.getElementById("friendName").value = data.value; //data is the element 

Aquí hay una working example.

Answer 2

te sugieren método muy simple

$('#quantity').change(function(){ 
 
    var qty = $('#quantity').val(); 
 
    var price = $('#productPrice').val(); 
 
    var total = price * qty; 
 
    $("#totalprice").val(total); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pricesection"> 
 
     <input type="hidden" id="productPrice" value="340"/> 
 
    Quantity: 
 
    <select id="quantity"> 
 
     <option value="1" selected>1</option> 
 
     <option value="2">2</option> 
 
     <option value="3">3</option> 
 
     <option value="4">4</option> 
 
     <option value="5">5</option> 
 
     <option value="6">6</option> 
 
     <option value="7">7</option> 
 
     <option value="8">8</option> 
 
     <option value="9">9</option> 
 
     <option value="10">10</option> 
 
    </select> 
 
Total: $ 
 
<input type="text" id="totalprice" value="340"/> 
 

 
    
 
</div>

Answer 3

$('#quantity').change(function(){ 
 
    var qty = $('#quantity').val(); 
 
    var price = $('#productPrice').val(); 
 
    var total = price * qty; 
 
    $("#totalprice").val(total); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pricesection"> 
 
     <input type="hidden" id="productPrice" value="340"/> 
 
    Quantity: 
 
    <select id="quantity"> 
 
     <option value="1" selected>1</option> 
 
     <option value="2">2</option> 
 
     <option value="3">3</option> 
 
     <option value="4">4</option> 
 
     <option value="5">5</option> 
 
     <option value="6">6</option> 
 
     <option value="7">7</option> 
 
     <option value="8">8</option> 
 
     <option value="9">9</option> 
 
     <option value="10">10</option> 
 
    </select> 
 
Total: $ 
 
<input type="text" id="totalprice" value="340"/> 
 

 
    
 
</div>