从input中添加select option

最新推荐文章于 2023-02-24 08:44:32 发布

yehell

最新推荐文章于 2023-02-24 08:44:32 发布

阅读量5.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： input button function table border class

本文链接：https://blog.youkuaiyun.com/yehell/article/details/1914249

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个用于设定配达时间的网页界面实现方法，包括最小配达日输入验证及时间选项的动态生成等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码:

<html>

<head>

<title>配達希望時間設定</title>

<style>

.btn {

BORDER-RIGHT: #7b9ebd 1px solid;
     PADDING-RIGHT: 2px;
     BORDER-TOP: #7b9ebd 1px solid;
     PADDING-LEFT: 2px;
     FONT-SIZE: 12px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);
     BORDER-LEFT: #7b9ebd 1px solid;
     CURSOR: hand;
     COLOR: black;
     PADDING-TOP: 2px;
     BORDER-BOTTOM: #7b9ebd 1px solid

}

</style>

*optionリストを形成します

function displayOptionList() {

var listTableObj = document.getElementById("listSel");

var listTableInnerHtml="";

for (var i=0;i<ary.length;i++){

var oneTalbeInnerHtml = oneRecord;

oneTalbeInnerHtml = oneTalbeInnerHtml.replace("@@@option_text@@@",ary[i].text);

oneTalbeInnerHtml = oneTalbeInnerHtml.replace("@@@option_value@@@",ary[i].value);

listTableInnerHtml += oneTalbeInnerHtml;

}

listTableInnerHtml = blankSelect.replace("@@@sel_options@@@",listTableInnerHtml );

listTableObj.innerHTML=listTableInnerHtml;

}

/*oS(String)：源input的id

*oT(String)：目標select的id

function moveSelect(oS,oT){

oS=document.getElementById(oS);

oT=document.getElementById(oT);

if(oS.value==""){

alert("指定の時間を書き込んで下さい.");

}else{

var i =oT.options.length;

oS.value=oS.value.replace(/(^s+)|(s+$)/g,'');

var opt=new Option(oS.value,oS.value,false,false)

oT.options[oT.options.length] = opt

i++;

oS.value="";

}

/*o(String):制御されたselectのid

*p(Long):移動する目標の位置

function moveTo(o,p){

o=document.getElementById(o);

start=o.selectedIndex;

var isUp=1;

if (p<start)

isUp=-1;

if (p<0)

p=0;

if (p>=o.options.length)

p=o.options.length-1;

if (start==-1)

return false;

if (p==start)

return false;

for (var i=start;i*isUp<p*isUp ;i=i+isUp )

o.options[i].swapNode(o.options[i+isUp]);

}

/*o(String):制御されたselectのid

*id(Long):optinの索引

function delOption(o,id){

o=document.getElementById(o);

//alert(o+"/"+id);

if(id >= 0){

o.options.remove(id);

lastOptionOnFocus(o,o.options.length-1);

}else{

return;

}

*使用options集合中最皇后一取焦点

function lastOptionOnFocus(o,index){

o.selectedIndex = index;

}

function doTimeCheck(){

var tempValue=document.viewForm.MIN_TIME.value;

if(tempValue==""){

alert("最小配達日を入力して下さい.");

document.viewForm.MIN_TIME.focus();

}else{

if(/^-?d+(.d+)?$/.test(tempValue)){

tempValue=parseInt(tempValue);

if (confirm("入力この最小配達日を確認しますか？")){

document.viewForm.MIN_TIME.value=document.viewForm.MIN_TIME.value.replace(/(^s+)|(s+$)/g,'');

//document.viewForm.action="S010501.htm";

//document.viewForm.submit();

}else{

document.viewForm.MIN_TIME.focus();

return;

}

}else{

alert('正しい最小配達日を入力して下さい.');

document.viewForm.MIN_TIME.value="";

document.viewForm.MIN_TIME.focus();

return;

}

</script>

</head>

<td>

<td>配達希望時間設定</td>

</tr>

</tbody></table>

</td>

</tr>

<tr>

<td>

<td style="border: 1px solid rgb(1, 90, 180); color: rgb(1, 90, 180); font-size: 10pt; font-weight: bold;" align="center" width="150">最小配達日指定</td>

<td colspan="4" style="font-size: 10pt;"><input id="MIN_TIME" name="MIN_TIME" size="25" onkeydown="if(event.keyCode==13)event.keyCode=9" type="text">  日後より可能</td>

</tr>