0

この次の質問は、ドロップダウン選択に基づいてテキストをテキストエリアにロードする際に投稿した質問と連携して機能します。これは解決されており、次を使用してドロップダウン選択に基づいてテキストボックスに投稿するテンプレートがあります。

var showLeftTemplates = function(sel) {   
var locations = [ "template  1",
                  "template  2",
                  "template  3",
                  "template  4",
                  "template  5",
                ];

 var srcLocation = locations[sel.selectedIndex];         

 if (srcLocation != undefined && srcLocation != "") {      
 document.getElementById('LeftTemplates').value = srcLocation;   
 } 
}

と

 <select class="c10" onchange="showLeftTemplates(this)">
 <option selected="selected">Please select a template...</option>
 <option label="option 2"></option>
 <option label="option 3"></option>
 <option label="option 4"></option>
 <option label="option 5"></option>
 <option label="option 6"></option>
 </select>

 <textarea cols="37" rows="25" readonly="readonly" id="LeftTemplates">
 Templates will auto-populate 
 here depending on the 
 selection made from the 
 drop-down list.
 </textarea>

Usman、Satish、KorHosik の回答に感謝します。

次のステップ: ドロップ ダウン リストを使用して、基本的にすべてのドロップ ダウン リスト ラベルを同じスクリプトで「ホスト」したいと考えています。その理由は、スクリプトが を使用しておりselectedIndex、テンプレートが移動する場合があるためです。これは簡単ですが、テンプレートの順序を並べ替えると、ドロップダウン リストのオプションのタイトルも並べ替える必要があります。これは、スクリプトとマークアップの両方を編集することを意味し、作業を 1 つの領域に統合したいと考えています。

以前のスクリプトと同じ構造を使用して、次のように思いつきました。

<form name="left" action="">
<select id="LeftTemplates" onchange="showLeftTemplates(this)">
<option selected="selected" label="Please select a template..."></option>
<option label="LeftValues(this)"></option>
<option label="LeftValues(this)"></option>
<option label="LeftValues(this)"></option>
<option label="LeftValues(this)"></option>
<option label="LeftValues(this)"></option>
<option label="LeftValues(this)"></option>
</select>

ここにスクリプトがあります

<script type="text/javascript">
var LeftValues = function(sel) {
var labels = [  "Please select a template...",
            "test1",
            "test2",
            "test3",
            "test4",
            "test5",
            "test6",
         ];

            var srcValues = location[sel.selectedIndex];         

    if (srcValues != undefined && srcValues != "") {      
    document.getElementById('LeftTemplates').innerHTML= srcValues;  
  }  
}
</script>

ほとんどの人は、テストせずにこれを見て、動作しないこと、閉じることさえできないことを知っていると確信しています。テンプレートの順序を変更すると、ドロップダウンリストのタイトルの順序を簡単に変更できるように、ラベルをロードする方法について正直に困惑しているため、間違った名前を混同することはありません間違ったテンプレートが読み込まれます。

誰かがこれで私を助けることができれば、私はそれを大いに感謝します.私が見落とした単純な間違いであれば、スクリプト全体を間違った方法で行っているかどうかはわかりません<select id="LeftTemplates" onload="LeftValues(this)" onchange="showLeftTemplates(this)">.もっと情報を提供できたらいいのにと思いますが、テストしてもエラーは発生しません。

前もって感謝します！

私はこの行が問題だと思い始めています:

var srcValues = location[sel.selectedIndex];

そして、私はこれをそれに取り込もうとしています

var srcValues = location[options.selectedIndex.value];

しかし、それはまだ機能していません。更新を共有しているだけです。

4

1 に答える 1

1

タグのlabel属性optionは単なるテキストラベルであるため、上記で実行しようとしているように見えるため、JavaScript関数が呼び出されることはありません。あなたが本当にやりたいのは、javascriptを使用して選択全体を構築することです。これにより、テンプレートの順序を変更すると自動的に更新されます。私はあなたを助けるかもしれない何かを以下に書いてみます。

HTML：

<form id="leftTemplates" name="left" action="">
    <select id="templateSelect" onchange="showSelectedTemplate(this)">
    </select>
</form>

Javascript：

<script type="text/javascript">
window.onLoad = buildSelect();

function buildSelect() {
        var labels = ["Please select a template...",
            "test1",
            "test2",
            "test3",
            "test4",
            "test5",
            "test6"
         ];

        for(var i=0; i<labels.length; i++) {
            var selectBox = document.getElementById('templateSelect');
            var newOption = document.createElement('option');
            newOption.label = labels[i];
            newOption.innerHTML = labels[i];
            newOption.value = labels[i];
            if(i==0) { newOption.setAttribute('selected','selected'); }
            selectBox.appendChild(newOption);
        }
    }
showSelectedTemplate = function(elem) {
   var selectedTemplate = elem.options[elem.options.selectedIndex].value;
    alert(selectedTemplate);
}

</script>

この例を確認してください

于 2011-09-03T20:44:54.280 に答える