JavaScript - ドロップダウンメニューの値が複数回表示されますか？

Question

私はグループの会議室を選択できる非常に簡単なツールを作成する途中です。私はいくつかの問題を抱えており、私はあなたにいくつかの提案と助けを受けることができると願っています。

私はドロップダウンメニューを用意しています。会議場所を選択することができ、テキストで表示されます。例えば：あなたは会議の場所としてニューヨークを選択し

：

HTML

<select onchange="changed('list_1')" id="list_1" class="travel" /> 
    <option selected disabled>Select Place</option> 
    <option value="New York">New York</option> 
    <option value="Pennsylvania"> Pennsylvania</option> 
    <option value="Boston">Boston</option> 
    <option value="Washigton DC">Washigton DC</option> 
</select> 

はJavaScript

function changed(listId) { 
    var list = document.getElementById(listId); 
    document.getElementById("val_"+listId).innerHTML = list.value; 
} 
document.getElementById("val_list_1").innerHTML = document.getElementById("list_1").value; 

以下は、私が探しています出力されます。ニューヨークで開催される会議に出席する前に、上司と必ず確認してください。

「ニューヨーク」を選択すると、会議室の場所として[値]を選択すると、値が正常に表示されます。残念なことに、document.getElementByIdは一度しか使用できないため、同じ値の "New York"を2番目の文で出力することはできません。

私に例を示したり、ドロップダウンから値を1回だけ選択する方法をいくつか考えてもらえますか？その値は複数の領域に表示されますか？

すべてのヘルプは非常にあなたが一度だけのdocument.getElementByIdを使用することができることについて間違っている最初のオフ、まあ

Answer 1

、ここにあなたの問題にシンプルなソリューションです：

は、テキストのためのシンプルなテンプレートを使用します

：

var textTemplate = 'You select {CITY} as the conference location. Please make sure you confirm with supervisor before you attend the conference in {CITY}.'; 
function changed(list_id){ 
    var cityName = document.getElementById(list_id).value; 
    document.getElementById('outputTest').innerHTML = textTemplate.split('{CITY}').join(cityName); 
} 

このあなたのようなHTMLコードがあるとします。あなたは、表示したいです

<select onchange="changed('list_1')" id="list_1" class="travel" /> 
<option selected disabled>Select Place</option> 
<option value="New York">New York</option> 
<option value="Pennsylvania"> Pennsylvania</option> 
<option value="Boston">Boston</option> 
<option value="Washigton DC">Washigton DC</option> 
</select> 
<p id="outputTest"></p> 

Answer 2

をいただければ幸いです、そこにはそのような制限はありませんし、私はあなたがそこにいたと思うだろう理由はわかりません。

つまり、値を取得して複数回使用する方法は、変数に変数を格納することです。

Answer 3

オープニングタグを自己閉鎖しないように修正してください。 onchange関数を変更して、thisを引数として、それ自体を参照してください。

<select onchange="changed(this)" id="list_1" class="travel"> 

パラメータとして任意 selectを含むように changed機能を書き換え

。 select要素の値をvalueプロパティで参照することができます。このプロパティは、何度でも再利用できます。必要に応じて変数に格納します。例：あなたは、要素の値を使用しての制限はありません

function changed(select) { 
 
    console.log('Visiting ' + select.value + '? Enjoy your trip to ' + select.value + '.'); 
 
}

<select onchange="changed(this)" id="list_1" class="travel" > 
 
    <option selected disabled>Select Place</option> 
 
    <option value="New York">New York</option> 
 
    <option value="Pennsylvania"> Pennsylvania</option> 
 
    <option value="Boston">Boston</option> 
 
    <option value="Washigton DC">Washigton DC</option> 
 
</select>