如何使用jQuery方法利用下拉框控制下拉框輸入框

2019-12-11 11:39:41

在jQuery API中，可以使用css()方法設定DOM元素樣式，比如設定字型屬性、元素顯示和隱藏、背景色填充、漸變屬性等。下面利用一個範例說明如何使用css方法控制下拉框或輸入框顯示和隱藏，操作如下：

第一步，在開啟的HBuilder編輯工具新建一個靜態頁面，引入jQuery核心檔案，如下圖所示：

第二步，在<body></body>標籤內，插入兩個select和一個input輸入框，分別設定ID屬性，如下圖所示：

第三步，在jQuery初始化函數內，新增第一個下拉框的change事件，獲取當前選中值，判斷下拉框和輸入框顯示和隱藏，如下圖所示：

第四步，儲存程式碼並開啟瀏覽器預覽效果，可以發現第二個下拉框和輸入框都顯示出來了，如下圖所示：

第五步，接著返回到HBuilder程式碼介面，將第二個下拉框新增一個style屬性，如下圖所示：

第六步，再次儲存程式碼並預覽介面顯示效果，切換下拉框，可以發現起到作用了，如下圖所示：