JS實現(xiàn)點擊下拉菜單把選擇的內(nèi)容同步到input輸入框內(nèi)的實例

最近博主在邊學(xué)flask邊寫測試平臺，碰到一個比較常用的場景如下圖所示

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、雁山網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、購物商城網(wǎng)站建設(shè)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為雁山等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

這里有一個輸入框組，下拉菜單里面有3個選項，還有一個輸入框，代碼是用 bootstrap寫的，代碼也給大家貼出來

<div class="input-group-btn">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    項目名稱
    <span class="caret"></span>
   </button>
   <ul id="project" class="dropdown-menu">
    <li value="account"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >account</a></li>
    <li class="divider"></li>
    <li value="drive"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >drive</a></li>
    <li class="divider"></li>
    <li value="qing"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >qing</a></li>
   </ul>
  </div>

我的目的是當我點擊這個下拉菜單中的某個選項的時候，能夠自動獲取到值，填寫到input中，這樣就省去了之前版本只有一個input還得用戶自己手動打的麻煩。怎么做同步呢，當然是用js去做個監(jiān)聽了，也比較簡單。

$("#project").on("click", "li", function(){
 $("#proname").val($(this).text());
});

這段代碼的意思就是，監(jiān)聽ul的點擊事件，對象是下面的li元素，當點擊li的時候，獲取到li中的text文本賦值給input輸入框的value，實現(xiàn)的效果如下圖。

以上這篇JS實現(xiàn)點擊下拉菜單把選擇的內(nèi)容同步到input輸入框內(nèi)的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。

本文名稱：JS實現(xiàn)點擊下拉菜單把選擇的內(nèi)容同步到input輸入框內(nèi)的實例
分享URL：http://bm7419.com/article12/jjdjgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站設(shè)計公司、Google、靜態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)