드롭다운 목록 상자(선택)_javascript 기술에 대한 Javascript 작업 예

이 글은 자바스크립트에 익숙하지 않은 분들도 참고할 수 있도록 자바스크립트와 셀렉트에 관련된 가장 기본적인 방법을 주로 다루었습니다. 일반적인 상황은 양식 구조를 제안하는 사람이 프로그램의 논리를 설계하고 데이터 구조를 작성해야 할 뿐만 아니라 양식의 스타일을 설계해야 하고 일부 회사에서는 능숙해야 한다는 것입니다. 포토샵에서: 처음에는 우리 모두 다재다능한 사람이 됩니다.

다음은 예시의 기초입니다. 이는 표준 형식이 아닙니다.

스크립트 홈< ;/ 옵션>
바이두

---------------------------------- --- ---------------

코드 복사코드는 다음과 같습니다.

//全选列表中的项
function SelectAllOption(list)
{
for (var i=0; i{
list.options[i].selected = true;
}
}

//反选列表中的项 by jb51.net asp学习网
function DeSelectOptions(list)
{
for (var i=0; i{
list.options[i].selected = !list.options[i].selected;
}
}

//返回列表中选择项数目
function GetSelectedOptionsCnt(list)
{
var cnt = 0;
var i = 0;
for (i=0; i{
if (list.options[i].selected)
{
cnt++;
}
}

return cnt;
}

//清空列表
function ClearList(list)
{
while (list.options.length > 0)
{
list.options[0] = null;
}
}

//删除列表选中项
//返回删除项的数量
function DelSelectedOptions(list)
{
var i = 0;
var deletedCnt = 0;
while (i < list.options.length)
{
if (list.options[i].selected)
{
list.options[i] = null;
deletedCnt++;
}
else
{
i++;
}
}

return deletedCnt;
}
//此函数查找相应的项是否存在
//repeatCheck是否进行重复性检查
//若为"v"，按值进行重复值检查
//若为"t"，按文字进行重复值检查
//若为"vt"，按值和文字进行重复值检查
//其它值，不进行重复性检查，返回false
function OptionExists(list, optText, optValue, repeatCheck)
{
var i = 0;
var find = false;

if (repeatCheck == "v")
{
//按值进行重复值检查
for (i=0; i{
if (list.options[i].value == optValue)
{
find = true;
break;
}
}
}
else if (repeatCheck == "t")
{
//按文字进行重复检查
for (i=0; i{
if (list.options[i].text == optText)
{
find = true;
break;
}
}
}
else if (repeatCheck == "vt")
{
//按值和文字进行重复检查
for (i=0; i{
if ((list.options[i].value == optValue) && (list.options[i].text == optText))
{
find = true;
break;
}
}
}

return find;
}

//向列表中追加一个项
//list 是要追加的列表
//optText 和 optValue 分别表示项的文字和值
//repeatCheck 是否进行重复性检查，参见 OptionExists
//添加成功返回 true，失败返回 false
function AppendOption(list, optText, optValue, repeatCheck)
{
if (!OptionExists(list, optText, optValue, repeatCheck))
{
list.options[list.options.length] = new Option(optText, optValue);
return true;
}
else
{
return false;
}
}

//插入项
//index 插入位置，当插入位置 >= 列表现有项数量时，其作用相当于不进行重复检查的追加项
//optText 和 optValue 分别表示项的文字和值
function InsertOption(list, index, optText, optValue)
{
var i = 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 항목을 대상으로 가져온 후 소스 목록에서 항목을 삭제할지 여부
//영향을 받은 항목 수를 반환
function ListToList(sList, dList, RepeatCheck, deleteSource)
{
//영향을 받은 줄 수
var line = 0;
var i = 0
while (i{
if ( sList.options[i].selected && AppendOption(dList, sList.options[i].text, sList.options[i].value, RepeatCheck))
{
//성공적으로 추가되었습니다
줄;
if (deleteSource)
{
//소스 목록에서 항목 삭제
sList.options[i] = null
}
else
{
i ;
}
}
else
{
i ;
반환 라인
}

//선택한 항목을 목록에서 위로 이동

function MoveSelectedOptionsUp(list)

{
var i = 0
var value = ""
var text; = " ";
for (i=0; i<(list.options.length-1); i )
{
if (!list.options[i].selected && list.options[ i 1 ].selected)
{
value = list.options[i].value;
text = list.options[i].text
list.options[i] = 새 옵션 (목록 .options[i 1].text, list.options[i 1].value);
list.options[i].selected = true;
list.options[i 1] = new Option( 텍스트, 값)
}
}
}


//선택한 항목을 목록에서 아래로 이동

function MoveSelectedOptionsDown(list)

{
var i = 0
var value = ""
var text; = " ";
for (i=list.options.length-1; i>0; i--)
{

//www.jb51.net
if (!list.options[i].selected && list.options[i-1].selected)

{

value = list.options[i ].value;
text = list.options[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(텍스트, 값)
}
}
}