js可編輯的下拉框_如何用jsp做個樹形下拉框

Ⅰ 如何在select下拉框設置滾動條

定義邊框和滾動條樣式(通過用層來模擬實現)。

<script>
function showHide(obj){ //隱現層的函數
sh={block:"none",none:"block"}
//層的display屬性值在"block"和"none"間不斷輪換，
//達到輪換隱藏和顯示的效果
oOption.runtimeStyle.display=sh[oOption.currentStyle.display] }
</script>


<script event="onmouseover" for="oOption">
obj=event.srcElement
if(obj.tagName=="TD"){//判斷onmouseover事件是否發生在單元格上
//設置事件發生所在的單元格的背景顏色
obj.style.backgroundColor="#dedede"
//設置事件發生所在的單元格的字體顏色
obj.style.color="#FFFFFF"
}
</script>


<script event="onmouseout" for="oOption">
obj=event.srcElement
if(obj.tagName=="TD"){ //判斷onmouseout事件是否發生在單元格上
//設置事件發生所在的單元格的背景顏色
obj.style.backgroundColor="#FFFFFF"
obj.style.color="#000000"//設置事件發生所在的單元格的字體顏色
}
</script>


<script event="onclick" for="oOption">
obj=event.srcElement
if(obj.tagName=="TD"){ //判斷onmouseover事件是否發生在單元格上
showHide() //隱藏層
//設置id為oSelect的對象內的文本為被點擊的單元格內的文本
oSelect.innerText=obj.innerText
//設置id為C_Select的對象內的值為被點擊的
//單元格的自定義屬性value的值
C_Select.value=obj.value
//window.open(obj.value) //測試跳轉菜單功能
}

Ⅱ 如何用jsp做個樹形下拉框

用jsp做樹形下拉框可以用java自定義標簽實現。

參考代碼如下：

packagecom.moonNigh.tagSupport;

importjava.io.IOException;

importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.jsp.JspException;
importjavax.servlet.jsp.JspWriter;
importjavax.servlet.jsp.tagext.TagSupport;

/**
*
*
*樹形下拉選擇控制項
*
*/

