HTMLでJavascriptを使用して選択オプションを取得し、値に基づいて文字列を表示

申し訳ありませんこれまでに質問されている場合は、例とコードスニペットを見てきましたが作業。HTMLでJavascriptを使用して選択オプションを取得し、値に基づいて文字列を表示

私はHTMLでコースを取っていますが、割り当てにはスクリプトを使用してddlをチェックし、選択したオプションに基づいてテキスト行を表示する必要があります。問題は、私がオンラインで見つけたことは、教師が提供した例とは少し違っているように見えることです（違いがあれば、Dreamweaver 2015を使用しています）。

2時間後いくつかの異なるスレッドからコードを取り除きます。

更新：警告VS HTML要素に選択した値を出力し、ここで

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> Hot Buns </title> 
</head> 

<script type="text/javascript"> 
function showDetails() 
     { 
     var x= document.getElementById("slctOrder"); 
     var val= x.options[x.selectedIndex].text; 
<!-- DW only displays item(n) and len after the dot, I typed in "text" manually --> 
     document.forms["frmOrder"]["Details"].value = val; 
<!-- I'm just trying to have it display anything at this point, 
same as above, I typed "value" since DW doesn't seem to recognize this code 
(this is from the teacher's example) --> 
     } 

</script> 
<body> 
<p> <h2> Welcome to Hot Buns </h2> <br> <h3> Ham can we bee'f service? </h3></p> 
<p> <h2> Place an order </h2> </p> 
<form method="get" name="frmOder"> 
<select name="slctOrder" onChange="showDetails();"> 
<!-- I'm trying to call the function showDetails() 
but neither onChange here nor onClick in the option tag seem to accomplish that --> 
    <option hidden selected="selected" value="0"> please select one of today's specials </option> 
    <option value="1" onClick="showDetails();"> Last of the Mo-jicama </option> 
    <option value="2" onClick="showDetails();"> Cheesus Is Born Burger </option> 
    <option value="3" onClick="showDetails();"> Beets of Burden Burger </option> 
    <option value="4" onClick="showDetails();"> Paranormal Pepper Jack-tivity Burger </option> 
</select> 

<output name="Details"/> 
</form> 

</body> 
</html>

出典

2016-10-20 Blitzilla

何が問題なのですか？何が効いていないのですか？ – dstarh

マイナーな変更のカップルが、作業は一例です。

update 2：コードを自分のものと正確に一致させるように変更しましたが、動作させるためにいくつかのエラーを修正しました。

1） "frmOder"というフォーム名の入力ミスがありますが、コードでは "frmOrder"を使用しました。

document.forms["frmOder"]["Details"].value = val;

2）あなたは、IDによって要素が、id属性が存在しないを選択しようとしている。

<select name="slctOrder" onChange="showDetails();">

へ：

document.getElementById("slctOrder");

は変更しなければなりませんでした

<select id="slctOrder" onChange="showDetails();">

3）onclickの必要はありませんオプションタグ内のイベント

私が元の答えで '出力'要素を切り替えたのは、IEでサポートされているタグではないからです。 http://www.w3schools.com/tags/tag_output.asp

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title> Hot Buns </title> 
 
</head> 
 

 
<script type="text/javascript"> 
 
function showDetails() 
 
     { 
 
     var x= document.getElementById("slctOrder"); 
 
     var val= x.options[x.selectedIndex].text; 
 

 
     document.forms["frmOder"]["Details"].value = val; 
 
     } 
 

 
</script> 
 
<body> 
 
<p> <h2> Welcome to Hot Buns </h2> <br> <h3> Ham can we bee'f service? </h3></p> 
 
<p> <h2> Place an order </h2> </p> 
 
<form method="get" name="frmOder"> 
 
<select id="slctOrder" onChange="showDetails();"> 
 
<!-- I'm trying to call the function showDetails() 
 
but neither onChange here nor onClick in the option tag seem to accomplish that --> 
 
    <option hidden selected="selected" value="0"> please select one of today's specials </option> 
 
    <option value="1"> Last of the Mo-jicama </option> 
 
    <option value="2"> Cheesus Is Born Burger </option> 
 
    <option value="3"> Beets of Burden Burger </option> 
 
    <option value="4"> Paranormal Pepper Jack-tivity Burger </option> 
 
</select> 
 

 
<output name="Details"/> 
 
</form> 
 

 
</body> 
 
</html>

出典

2016-10-20 21:02:54

訂正していただきありがとうございます。しかし、VBasic相当のラベルにテキストを表示しようとしています。そのため、フォーム内でを使用しようとしました。私は必要な方法でスクリプトとやりとりすることができません（ドットの後に「価値」は現れません）。 – Blitzilla

html要素と警告プロンプトで選択した値を表示するコードを更新しました。テキストは選択メニューのすぐ下に表示されます。 –

正確に私が必要としたもの。このdiv（要素？）は、通常HTML（スタティックテキストボックス）としてHTMLで使用されていますか？この例では、教師はテキストを表示するためにこのタグを使用しましたが、スクリプトは "value"プロパティとやりとりできますが、何らかの理由で私のことはできません。教師の関数は次のとおりです：{x = document.forms ["myform"] ["textinput"]。 document.forms ["myform"] ["result"]。value = x; }。申し訳ありませんが面倒ですが、教師のように機能しなかった理由を知りたいのですが。 – Blitzilla

あなたは、イベントリスナーを追加して、マークアップ（ここで変化した部分）と、コードを簡略化することができます。

マークアップ（改訂版）あなたはまだ選択する名前を使用することができ

<form method="get" id="frmOder"> 
    <select id="slctOrder"> 
    <option hidden selected="selected" value="0"> please select one of today's specials </option> 
    <option value="1"> Last of the Mo-jicama </option> 
    <option value="2"> Cheesus Is Born Burger </option> 
    <option value="3"> Beets of Burden Burger </option> 
    <option value="4"> Paranormal Pepper Jack-tivity Burger </option> 
    </select> 
    <output id="Details" /> 
</form>

コード

function showDetails(event) { 
    console.log(event); 
    // var x = document.getElementById("slctOrder"); 
    var x = event.srcElement;// same as above but use the event 
    var val = x.options[x.selectedIndex].text; 

    // no need for above, just get the text value (assumes single select) 
    var t = event.srcElement.selectedOptions[0].text; 
    document.getElementById("Details").value = t; 
} 
// add event listener to select 
var el = document.getElementById("slctOrder"); 

el.addEventListener("change", showDetails, false);

注：

（それはそう[0]最初の1のために必要なコレクションを返します）

document.getElementsByName("slctOrder")[0];

再生するサンプル：https://jsfiddle.net/MarkSchultheiss/j28cpsg9/

出典

2016-10-20 21:35:46

welp ..これは私のためにはあまりに進んでいますが、私はそれを得ると思います。これは自然であり、より多くのオプションを開くようになります（他の要素にも同様のイベントを使用すると仮定します）。 JsFiddle、有用なものに私を紹介してくれてありがとう。 – Blitzilla

イベントは最新のウェブページにとって重要です。https://developer.mozilla.org/en-US/docs/Web/Events - 学習のための簡単なボタンと「クリック」イベントから始めましょう。ここの良いものの数。クリック：https://developer.mozilla.org/en-US/docs/Web/Events/click –

HTMLでJavascriptを使用して選択オプションを取得し、値に基づいて文字列を表示

答えて

関連する問題