писать метки для тегов <option>на основе selectedIndex, используя JavaScript - PullRequest
Новая
       31

писать метки для тегов <option>на основе selectedIndex, используя JavaScript

0 голосов
/ 03 сентября 2011

Этот следующий вопрос работает в связи с вопросом, который я разместил на загрузке текста в текстовую область на основе выпадающего списка Это было решено, и у меня есть шаблоны для отправки в текстовые поля на основе выпадающего списка с использованием: 

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>

Еще раз спасибо Усману, Сатишу и КорХосику за их ответы!

Следующий шаг: с моим выпадающим списком я теперь хочупо сути, «размещать» все метки выпадающего списка в одном и том же скрипте.Причина в том, что скрипт использует selectedIndex, и иногда шаблоны будут перемещаться.Это достаточно просто, но когда я изменяю порядок шаблонов, мне также нужно изменить названия параметров в моем раскрывающемся списке.Это означает редактирование и моего сценария, и моей разметки, и я бы предпочел объединить работу в одну область.

Итак, используя ту же структуру, что и мой предыдущий сценарий, вот что я придумал: 

<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];

но это все еще не работает, просто делюсь обновлениями.

1 Ответ

1 голос
/ 04 сентября 2011

Атрибут 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>

check этот пример

...