jQuery addClass example

Change class name on click in jQuery

by ChrisStanyon

HTML

<input id="result">

<select size=5>
    <option>Word 1</option>
    <option>Word 2</option>
    <option>Word 3</option>
    <option>Word 4</option>
    <option>Word 5</option>
</select>

<select size=5>
    <option>Word 6</option>
    <option>Word 7</option>
    <option>Word 8</option>
    <option>Word 9</option>
    <option>Word 10</option>
</select>

<select size=5>
    <option>Word 11</option>
    <option>Word 12</option>
    <option>Word 13</option>
    <option>Word 14</option>
    <option>Word 15</option>
</select>

CSS

textarea { display: block; }

JavaScript

$('select').change(function() {
  let input = $('#result')
  let pos = input[0].selectionStart
  let word = $('option:selected', this)
  let newText = input.val().slice(0, pos) + word.val() + ' ' + input.val().slice(pos)

	input.focus().val(newText)
  word.prop('selected', false)
})