javascript - ドロップダウン メニューからの Document.write

Question

私はJavaScriptが初めてです。この要求は十分に単純に見えますが、うまく機能していないようです。

ドロップダウン メニューから選択し、HTML で値を返したい。私が今持っているように、それはテキストボックスに値を返しますが、テキストボックスを使用せずにそれを書きたい<p></p>.

http://jsfiddle.net/Ppk5k/

Answer 1

<p>ID（または他の方法）でを取得してから、を設定しinnerHTMLます。

Answer 2

You can not use document.write after the page has loaded, it will replace the page content. You need to use innerHTML or appendChild.

Answer 3

value=""次のようなオプション タグ内に属性を含めることを忘れないでください。

<script type="text/javascript">
    function favBrowser() {
        var mylist=document.getElementById('myList');
        document.getElementById('favorite').value=mylist.value;
    }
</script>
<form>
    Select your favorite browser:
    <select id="myList" onchange="favBrowser()">
        <option></option>
        <option value="Google Chrome">Google Chrome</option>
        <option value="Firefox">Firefox</option>  
        <option value="Internet Explorer">Internet Explorer</option>
        <option value="Safari">Safari</option>
        <option value="Opera">Opera</option>
    </select>
    <p>Your favorite browser is: <input type="text" id="favorite" size="20" value=""></p>
</form>

Answer 4

これを行う最も簡単な方法はid、HTML 要素に属性を与え、それを innerHTML または clear に変更し、テキスト ノードを作成して要素に追加することです。

内部 HTML:

var element = document.getElementById('someElement');
element.innerHTML = "someValue";

appendChild:

var element = document.getElementById('someElement');
var oldChild = element.firstChild;
element.removeChild(oldChild);

var newChild = document.createTextNode("someValue");
element.appendChild(newChild);

Answer 5

どうぞ：

function favBrowser()
{
var mylist=document.getElementById("myList");
document.getElementById("favorite").innerHTML = mylist.options[mylist.selectedIndex].text+".";

}

を使用して、選択したブラウザinnerHTMLに HTML を設定する必要があります。#favorite

作業例: http://jsfiddle.net/Ppk5k/6/

アップデート

値とテキストを取得するには:

function favBrowser() {
    var mylist = document.getElementById("myList");
    document.getElementById("favorite").innerHTML = mylist.options[mylist.selectedIndex].text;
    document.getElementById("favorite").innerHTML += " and the value of that option is " + mylist.options[mylist.selectedIndex].value + ".";
}

Google Chrome を選択した場合は、次のように出力されます。

あなたのお気に入りのブラウザは Google Chrome で、そのオプションの値は G です。

例: http://jsfiddle.net/Ppk5k/13/

Answer 6

innerHTML を使用します。デモ

HTML:

<form>
Select your favorite browser:
<select id="myList" onchange="favBrowser()">
  <option></option>
  <option>Google Chrome</option>
  <option>Firefox</option>  
  <option>Internet Explorer</option>
  <option>Safari</option>
  <option>Opera</option>
</select>
<p id="favorite">Your favorite browser is:
</p>

</form>

Javascript :

function favBrowser() {
    var mylist = document.getElementById("myList");
    document.getElementById("favorite").innerHTML= "Your favorite browser is: " +  mylist.options[mylist.selectedIndex].text;
}