Основное понимание:
var e = document.getElementById("selectId");
e. options= new Option("текст","значение");
//Создаем объект опции, то есть создаем один или несколько <option value="value">текст</option> в теге <select>
//options — это массив, в котором можно хранить несколько тегов, например <option value="value">text</option>
1: Свойства массива options[ ]:
атрибут длины --------- атрибут длины
Атрибут selectedIndex -------- Значение индекса текста в выбранном в данный момент поле. Это значение индекса автоматически выделяется в памяти (0,1,2,3...), соответствующей (первому текстовому значению). , второе текстовое значение, третье текстовое значение, четвертое текстовое значение...)
2: Атрибуты одной опции (---obj.options[obj.selecedIndex] — это указанный тег <option>, который представляет собой ---)
текстовый атрибут --------- возврат/указание текста
Атрибут value ------ Возвращает/указывает значение, соответствующее <options value="...">.
атрибут индекса ------- возвращает нижний индекс,
selected атрибут ------- Возвращает/указывает, выбран ли объект. Указав true или false, выбранный элемент можно динамически изменить.
Атрибут defaultSelected ----- Возвращает, выбран ли объект по умолчанию. правда/ложь.
3: метод опциона
Добавьте тег <option> -----obj.options.add(new("text","value"));<add>
Удаление тега <option> -----obj.options.remove(obj.selectedIndex)<delete>
Получить текст тега <option> -----obj.options[obj.selectedIndex].text<check>
Измените значение тега <option> -----obj.options[obj.selectedIndex]=new Option("new text","new value")<change>
Удалить все теги <option> -----obj.options.length = 0
Получить значение тега <option> -----obj.options[obj.selectedIndex].value
Уведомление:
a: Вышеупомянутый метод написан как метод obj.options.function() вместо obj.funciton, потому что для учета совместимости, например, с IE и FF, obj.add() действителен только в IE. .
б: Опцию в obj.option не нужно писать с заглавной буквы, а опцию в новой опции нужно писать с заглавной буквы.
Два приложения
Скопируйте код кода следующим образом:
<html>
<голова>
<script Language="JavaScript">
номер функции(){
var obj = document.getElementById("mySelect");
//obj.options[obj.selectedIndex] = new Option("My Eat","4");//Изменение значения текущего выбранного
//obj.options.add(new Option("Моя еда","4"));Добавить еще один вариант
//alert(obj.selectedIndex);//показать серийный номер, опция задается сама собой
//obj.options[obj.selectedIndex].text = "Изменить значение моей еды";
//obj.remove(obj.selectedIndex); функция удаления
}
</скрипт>
</голова>
<тело>
<select id="mySelect">
<option>Моя сумка</option>
<option>Мой блокнот</option>
<option>Мое масло</option>
<option>Мое бремя</option>
</выбрать>
<input type="button" name="button" value="Просмотреть результаты" onclick="number();">
</тело>
</html>
Основываясь на этом, я реализовал небольшую функцию, используя JQEURY AJAX+JSON, следующим образом:
JS-код: (берётся только код, относящийся к SELECT)
Скопируйте код кода следующим образом:
/**
* @description Раскрывающийся список связей компонентов (реализован с использованием AJAX и JSON JQUERY)
* @prarm selectId ID раскрывающегося списка
* @prarm метод Имя вызываемого метода
* @prarm temp Здесь хранится идентификатор программного обеспечения.
* @prarm url Адрес для перехода
*/
функция linkAgeJson (selectId, метод, temp, URL) {
$j.ajax({
type: "get", //Используйте метод get для доступа к фону
dataType: "json", // Возвращаем данные в формате json
url: URL, // Адрес бэкэнда, к которому осуществляется доступ
данные: "method=" + метод+"&temp="+temp,//Данные для отправки
успех: function(msg){//msg — это возвращаемые данные, здесь выполняется привязка данных
данные вар = msg.lists;
CoverJsonToHtml (selectId, данные);
}
});
}
/**
* @description Преобразование данных JSON в формат данных HTML.
* @prarm selectId ID раскрывающегося списка
* @prarm nodeArray вернул массив JSON
*
*/
функция CoverJsonToHtml(selectId,nodeArray){
// получаем выбор
var tempSelect=$j("#"+selectId);
//очистить выбранное значение
isClearSelect (selectId, '0');
вар tempOption = ноль;
for(var i=0;i<nodeArray.length;i++){
//создаем выбранный вариант
tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');
//помещаем опцию для выбора
tempSelect.append(tempOption);
}
// Получаем список деградировавших компонентов
getCpgjThgl(selectId,'thgjDm');
}
/**
* @description Очистить значение раскрывающегося списка.
* @prarm selectId ID раскрывающегося списка
* @prarm index Позиция индекса, с которой начинается очистка.
*/
функция isClearSelect(selectId,index){
var length=document.getElementById(selectId).options.length;
в то время как (длина! = индекс) {
//Длина меняется, так как ее необходимо получить заново
length=document.getElementById(selectId).options.length;
for(var i=index;i<length;i++)
document.getElementById(selectId).options.remove(i);
длина = длина/2;
}
}
/**
* @description Получить список устаревших компонентов
* @prarm selectId1 относится к идентификатору раскрывающегося списка программного обеспечения.
* @prarm selectId2 ID раскрывающегося списка вырожденного компонента
*/
функция getCpgjThgl(selectId1,selectId2){
var obj1=document.getElementById(selectId1);//Выпадающий список справочного программного обеспечения
var obj2=document.getElementById(selectId2);//Раскрывающийся список вырожденных компонентов
вар len=obj1.options.length;
//Когда длина списка программного обеспечения, на который ссылаются, равна 1, он возвращается и никакие операции не выполняются.
если(лен==1){
вернуть ложь;
}
//Очистим значение выпадающего списка, доступны оба метода
// isClearSelect(selectId2,'1');
document.getElementById(selectId2).length=1;
for(var i=0;i<len; i++){
var option = obj1.options[i];
//Выбранные элементы, на которые ссылается программа, не добавляются
если (я!=obj1.selectedIndex){
//Клонируем OPTION и добавляем в SELECT
obj2.appendChild(option.cloneNode(true));
}
}
}
HTML-код:
Скопируйте код кода следующим образом:
<TABLE border=0 align="left" cellPadding=0 cellSpacing=1>
<тр>
<td> <span>*</span>Программное обеспечение для цитирования:</td>
<тд>
<input name="yyrjMc" id="yyrjMc" type="text" tabindex="3" size="30" >
<input name="yyrjDm" id="yyrjDm" type="hidden" >
<тип ввода="кнопка"
onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="Select...">
</td>
</tr>
<тр>
<td> <span>*</span>Версия цитаты:</td>
<td id="yyfb">
<select name="yyfbDm" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">
</выбрать>
</td>
</tr>
<тр>
<td>Вырожденные компоненты:</td>
<td id="thgj">
<select name="thgjDm" id="thgjDm">
<option value="-1" выбрано>Нет</option>
</выбрать>
</td>
</tr>
</ТАБЛИЦА>