快捷導(dǎo)航

jQuery實(shí)現(xiàn)點(diǎn)擊下拉框中的值累加到文本框中的方法示例

更新時(shí)間：2017年10月28日 11:50:02 作者：我是高手高手高高手

這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊下拉框中的值累加到文本框中的方法,涉及jQuery事件綁定及頁(yè)面元素屬性動(dòng)態(tài)獲取與操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)點(diǎn)擊下拉框中的值累加到文本框中的方法。分享給大家供大家參考，具體如下：

先來(lái)看看運(yùn)行效果：

具體代碼如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <title>m.fzitv.net jQuery添加下拉框元素</title>
 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<!-- 加在body標(biāo)簽中屏蔽右鍵 oncontextmenu="return false" -->
<body >
<select name="city" id="s2" lay-search>
 <option value="">請(qǐng)選擇</option>
 <option value="layer">layer</option>
 <option value="form">form</option>
 <option value="layim">layim</option>
</select>
<button class="layui-btn " type="button" id="add_subject">添加</button>
<input name="subject" id="subject" type="text" data-label="," value="">
<script>
  var seleVal='';
  $("#add_subject").on("click",function(){
    seleVal+=$("#s2>option:selected").val()+',';
    $("#subject").val(seleVal);
  })
</script>
</body>
</html>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

讀jQuery之七判斷點(diǎn)擊了鼠標(biāo)哪個(gè)鍵的代碼
jQuery中的which即可以是鍵盤(pán)的鍵值，也可以是鼠標(biāo)的鍵值。
2011-06-06
JQuery EasyUI 對(duì)話框的使用方法
jQuery EasyUI 對(duì)話框(Dialog)用法與EasyUI的窗口用法極為相似，最終的效果圖也只與窗口的效果圖差幾個(gè)按鈕
2010-10-10
Jquery Validation插件防止重復(fù)提交表單的解決方法
在項(xiàng)目開(kāi)發(fā)中，測(cè)試人員報(bào)告缺陷說(shuō)，即時(shí)有表單驗(yàn)證，但是如果快速點(diǎn)擊兩下“提交”按鈕，系統(tǒng)會(huì)產(chǎn)生兩條相同的記錄。
2010-03-03
jquery圖片上下tab切換效果
圖片上下切換效果,學(xué)習(xí)jquery的朋友可以參考下。
2011-03-03
jquery 之 $().hover(func1, funct2)使用方法
.hover(func1, func2) 的效果等效于： mouseenter(), mouseleave()
2012-06-06
最佳6款用于移動(dòng)網(wǎng)站開(kāi)發(fā)的jQuery 圖片滑塊插件小結(jié)
隨著智能手機(jī)的普及，越來(lái)越多的用戶喜歡通過(guò)手機(jī)中瀏覽網(wǎng)頁(yè)。今天這篇文章為大家推薦最佳6款用于移動(dòng)應(yīng)用的 jQuery 圖片滑塊插件，這些插件很好的處理了觸屏事件，效果平滑，幫助你構(gòu)建用戶體驗(yàn)良好的移動(dòng)網(wǎng)站
2012-07-07
jQuery Ajax 實(shí)例代碼 ($.ajax、$.post、$.get)
下面小編就為大家?guī)?lái)一篇jQuery Ajax 實(shí)例代碼 ($.ajax、$.post、$.get)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考
2016-04-04
jquery插件實(shí)現(xiàn)鼠標(biāo)隱藏
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)鼠標(biāo)隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
基于jQuery的簡(jiǎn)單九宮格實(shí)現(xiàn)代碼
聽(tīng)朋友說(shuō)要作個(gè)九宮格，我也就隨便寫(xiě)一個(gè)，等待完善
2012-08-08
jquery ajax提交表單數(shù)據(jù)的兩種實(shí)現(xiàn)方法
貌似AJAX越來(lái)越火了，作為一個(gè)WEB程序開(kāi)發(fā)者要是不會(huì)這個(gè)感覺(jué)就要落伍，甚至有可能在求職的時(shí)候?qū)冶惶蕴?。我也是一個(gè)WEB程序開(kāi)發(fā)者，當(dāng)然我也要“隨波逐流”一把，不然飯碗不保啊！
2010-04-04