在下拉框中选择某个项目时更改文本框的值

Question

我试图使用从下拉框中选择的项目更改文本框的值。但它不起作用。

我想这HTML：

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

和这个JS：

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

但不更新文本框VAL。

Answer 1

这是因为this（参数为ChooseContact）是指select元素本身，而不是它的值。您需要将friendName元素的value设置为select元素的value：

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

这里有一个working example。

Answer 2

我建议你非常简单的方法

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