如何将两个字段组合成第三个标签？

Question

So I have two fields, a regular input and a dropdown. I want these two fields to be combined into a third field (which is to create tags). In the third field, the tags can be removed by pressing an X, but nothing can be entered in there otherwise.

I've seen this done somewhere, but for the life of me, I can't remember where or what this process is called so I can't find the plugin.

This is the furthest I can get. I feel like it is a jQuery plugin which can do it, but, I'm not sure.

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
 <select id="lname">
  <option value="Bryant">Bryant</option>
  <option value="oneal">O'Neal</option>
  <option value="Jordan">Jordan</option>
  <option value="Pippen">Pippen</option>
</select><br><br>

<input type="submit" value="Combine">
<br><br>
   <label for="fullname">Full name tags:</label>
  <input type="text" id="fullname" name="fullname" disabled><br><br>

</form>

Answer 1

Try this

 function myFunction(){ var fname = $('#fname').val(); var lname = $('#lname').val(); $('#fullname').val(fname + " " + lname); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <form> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <select id="lname" > <option value="Bryant">Bryant</option> <option value="oneal">O'Neal</option> <option value="Jordan">Jordan</option> <option value="Pippen">Pippen</option> </select><br><br> <input type="button" value="Combine" onclick="myFunction()"> <br><br> <label for="fullname">Full name tags:</label> <input type="text" id="fullname" name="fullname" disabled><br><br> </form>