ドロップダウンリストの選択値をテキストフィールド（JavaScript）に表示

Question

例： これらはドロップダウンリストの項目です。

<select name="cmbitems" id="cmbitems"> 
    <option value="price1">blue</option> 
    <option value="price2">green</option> 
    <option value="price3">red</option> 
</select> 

ユーザーが、私は下のテキストフィールドにprice1の値を表示したい、青色の選択：あなたはjqueryを使用している場合

<input type="text" name="txtprice" id="txtprice" onClick="checkPrice()"> 

が

Answer 1

入力の値をselect.onchangeイベントハンドラの値に設定するだけで済みます。

var select = document.getElementById('cmbitems'); 
var input = document.getElementById('txtprice'); 
select.onchange = function() { 
    input.value = select.value; 
} 

Hereあなたがどんな答えはあなたの問題を解決することを感じる場合は、正しい答えとしてそれにタグを付けてくださいjsFiddleデモ

Answer 2

に答えてくれてありがとうだけで行きます

$('select.foo option:selected').val(); // get the value from a dropdown select 

UPDATE（私はをinlcudeを忘れました人口）

最初に、あなたのhtmlファイルにinlcude jquery。その後

<header> 
<script type="text/javascript" src="YOUR_PATH_TO_LIBRARY/jquery-1.7.1-min.js"></script> 
</header> 

<input type="text" name="txtprice" id="txtprice" onClick="javascript:$('select.foo option:selected').val();"> 

Answer 3

これは、現在選択されているオプションを調べ、その値をチェックし、更新するために、その表示テキストを使用するための強引な方法です：<header>あなたはそれを含んで

あなたの入力。 Daniele氏が提案したように、あなたが自由にjqueryを持っていれば、これははるかに簡単になります。しかし何らかの理由でJSフレームワークを使用できない場合は、必要なものを得ることができます。

<select name="cmbitems" id="cmbitems" onchange="updateTextField()"> 
... 
</select> 
<input type="text" ..... /> 

<script type="text/javascript"> 
function updateTextField() 
{ 
    var select = document.getElementById("cmbitems"); 
    var option = select.options[select.selectedIndex]; 
    if (option.id == "price1") 
    { 
     document.getElementById("txtprice").value = option.text; 
    } 
} 
</script> 

Answer 4

$.on('change', '#cmbitems', function() { 
    $('#txtprice').val($('#cmbitems option:selected').val()); 
});