search

Home >Web Front-end >JS Tutorial >Detailed explanation of how jQuery implements clicking the value in the drop-down box to accumulate it into the text box

Detailed explanation of how jQuery implements clicking the value in the drop-down box to accumulate it into the text box

小云云
小云云Original
2018-01-19 16:48:141515browse

This article mainly introduces jQuery's method of adding the value in the click drop-down box to the text box, involving jQuery event binding and dynamic acquisition and operation of page element attributes. Friends who need it can refer to it. I hope it can help. to everyone.

Let’s take a look at the running effect first:

The specific code is as follows: 


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <title>www.jb51.net jQuery添加下拉框元素</title>
 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<!-- 加在body标签中屏蔽右键 oncontextmenu="return false" -->
<body >
<select name="city" id="s2" lay-search>
 <option value="">请选择</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=&#39;&#39;;
  $("#add_subject").on("click",function(){
    seleVal+=$("#s2>option:selected").val()+&#39;,&#39;;
    $("#subject").val(seleVal);
  })
</script>
</body>
</html>

Related recommendations ：

jQuery implements select drop-down box to obtain the currently selected text

jQuery custom multi-select drop-down box effect implementation method

Talk about how to use jQuery to implement custom multi-select drop-down box effects

The above is the detailed content of Detailed explanation of how jQuery implements clicking the value in the drop-down box to accumulate it into the text box. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to implement jQuery simple front-end search functionNext article：How to implement jQuery simple front-end search function

Related articles

See more