CODEWITHSUNDEEP
jquery
Chris
Chris

Reputation: 127

Remove repetition in jQuery?

I have a few select menus on a page:I pass the selected value to a hidden input type with jQuery. In total I have 4 but is there a way I could just use on function which targets the select menu being used and passes the value accordingly. I've used the same 'format' for IDs and vars so I reckon it can be done. Thanks.

Below is just a chunk of what I using at the moment. It works as expected but surely there must be a way to use just one function?

jq('#stateSelect').change(function() {
    var myState = jq(this).val();
    jq('#stateChosen').val(myState);
    console.log(myState);
  });

  jq('#countySelect').change(function() {
    var myCounty = jq(this).val();
    jq('#countyChosen').val(myCounty);
    console.log(myCounty);
  });

  jq('#genderSelect').change(function() {
    var myGender = jq(this).val();
    jq('#genderChosen').val(myGender);
    console.log(myGender);
  });

  jq('#whoamiSelect').change(function() {
    var myWhoami = jq(this).val();
    jq('#whoamiChosen').val(myWhoami);
    console.log(myGender);
  });

Upvotes: 0

Views: 67

Answers (4)

epascarello
epascarello

Reputation: 207511

You can use a for loop, data attributes, structure of the html, or countless other options.

For Loop not the best solution, but works

["a","b"].forEach( function(val){ 
    $("#" + val + "Select").on("change", function() {     
       $("#" + val + "Chosen").val($(this).val()); 
    }).trigger("change");  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="aSelect">
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<input id="aChosen" />
<br/>
<select id="bSelect">
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<input id="bChosen" />

Data Attribute A better solution since it uses a hard coded reference that will not change. 

$("select[data-for]").on("change", function() {
    var sel = $(this);
    var txt = sel.data("for");
    $(txt).val(sel.val());
}).trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-for="#asdf">
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<input id="asdf" />
<br/>
<select data-for="#qwerty">
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<input id="qwerty" />

HTML Structure I have no idea what your structure is, but you could just use a relationship with selecting. This way is not great since it would break if your html structure changes. 

$("select").on("change", function() {
    var sel = $(this);
    sel.next("input").val(sel.val());
}).trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<input id="asdf" />
<br/>
<select>
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<input id="qwerty" />

Parse the id You can easily strip the "Select" off the string and replace it with "Chosen" to build your selector to pick the textbox.

$("select[id$='Select']").on("change", function(){
   var sel = $(this);
   var prefix = this.id.replace(/Select$/,"");
   $("#" + prefix + "Chosen").val(sel.val());
}).trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="aSelect">
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<input id="aChosen" />
<br/>
<select id="bSelect">
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<input id="bChosen" />

As I stated, there are a bunch of ways to do it and I am sure there are a bunch more.

Upvotes: 0

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

Use .data()

  • Apply a common class to select elements as commonSelect
  • Apply different data-flag same as id of hidden inputs.

Code Example

$('.commonSelect').change(function() {
    var hiddenId = $(this).data('flag');
    $('#'+hiddenId).val($(this).val());
});


$('.commonSelect').change(function() {
    var hiddenId = $(this).data('flag');
    $('#'+hiddenId).val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-flag="asdf" class="commonSelect">
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<input id="asdf" />
<br/>
<select data-flag="qwerty" class="commonSelect">
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<input id="qwerty" />

Upvotes: 3

moni_dragu
moni_dragu

Reputation: 1163

You could build a general function, but you might need to also adapt your html.

Html sample:

<select class="jqSelect" id="state">...</select>
<input type="text" name="stateChosen" id="stateChosen" value="" />

And the script:

  jq('.jqSelect').change(function() {
    var myValue = jq(this).val();
    var myId = jq(this).attr('id');
    jq('#'+myId+'Chosen').val(myValue);
  });

Upvotes: 1

rob
rob

Reputation: 2146

To clarify, you want to use the same Jquery function to get data from a variety of select boxes, correct? If so, I would give all selectors a class ('You could also use input selectors)

So if you give all checkboxes a class of selector, and keep your ID so you know what is selected

You could do something like

 $('.selector).on('change, function(){
    active_selector = $(this).attr('id')
    value = $(this).val() 

  });

Upvotes: 0

Related Questions