js載入下拉列表_JS調用後台數據查詢讓查詢到的數據在下拉列表裡顯示

⑴ js打開select的下拉選項

如果不需要抄下拉框，那麼可以不用<select，網上那些點擊後下面彈出自定義選項的，都不是用的<select，而是通過CSS畫出的類似<select樣子的標記，比如<div、<span等最簡單的方法，在那個地方放個下拉框樣子圖片，然後點圖的時候彈出你下面那個樹 BTW：<select的下拉是沒辦法通過JS來關閉的，那個是瀏覽器本身的行為

⑵ 在jsp中用js生成一個下拉列表,然後下拉列表中的值從後台中取,該怎麼寫

c:forEach items = "{}datas}" var = "data">在標簽的裡面就可以遍歷，。items就相當於集合，然後var就相當於集合裡面的單回個元素，<span>{data}</span>.
這裡面用的答是jstl表達式

⑶ JS動態添加下拉框跟文本域

// 動態添加DOM元素，需要對DOM進行操作，不太清楚你對JQ了解如何，JQ會比較簡單些；

//html代碼

<html>
<body>
<buttononclick="addRow()">添加</button>&nbsp;
<buttononclick="deleteRow()">刪除</button>
<divid="domOperate">
<!--dom操作放在該DIV中進行-->
</div>
</body>
</html>

//js代碼，要先引入jquery.js

<scripttype="text/javascript"src=""></script>//這里引入jquery插件
<scripttype="text/javascrpt">
//設置DOM操作父級元素
var$target=$('#domOperate');
//設置需要添加元素的模版
var$addRow=$('<divclass="row"><select><optionvalue="1">下拉框</option></select><inputtype="text"name="inputDom"/></div>');
//添加方法
varaddRow=function(){
//對目標區域添加一行
$target.append($addRow);
}
//移除方法，此處移除最後一個添加的
vardeleteRow=function(){
if($target.find('.row').length>0){//判斷是否還有添加的元素
$target.find('.row:last-child').remove();//找到最後一個刪除
}else{
alert('已經沒有可以刪除的了');//此處也可以禁用按鈕
}
}
</script>

⑷ 求用JS或JQUERY 打開select的下拉列表

知道想要種效
Jquery寫
<style>
*{margin:0;padding:0;}
#select{margin:20px auto;width:200px;border:1px solid #ccc;}
#select h1{padding:1px 1px 1px 5px;height:20px;font:12px/20px '宋體';color:#666;cursor:pointer;font-weight:bold;}
#select h1 span{float:right;display:block;width:20px;height:20px;font:inherit;color:#fff;background:#ccc;text-align:center;font-weight:inherit;}
#select li{list-style:none;display:none;}
#select li a{display:block;padding:0 5px;height:20px;font:12px/20px '宋體';color:#666;text-decoration:none;}
#select li a:hover{background:#f5f5f5;color:#f60;}
</style>
<script type="text/javascript">
$(function(){
$('#select').hover(
function(){$('#select > li').show();$('#select > h1').css('border-bottom','1px solid #ccc');},
function(){$('#select > li').hide();$('#select > h1').css('border-bottom','none');})
})
</script>
<ul id="select">
<h1><span>∨</span>仿Select拉菜單</h1>
<li><a href="#">拉列表1</a></li>
<li><a href="#">拉列表2</a></li>
<li><a href="#">拉列表3</a></li>
<li><a href="#">拉列表4</a></li>
<li><a href="#">拉列表5</a></li>
<li><a href="#">拉列表6</a></li>
</ul>

⑸ JS鎴栬卝query鐨勪笂鎷夊姞杞藉拰涓嬫媺鍒鋒柊鏄鎬庝箞瀹炵幇鐨

1銆侀栧厛鏂板緩涓涓猦tml鏂囦歡錛屽懡鍚嶄負test.html錛屽湪test.html鏂囦歡鍐咃紝寮曞叆jquery.min.js搴撴枃浠錛屾垚鍔熷姞杞借ユ枃浠訛紝鎵嶈兘浣跨敤jquery涓鐨勬柟娉曘

⑹ 誰會用DIV+CSS+JS做下拉列表，就是滑鼠滑過就出現.......求一段簡單的代碼

第一種方法：
<html>
<head><title></title>
<style>
#rr{ width:500px; height:30px; list-style:none; padding:0;}
#rr li.dd{ float:left; margin-right:10px; margin-left:0; border:1px solid red; width:70px; text-align:center;}
#rr li.dd #tt{ list-style:none; padding:0; margin-left:0; display:none; margin-top:20px; width:70px;}
</style>
<script language="javascript">
function onMouseover()
{
var obj=document.getElementById("tt");
obj.style.display="block";
}
function onMouseout()
{
var obj=document.getElementById("tt");
obj.style.display="none";
}
</script>
</head>
<body>
<ul id="rr">
<li class="dd" id="gg" onmouseover="onMouseover()" onmouseout="onMouseout()"><a href="#">產品</a>
<ul id="tt">
<li><a href="#">避孕套</a></li>
<li><a href="#">偉哥</a></li>
<li><a href="#">充氣娃娃</a></li>
</ul>
</li>
<li class="dd"><a href="#">首頁</a></li>
<li class="dd"><a href="#">首頁</a></li>
<li class="dd"><a href="#">首頁</a></li>

</ul>
</body>
</html>
第二種方法：利用Jquery
<script src="jquery文件"></script>
<script language="javascript">
$(document).ready(function(){
$('#gg').hover(function(){
$('#tt').css('display','block');},function(){
$('#tt').css('display','none');
});
});
</script>

⑺ JS下拉列表框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉框添加內容</title>
<script src='js/jquery-1.7.2.min.js'></script>
</head>
<body>
<select id='sel'>
<option>可以添加</option>
</select>
<input type='text' class='inp' value='' />
<button>點我</button>

<script>
$("button").click(function(){
var inputvalue = $('.inp').val();
if(inputvalue == ''){alert('請先填寫好內容在點擊我哦！');return false;}
var htmlstr = "<option>"+inputvalue+"</option>";
$("#sel").append(htmlstr);

});
</script>
</body>
</html>

⑻ JS調用後台數據查詢，讓查詢到的數據在下拉列表裡顯示

/**
*@authorzhou2003737
*@date2014/09/2516:39
*/
<htmldoctype="html">
<head>
<title></title>
<scripttype="text/javascript">
window.onload=function(){
//獲取文本框對象
varsearchText=document.getElementById("searchText");
//獲取提交button對象
varaction=document.getElementById("action");
//獲取要增加到的下拉列表對象
varselections=document.getElementById("selections");
//點擊提交的時候執行的方法
action.onclick=function(){
//如果文本框對象中值不為空
if(searchText.value){
//根據文本框中的值循環5次
for(vari=5;i>0;i--){
//設置下拉列表中的值的屬性
varoption=document.createElement("option");
option.value=searchText.value+i;
option.text=searchText.value+i;
//將option增加到下拉列表中。
selections.options.add(option);
}
}
}
}
//思路如上。你可以將點擊時將文本框中值傳到後台，後台返回數據後，在將數據存入下拉列表對象中。
</script>
</head>
<body>
<p><inputtype="text"placeholder="請輸入查詢對象"autofocusid="searchText"/></p>
<p><inputtype="button"id="action"value="提交"/></p>
<p><selectid="selections">

</select></p>
</body>
</html>

導航:首頁 > 編程語言 > js載入下拉列表

js載入下拉列表

與js載入下拉列表相關的資料

友情鏈接