web-dev-qa-db-ja.com

ドロップダウンボックスでアイテムが選択されたときにテキストボックスの値を変更する

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

私はこのHTMLを試しました：

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

そしてこのJS：

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

ただし、テキストボックスの値は更新されません。

javascripthtmlselect
11
Sana Joseph

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

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

これが 動作例 です。

20
James Allardice

とても簡単な方法をお勧めします

$('#quantity').change(function(){
  var qty = $('#quantity').val();
  $("#totalprice").val(qty);
});
<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="1"/>

    
</div>
3
Shiv Singh