Textbox-Wert ändern, wenn ein Element in der Dropdown-Box ausgewählt ist

Question

Ich versuche, den Wert eines Textfelds mit dem Element zu ändern, das ich aus einer Dropdown-Box auswähle. Aber es funktioniert nicht.

Ich habe versucht, diese HTML:

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

und diese JS:

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

Aber das Textfeld val nicht aktualisiert.

Answer 1

Dies liegt daran, this (das Argument zu ChooseContact) bezieht sich auf das select Element selbst, und nicht seinen Wert. Sie müssen die value des friendName Element zum value des select Element setzen:

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

Hier ist ein working example.

Answer 2

Ich schlage vor, Sie sehr einfache Methode

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