Cambia il valore della casella di testo quando un elemento è selezionato nella casella a discesa

Question

Sto provando a modificare il valore di una casella di testo con l'elemento che seleziono da una casella a discesa. Ma non sta funzionando.

Ho provato questo HTML:

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

e questo JS:

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

Ma la casella di testo val non viene aggiornato.

Answer 1

Questo perché this (l'argomento di ChooseContact) si riferisce all'elemento select stesso e non al suo valore. È necessario impostare la value dell'elemento friendName alla value dell'elemento select:

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

Ecco un working example.

Answer 2

vi consiglio metodo molto semplice

$('#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>