{

=9878861374414215L;

//標簽name屬性
privateStringname;

//所需圖片的路徑
privateStringimgPath;

//所需javascript文件的路徑
privateStringscriptPaht;

//所需css文件的路徑
privateStringcssPath;

//項目的根路徑
privateStringrootPath;

//標簽的value屬性
privateStringvalue;
privateStringtext;
privateStringpath;

/*
*標簽的actionUrl屬性
*聯想查詢結果數據通過向actionUrl屬性指定的url請求得到
*/
privateStringactionUrl;

=null;


publicStringgetActionUrl(){
returnactionUrl;
}
publicvoidsetActionUrl(StringactionUrl){
this.actionUrl=actionUrl;
}
publicStringgetValue(){
returnvalue;
}
publicvoidsetValue(Stringvalue){
this.value=value;
}
publicStringgetImgPath(){
returnimgPath;
}
publicvoidsetImgPath(StringimgPath){
this.imgPath=imgPath;
}
publicStringgetScriptPaht(){
returnscriptPaht;
}

publicvoidsetScriptPaht(StringscriptPaht){
this.scriptPaht=scriptPaht;
}
publicStringgetCssPath(){
returncssPath;
}

publicvoidsetCssPath(StringcssPath){
this.cssPath=cssPath;
}


publicStringgetText(){
returntext;
}
publicvoidsetText(Stringtext){
this.text=text;
}
publicStringgetName(){
returnname;
}
publicvoidsetName(Stringname){
this.name=name;
}
publicSelectorTag()
{

}


/**
*初始化變數
*/
privatevoidinitAbttributes()
{
request=(HttpServletRequest)this.pageContext.getRequest();
rootPath=request.getContextPath();
this.imgPath="/images/";
this.scriptPaht="/js/";
this.cssPath="/css/";

}
@Override
publicintdoStartTag()throwsJspException{
initAbttributes();
path=rootPath+"/jsp/tags/treeSelectorPage.jsp?id="+id+"&actionUrl="+actionUrl;
JspWriterout=pageContext.getOut();
try{
StringtName=name;
//引入javascript文件
out.println("<scripttype='text/javascript'charset='GB2312'src='"+rootPath+scriptPaht+"selector.js'></script>");

//引入css文件
out.println("<linkrel='stylesheet'href='"+rootPath+cssPath+"selector.css'type='text/css'/>");

StringBuildertag=newStringBuilder("<inputtype='text'");
tag.append("id='").append(id).append("'");
tag.append("value='").append(text==null?"":text).append("'");
tag.append("onclick='returnshowSelector("");
tag.append(id).append("","").append(path).append("")'readonly>");
tag.append("<inputtype='hidden'name='")
.append(tName).append("'id='").append(id).append("_value")
.append("'value='").append(value==null?"":value).append("'>");
out.println(tag.toString());
}catch(IOExceptione){
e.printStackTrace();
}
returnSKIP_BODY;
}


}

運行結果：

Ⅲ 用JS怎麼實現點擊按鈕輸入文本框跟下拉框的值在頁面中

我寫了個例子，你試試：
<html>
<head>
<title>jsTest</title>
</head>
<body>
<select id="sel"><option>a</option><option>b</option></select>
<input type="text" id="txt">
<input type="button" value="show" onclick="show()">
</br>
<p id="p1">
下拉框和文本框內容將顯回示在這里：答
</br>

</p>
<script>
function show()
{
var node = document.createTextNode(sel.options[sel.selectedIndex].value +

"," + txt.value);
p1.removeChild(p1.lastChild);
p1.appendChild(node);
}
</script>
</body>
</html>

Ⅳ Extjs怎麼實現下拉框多選

1、擴展js類庫，在項目中建立一個 js文件，命名為:xxx.js 其代碼為

if('function'!==typeofRegExp.escape)
{
RegExp.escape=function(s)
{
if('string'!==typeofs)
{
returns;
}
returns.replace(/([.*+?^=!:${}()|[]/\])/g,'\$1');
};
}

Ext.ns('Ext.form');

Ext.form.MultiSelect=Ext.extend(Ext.form.ComboBox,
{
checkField:'checked',
multi:true,
separator:',',
initComponent:function()
{
if(!this.tpl)
{
this.tpl='<tplfor=".">'+'<divclass="x-combo-list-item">'
+'<imgsrc="'+Ext.BLANK_IMAGE_URL+'"'
+'class="ux-MultiSelect-iconux-MultiSelect-icon-'
+'{[values.'+this.checkField+'?"checked":"unchecked"'
+']}">'
+'{[values.'+this.displayField+']}'
+'</div>'
+'</tpl>';
}

Ext.form.MultiSelect.superclass.initComponent.apply(this,arguments);

this.on(
{
scope:this,
beforequery:this.onBeforeQuery,
blur:this.onRealBlur
});

this.onLoad=this.onLoad.createSequence(function()
{
if(this.el)
{
varv=this.el.dom.value;
this.el.dom.value='';
this.el.dom.value=v;
}
});
},
initEvents:function()
{
Ext.form.MultiSelect.superclass.initEvents.apply(this,arguments);
this.keyNav.tab=false;
},
beforeBlur:function()
{
},
postBlur:function()
{
},

clearValue:function()
{
this.value='';
this.setRawValue(this.value);
this.store.clearFilter();
this.store.each(function(r)
{
r.set(this.checkField,false);
},this);
if(this.hiddenField)
{
this.hiddenField.value='';
}
this.applyEmptyText();
},
getCheckedDisplay:function()
{
varre=newRegExp(this.separator,"g");
returnthis.getCheckedValue(this.displayField).replace(re,this.separator+'');
},
getCheckedValue:function(field)
{
field=field||this.valueField;
varc=[];
varsnapshot=this.store.snapshot||this.store.data;
snapshot.each(function(r)
{
if(r.get(this.checkField))
{
c.push(r.get(field));
}
},this);

returnc.join(this.separator);
},
onBeforeQuery:function(qe)
{
qe.query=qe.query.replace(newRegExp(RegExp.escape(this.getCheckedDisplay())+'['+this.separator+']*'),'');
},
onRealBlur:function()
{
this.list.hide();
varrv=this.getRawValue();
varrva=rv.split(newRegExp(RegExp.escape(this.separator)+'*'));
varva=[];
varsnapshot=this.store.snapshot||this.store.data;

Ext.each(rva,function(v)
{
snapshot.each(function(r)
{
if(v===r.get(this.displayField))
{
va.push(r.get(this.valueField));
}
},this);
},this);
this.setValue(va.join(this.separator));
this.store.clearFilter();
},
onSelect:function(record,index)
{
if(this.fireEvent('beforeselect',this,record,index)!==false)
{
record.set(this.checkField,!record.get(this.checkField));

if(this.store.isFiltered())
{
this.doQuery(this.allQuery);
}

if(this.multi)
{
if(record.get("key")=="---"&&record.get(this.checkField))
{
this.setValue("---");
}
else
{
this.setValue(this.getCheckedValue());
}
}
else
{
this.clearValue();
this.value=record.get(this.valueField);
this.setRawValue(record.get(this.displayField));
this.list.hide();
}

this.fireEvent('select',this,record,index);
}
},
setValue:function(v)
{
if(v)
{
v=''+v;
if(this.valueField)
{
this.store.clearFilter();
this.store.each(function(r)
{
varchecked=!(!v.match('(^|'+this.separator+')'
+RegExp.escape(r.get(this.valueField))
+'('+this.separator+'|$)'));
r.set(this.checkField,checked);
},this);
this.value=this.getCheckedValue();
this.setRawValue(this.getCheckedDisplay());
if(this.hiddenField)
{
this.hiddenField.value=this.value;
}
}
else
{
this.value=v;
this.setRawValue(v);
if(this.hiddenField)
{
this.hiddenField.value=v;
}
}
if(this.el)
{
this.el.removeClass(this.emptyClass);
}
}
else
{
this.clearValue();
}
},
selectAll:function()
{
this.store.each(function(record)
{
record.set(this.checkField,true);
},this);
this.doQuery(this.allQuery);
this.setValue(this.getCheckedValue());
},
deselectAll:function()
{
this.clearValue();
}
});
Ext.reg('multiSelect',Ext.form.MultiSelect);

2、在ext-all.css文件最後，加入css樣式

.ux-MultiSelect-icon{width:16px;height:16px;float:left;background-position:-1px-1px!important;background-repeat:no-repeat!important;}
.ux-MultiSelect-icon-checked{background:transparenturl(../images/default/menu/checked.gif);}
.ux-MultiSelect-icon-unchecked{background:transparenturl(../images/default/menu/unchecked.gif);}

3、使用

varDepartUserStore=newExt.data.Store(
{
proxy:newExt.data.HttpProxy(
{
url:'/Web/Manage/DeskTop/JSON/ScheleManager/GetSimpleDepartUserInfo.aspx'
}),
//讀取Json
reader:newExt.data.JsonReader(
{totalProperty:"totalCount",root:"root"},
[
{name:'UserId',type:'int'},
{name:'UserName',type:'string'}
])
});

varDepartUserCbox=newExt.form.MultiSelect(
{
fieldLabel:'姓名',
labelStyle:'width:80px',
width:150,
editable:false,
id:'DepartUserDS',
hiddenName:'DepartUserIdDS',
store:DepartUserStore,
emptyText:'--請選擇--',
allowBlank:false,
blankText:'請選擇',
mode:'remote',
displayField:'UserName',
valueField:'UserId',
triggerAction:'all',
selectOnFocus:true,
listWidth:200
});

DepartUserStore.on('load',function()
{
DepartUserCbox.selectAll();//全選
});

DepartUserStore.load();

Ⅳ 怎麼做百度搜索的下拉框

1、實現該功能需依賴jquery.js，jquery.autocomplete.js，先引入這兩個js包，以及jquery.autocomplete.css樣式文件，如圖所示。

Ⅵ 請問用js如何控制下拉框呢

<select id="Select1" disabled="disabled" runat="Server" onchange="checkct(this)">
<option id=frist name=frist selected="Selected">請選擇</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

在js中加入document.getElementById("frist").selected="Selected";

Ⅶ 如何利用VueJS創建動態的下拉框並綁定數據源

第一步，在抄HBuilder編輯工具新建HTML5空白頁襲面select.html，並引入VueJS核心js文件，如下圖所示：

第二步，在body標簽元素內插入div和select，注意給指定標簽元素id屬性值，如下圖所示：

第三步，在div下方編寫生成下拉框的數據源和綁定元素，下拉框有value和text，如下圖所示：

第四步，預覽該靜態頁面，發現下拉框什麼都沒有；打開瀏覽器控制台發現出現錯誤，如下圖所示：

第五步，修改option標簽數據綁定形式，利用v-bind，將js代碼中的sel改為data，如下圖所示：

6
第六步，再次預覽該靜態頁面，發現下拉框數據源正確綁定，可以選擇，如下圖所示：

導航:首頁 > 編程語言 > js可編輯的下拉框

js可編輯的下拉框

與js可編輯的下拉框相關的資料

友情鏈接