0

選択したオプション名をその上の div に表示するにはどうすればよいですか? ユーザーが青を選択した場合、上に青を表示します。

<div id='text"> selection goes here</div>
<select id="dropdownselect">
<option> Red </option>
<option> White </option>
<option> Blue </option>
</select>
4

4 に答える 4

3

以下を使用して、選択したオプションのテキストを取得します。

var select = document.getElementById("dropdownselect");
var selectedText = select.options[select.selectedIndex].text;

次に、divwith idtextに値を追加するには、次を使用します。

document.getElementById("text").innerHTML = selectedText;

オプションが変更されるたびに選択した値を反映させたい場合は、onchangeイベントをに添付する必要がありますselect。これを上記のコードと組み合わせると、次のようになります。

var select = document.getElementById("dropdownselect");
select.onchange = function () {
  var selectedText = this.options[this.selectedIndex].text;
  document.getElementById("text").innerHTML = selectedText;
};​

これが動作するDEMOです。

于 2012-09-01T02:28:41.543 に答える
1

onchange javascriptイベントを追加するだけです：

<div id="text"> selection goes here</div>
<select id="dropdownselect" onchange="document.getElementById('text').innerHTML = this.options[this.selectedIndex].text;">
    <option> Red </option>
    <option> White </option>
    <option> Blue </option>
</select>​​​​​​​​​​​​​​
于 2012-09-01T02:29:33.283 に答える
0 
var selectBox = document.getElementById("dropdownselect"),
    textDiv = document.getElementById("text");
textDiv.innerText = selectBox.options[selectBox.selectedIndex].text;

ただし、jQuery も使用することをお勧めします。

于 2012-09-01T02:30:29.550 に答える
0

はるかに簡単にするために、javascript フレームワークを使用する必要があります。私は個人的にjQueryを使用しています。その場合、値を取得するためのJavaScriptは次のとおりです。

$("#dropdownselect").val()

また、次の方法で自動的に変更できます。

<select id="dropdownselect" onChange="$('#text').text($(this).val());">

同様の機能は、MooTools や、私が以前に使用したことのない他のフレームワークでも利用できます。

jQuery は次の方法で利用できます。

<script src="jquery.js"><!-- assuming you have a jquery file at this location -->
于 2012-09-01T02:26:09.587 に答える