ドロップダウンボックスで項目が選択されているときにテキストボックスの値を変更します。

Question

ドロップダウンボックスから選択した項目でテキストボックスの値を変更しようとしています。しかし、それは動作していません。

私は、このHTML試してみました：

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

を、これはJS：

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

しかし、ヴァルが更新されていないテキストボックスを。

Answer 1

これは、this（引数はChooseContactへの引数）がselect要素そのものであり、その値ではないためです。あなたはselect要素のvalueにfriendName要素のvalueを設定する必要があります。

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

はここworking exampleです。

Answer 2

私はどのようにuはChooseContactに値を渡している？あなたは非常に簡単な方法

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