이 글은 자바스크립트에 익숙하지 않은 분들도 참고할 수 있도록 자바스크립트와 셀렉트에 관련된 가장 기본적인 방법들을 주로 다루었습니다. 일반적인 상황은 양식 구조를 제안하는 사람이 프로그램의 논리를 설계하고 데이터 구조를 작성해야 할 뿐만 아니라 양식의 스타일을 설계해야 하고 일부 회사에서는 능숙해야 할 수도 있다는 것입니다. 포토샵에서: 처음에는 우리 모두 다재다능한 사람이 됩니다.
다음은 우리 예제의 기초입니다. 이는 표준 형식이 아닙니다.
<양식 id="f">
<select size="1" 이름="s">
<옵션 값="VeVB.COm">Wulin.com</option>
<option value="baidu.com">바이두</option>
</select>
</form>
------------------------------------- -------------
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트">
<!--
var f = document.getElementById("f");
//선택 목록 항목 수를 가져옵니다.
document.write(fsoptions.length);
document.write(fslength);
//현재 선택된 항목의 첨자 (0부터 시작) (두 가지 방법이 있습니다)
//여러 항목을 선택한 경우 첫 번째 선택한 항목의 첨자를 반환합니다.
document.write(fsoptions.selectedIndex);
document.write(fsselectedIndex);
//항목이 선택되었는지 확인
document.write(fsoptions[0].selected);
//특정 항목의 값과 텍스트를 가져옵니다.
document.write(fsoptions[0].value);
document.write(fsoptions[1].text);
//항목 삭제
fsoptions[1] = null;
//항목 추가
fsoptions[fsoptions.length] = new Option("추가 텍스트", "추가 값");
//항목 변경
fsoptions[1] = new Option("변경된 텍스트", "변경된 값");
//항목의 텍스트와 값을 직접 설정할 수도 있습니다.
//-->
</script>
//목록의 모든 항목 선택
함수 SelectAllOption(목록)
{
for (var i=0; i<list.options.length; i++)
{
list.options[i].selected = true;
}
}
//VeVB.COm asp 학습 네트워크를 통해 목록에서 항목 선택을 취소합니다.
functionDeSelectOptions(목록)
{
for (var i=0; i<list.options.length; i++)
{
list.options[i].selected = !list.options[i].selected;
}
}
//목록에서 선택한 항목의 수를 반환합니다.
함수 GetSelectedOptionsCnt(목록)
{
var cnt = 0;
var 나는 = 0;
(i=0; i<list.options.length; i++)
{
if (list.options[i].selected)
{
cnt++;
}
}
반환 CNT;
}
//목록 지우기
함수 ClearList(목록)
{
동안(list.options.length > 0)
{
목록.옵션[0] = null;
}
}
//선택한 항목을 목록에서 삭제
//삭제된 항목 개수를 반환합니다.
함수 DelSelectedOptions(목록)
{
var 나는 = 0;
var 삭제Cnt = 0;
동안(i < list.options.length)
{
if (list.options[i].selected)
{
목록.옵션[i] = null;
삭제Cnt++;
}
또 다른
{
나++;
}
}
삭제된Cnt를 반환합니다.
}
//해당 항목이 존재하는지 확인하는 함수
//repeat반복성 검사 수행 여부 확인
//"v"인 경우 값별로 중복값 검사를 수행
//"t"인 경우 텍스트를 기준으로 중복값 검사를 수행
//"vt"인 경우 값과 텍스트로 중복값 검사를 수행
//다른 값, 반복성 검사 없음, false 반환
함수 OptionExists(list, optText, optValue, RepeatCheck)
{
var 나는 = 0;
var 찾기 = 거짓;
if (repeatCheck == "v")
{
//값별 중복값 확인
(i=0; i<list.options.length; i++)
{
if (list.options[i].value == optValue)
{
찾기 = 사실;
부서지다;
}
}
}
else if (repeatCheck == "t")
{
// 텍스트로 반복 확인
(i=0; i<list.options.length; i++)
{
if (list.options[i].text == optText)
{
찾기 = 사실;
부서지다;
}
}
}
그렇지 않으면 (repeatCheck == "vt")
{
//값과 텍스트로 중복 검사
(i=0; i<list.options.length; i++)
{
if ((list.options[i].value == optValue) && (list.options[i].text == optText))
{
찾기 = 사실;
부서지다;
}
}
}
반환 찾기;
}
//목록에 항목 추가
//list는 추가할 목록입니다.
//optText와 optValue는 각각 항목의 텍스트와 값을 나타냅니다.
//repeat반복성 검사를 수행할지 확인합니다. OptionExists를 참조하세요.
//성공적으로 추가되면 true를 반환하고, 실패하면 false를 반환합니다.
함수 AppendOption(list, optText, optValue, RepeatCheck)
{
if (!OptionExists(list, optText, optValue, RepeatCheck))
{
list.options[list.options.length] = new Option(optText, optValue);
사실을 반환;
}
또 다른
{
거짓을 반환;
}
}
//항목 삽입
//인덱스 삽입 위치, 삽입 위치 >= 목록의 기존 항목 수인 경우 해당 기능은 반복 확인 없이 항목을 추가하는 것과 같습니다.
//optText와 optValue는 각각 항목의 텍스트와 값을 나타냅니다.
함수 InsertOption(목록, 인덱스, optText, optValue)
{
var 나는 = 0;
for (i=list.options.length; i>index; i--)
{
list.options[i] = new Option(list.options[i-1].text, list.options[i-1].value);
}
list.options[index] = new Option(optText, optValue);
}
//한 목록의 항목을 다른 목록으로 내보내기
//repeat반복성 검사를 수행할지 확인합니다. OptionExists를 참조하세요.
//deleteSource 항목을 대상으로 가져온 후 소스 목록의 항목을 삭제할지 여부
//영향을 받은 항목 수를 반환합니다.
함수 ListToList(sList, dList, RepeatCheck, deleteSource)
{
//영향을 받은 행 수
var 라인 = 0;
var 나는 = 0;
동안(i<sList.options.length)
{
if (sList.options[i].selected && AppendOption(dList, sList.options[i].text, sList.options[i].value,peatCheck))
{
//성공적으로 추가됨
라인++;
if(삭제소스)
{
//소스 목록에서 항목 삭제
sList.options[i] = null;
}
또 다른
{
나++;
}
}
또 다른
{
나++;
}
}
리턴 라인;
}
//선택한 항목을 목록에서 위로 이동
함수 MoveSelectedOptionsUp(목록)
{
var 나는 = 0;
var 값 = "";
var 텍스트 = "";
for (i=0; i<(list.options.length-1); i++)
{
if (!list.options[i].selected && list.options[i+1].selected)
{
값 = 목록.옵션[i].값;
텍스트 = 목록.옵션[i].text;
list.options[i] = new Option(list.options[i+1].text, list.options[i+1].value);
list.options[i].selected = true;
list.options[i+1] = new Option(텍스트, 값);
}
}
}
//선택한 항목을 목록에서 아래로 이동합니다.
함수 MoveSelectedOptionsDown(목록)
{
var 나는 = 0;
var 값 = "";
var 텍스트 = "";
(i=list.options.length-1; i>0; i--)에 대해
{
//www.VeVB.COM
if (!list.options[i].selected && list.options[i-1].selected)
{
값 = 목록.옵션[i].값;
텍스트 = 목록.옵션[i].text;
list.options[i] = new Option(list.options[i-1].text, list.options[i-1].value);
list.options[i].selected = true;
list.options[i-1] = new Option(텍스트, 값);
}
}
}