10

What I have:

  1. I have a text box that assumes the value of whatever option is selected in a corresponding select box.
  2. I'm repeating the exact same function for the on change, mouseup, mousedown, mouseout, keyup and keydown events

What I need:

Can the aforesaid functions be combined into one to produce more efficient code? It just seems terribly repetitious.

My code:

JSFiddle: http://jsfiddle.net/clarusdignus/843YW/1/

HTML:

<label>Industry:</label>
<select name="industry">
    <option selected="selected"></option>
    <option value="ag">Agriculture</option>
    <option value="co">Corporate</option>
</select>
<input type="text" disabled="disabled" name="industryspecifier"/>

jQuery:

$('select[name=industry]').on('change', function() {
    $('[name=industryspecifier]').val($(':selected',this).val());
});

$('select[name=industry]').on('mouseup', function() {
    $('[name=industryspecifier]').val($(':selected',this).val());
});

$('select[name=industry]').on('mousedown', function() {
    $('[name=industryspecifier]').val($(':selected',this).val());
});

$('select[name=industry]').on('mouseout', function() {
    $('[name=industryspecifier]').val($(':selected',this).val());
});


$('select[name=industry]').on('keydown', function() {
    $('[name=industryspecifier]').val($(':selected',this).val());
});

$('select[name=industry]').on('keyup', function() {
    $('[name=industryspecifier]').val($(':selected',this).val());
});
Clarus Dignus
  • 3,847
  • 3
  • 31
  • 57
  • 1
    I don't understand why you want to do this. The change event is what is fired when the select box changes. Other than that you're updating your input with the same value. – Barbara Laird Apr 02 '14 at 20:32
  • @BarbaraLaird - Hi Barbara, thanks for the inquiry. The value of the selected ` – Clarus Dignus Apr 14 '14 at 22:06
  • 1
    My point is that the change event is fired when the selection of a select element changes. Add console.log(event.type + ' ' + $(':selected',this).val()); to your event handlers and watch what happens. You're catching a whole bunch of events and the selected item hasn't changed yet. So you're making the browser do a whole bunch of unnecessary work. – Barbara Laird Apr 14 '14 at 23:13
  • @BarbaraLaird - You're correct. Originally, for testing purposes, the text box wasn't disabled which made the `keyup` and `keydown` events necessary for conveniently toggling through the options and simultaneously viewing the produced value in the text box (without having to click out of the select box). Considering the text box is disabled, having trialled your recommendation, the `change` event alone seems to be doing the trick. I could have sworn there was a more legitimate reason as to why I first adopted this pedantic approach with select boxes in general but it honestly escapes me. – Clarus Dignus Apr 15 '14 at 12:21

1 Answers1

15

Just combine them with spaces:

$('select[name=industry]').on('change mouseup mousedown mouseout keydown', function() {
    $('[name=industryspecifier]').val($(':selected',this).val());
});

jsFiddle example

As the docs for .on() state:

events Type: String One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

j08691
  • 204,283
  • 31
  • 260
  • 272