1. 程式人生 > >select下拉框的資料方式

select下拉框的資料方式

每一天都是新的,知識的不斷更新,要求我們有不斷學習的能力。不止於眼前,專屬於心。

這幾天我所寫的select下拉框資料一般表現為三種方式:常規下拉框(資料拿過來直接用)、編輯頁面下拉框(進行資料的判斷,相等被選中)、兩表從屬關係的下拉框(資料要進行從屬判定,子類自動歸屬於父類下面)

①常規下拉框。

<select data-placeholder="請選擇服務" class="chosen-select form-control" name="id" id ="id" autocomplete="off">
	<option value="">請選擇</option>
	<c:forEach items="${dbList }" var="a">
		<option value="${a.id }" label="${a.name }"></option>
	</c:forEach></select>
這種的就是直接從後臺ModelAndView返回頁面的同時將資料傳遞過來。常用於新增頁面。無資料篩選,全部拿過來用。

②編輯頁面下拉框。

select data-placeholder="請選擇服務" class="chosen-select form-control" name="serverRegion" id ="serverRegion" autocomplete="off">
	<option value="">請選擇</option>
	<c:forEach items="${dbList }" var="a">
		<option value="${a.id }" label="${a.name }"
		<c:if test="${a.id eq server.serverRegion }">
			selected
		</c:if>
	></option>
	</c:forEach>
</select>
這種的就是要在後前臺來所編輯的資料的id,後臺然後在serverInfo表裡面查出來這條資料,再把這條資料的物件server傳遞到頁面,通過server的serverRegion和region表的id進行比對,如果相等的話,就顯示被選中。

③兩表從屬關係的下拉框。

<select onchange="getContent()" data-placeholder="請選擇分類" class="chosen-select form-control" name="serverInfoId" id ="serverInfoId"  autocomplete="off">
	<option value="">請選擇分類</option> 
	<c:forEach items="${region}" var="r">
		<optgroup label="${r.name }">
		<c:forEach items="${server}" var="s" >
			<c:if test="${r.id==s.serverRegion }">
			<option label="${s.storageIp}">${s.id}</option>
			/c:if>
	</c:forEach>
		</optgroup>
		</c:forEach>
</select>
這種則類似於第二種只是這種是將子類的父類顯示出來,但父類不能選中,只是明顯的知道子類從屬於那個父類。比如region是區域,serverRegion是伺服器的區域,顯示出來則是區域的名稱,下面是區域裡的伺服器名稱。

記錄是人類最偉大的能力。真切的預言家必將從大量的資料中分析比對出來的。

相關推薦

select資料回顯,option去重

select下拉框資料回顯: 方法1 document.getElementById("province").value="${province}";   document.getElementById("province").options[${province}].s

select資料方式

每一天都是新的,知識的不斷更新,要求我們有不斷學習的能力。不止於眼前,專屬於心。 這幾天我所寫的select下拉框資料一般表現為三種方式:常規下拉框(資料拿過來直接用)、編輯頁面下拉框(進行資料的判斷,相等被選中)、兩表從屬關係的下拉框(資料要進行從屬判定,子類自動歸屬於父

SpringMVC之ajax+select交互常用方式

ret val hash In new type dex chain ucc <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert

編寫select的幾種方式

<select> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> <option v

bootstrap-select模糊搜尋和動態繫結資料

前言 今天做專案的時候,需要對下拉框做一個模糊搜尋,就想到了bootstrap-select外掛, 在運用中遇到的問題進行總結下。 引入 引入bootstrap和bootstrap-select檔案 <link rel="stylesheet

Java將後臺陣列資料繫結到select

         -------------第一種------------- 介面程式碼 <select name='dId' id="dId" >     <c:for

省市區三級聯動select資料回顯 Demo js指令碼實現帶指令碼與案例,整理好了的下載既可用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

解決element ui select不回顯資料問題

<el-select v-model="commonForm.status" clearable placeholder="請選擇"> <el-option v-for="

select回顯的幾種方式

第一種: jsp程式碼: <selectid="csrqnf"name="csrqnf"id="selecte"class="shortselect"value="${nfResult}">                               

select的回顯資料的處理

                                                               一:目前在spring MVC 中使用的,---------------可以                                    

select資料回顯

估計這是最簡單的一種方法了 <script language="javascript"> setTimeout("$('select#menuLevel').val('${menuLevel}')", 100);</script>   <

純css實現select並排顯示

code 同時 eight spl one 背景色 不起作用 表單 lang <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

模擬select之多選(數據源采用模擬Ajax數據--原創)

bbb n) nowrap pac inner sel cte spl innerhtml 最近需要一個下拉多選,本來想偷懶的,所以在網上百度了一番,最終還是發現沒有一個符合自己要求的,所以我自己寫了一個插件。下面是GIF動態效果圖展示 相信大家已經看到效果了,接下來

4種方法獲取select標簽中的值

定位 tag name () 節點 通過 ext col path 選中下拉框中“上海” 代碼如下:<select id="province" class="select" name="province"> <option value="0">請選擇

Web前端:如何實現選擇select選中跳轉其他頁面

option chang 前端 實現 cati onchange 下拉框選中 b- class <select onchange="window.location=this.value;"><option value="a.html">用戶管理<

Javascript獲取select選中的的值

title nbsp span htm .text 下拉框 dex alert tle Javascript獲取select下拉框選中的的值 現在有一id=test的下拉框,怎麽拿到選中的那個值呢? 分別使用javascript原生的方法和jquery方法 <sel

JS獲取select選中的value或者其name

text single nbsp -s 舉例 sta c-s jquer hid 舉例: <select class="js-example-basic-single js-states" style="width: 300px" name="hid" id="hi

jquery select和 easy-ui combox 選定指定項區別

strong value data har eas mit arp 下拉框 表單 jquey select <select id="gender" name="sex11" >//不能加easy-ui標記 <option value="

ajax 遍歷select

bsp erro string rip sig not context () cati html :<select id="type" > </select> js代碼: <script type="text/javascript">

jquery操作select的多種方法(選中,取值,賦值等

console 多選框 bus move dso rul 調用 define @value http://wenku.baidu.com/link?url=9N4HzvSx12pi4naZfs-Cf7P6MPteTuOoINlfInCJJPr1Tx2QtW7iY_7J_g0