jQuery - How to combine Two select lists into One text input?

user_871614 0
Viewed 117

I've got two select lists I'm trying to combine into one text input. (https://jsfiddle.net/ecg6a3fL)

I got it working for the value, but not the text for some reason.

Changing it to .text() rather than .val() produces an odd result (showing Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec , 2020 2021 )

In addition, I have these separated by a "comma space"... if anyone can help for this delimiter to not show if only one of either select box is selected, that would be very much appreciated!

An example goal is for it to display: "Jan, 2020" or "Jan" or "2020"

Thank you for your help!

HTML and jQuery:

$('#edit-field-report-last-seen-und-0-value-month, #edit-field-report-last-seen-und-0-value-year').change(function() {
   var combined = $('#edit-field-report-last-seen-und-0-value-month').text() +', '+ $('#edit-field-report-last-seen-und-0-value-year').text();
   $("#edit-field-report-last-seen-cached-und-0-value").val(combined);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="edit-field-report-last-seen-und-0-value" class="date-padding clearfix">
    <div class="control-group form-type-select form-item-field-report-last-seen-und-0-value-month form-item">
      <label for="edit-field-report-last-seen-und-0-value-month" class="control-label">Month </label>
      <div class="controls">
        <div class="date-month">
          <select class="date-clear form-select" id="edit-field-report-last-seen-und-0-value-month" name="field_report_last_seen[und][0][value][month]">
            <option value="" selected="selected"></option>
            <option value="1">Jan</option>
            <option value="2">Feb</option>
            <option value="3">Mar</option>
            <option value="4">Apr</option>
            <option value="5">May</option>
            <option value="6">Jun</option>
            <option value="7">Jul</option>
            <option value="8">Aug</option>
            <option value="9">Sep</option>
            <option value="10">Oct</option>
            <option value="11">Nov</option>
            <option value="12">Dec</option>
          </select>
        </div>
      </div>
    </div>
    <div class="control-group form-type-select form-item-field-report-last-seen-und-0-value-year form-item">
      <label for="edit-field-report-last-seen-und-0-value-year" class="control-label">Year </label>
      <div class="controls">
        <div class="date-year">
          <select class="date-clear form-select" id="edit-field-report-last-seen-und-0-value-year" name="field_report_last_seen[und][0][value][year]">
            <option value="" selected="selected"></option>
            <option value="2020">2020</option>
            <option value="2021">2021</option>
          </select>
        </div>
      </div>
    </div>
  </div>
  <input class="text-full form-text" type="text" id="edit-field-report-last-seen-cached-und-0-value" name="field_report_last_seen_cached[und][0][value]" value="" size="20" maxlength="50">

jquery javascript
1 Answers

You can try like below :

$('#edit-field-report-last-seen-und-0-value-month, #edit-field-report-last-seen-und-0-value-year').change(function() {
  $("#edit-field-report-last-seen-cached-und-0-value").val($("#edit-field-report-last-seen-und-0-value select").map(function() {
    //not first value...
    if ($(this).val() != "") {
      return $(this).find("option:selected").text()
    }
  }).get().join(', ')); //join values

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="edit-field-report-last-seen-und-0-value" class="date-padding clearfix">
  <div class="control-group form-type-select form-item-field-report-last-seen-und-0-value-month form-item">
    <label for="edit-field-report-last-seen-und-0-value-month" class="control-label">Month </label>
    <div class="controls">
      <div class="date-month">
        <select class="date-clear form-select" id="edit-field-report-last-seen-und-0-value-month" name="field_report_last_seen[und][0][value][month]">
          <option value="" selected="selected"></option>
          <option value="1">Jan</option>
          <option value="2">Feb</option>
          <option value="3">Mar</option>
          <option value="4">Apr</option>
          <option value="5">May</option>
          <option value="6">Jun</option>
          <option value="7">Jul</option>
          <option value="8">Aug</option>
          <option value="9">Sep</option>
          <option value="10">Oct</option>
          <option value="11">Nov</option>
          <option value="12">Dec</option>
        </select>
      </div>
    </div>
  </div>
  <div class="control-group form-type-select form-item-field-report-last-seen-und-0-value-year form-item">
    <label for="edit-field-report-last-seen-und-0-value-year" class="control-label">Year </label>
    <div class="controls">
      <div class="date-year">
        <select class="date-clear form-select" id="edit-field-report-last-seen-und-0-value-year" name="field_report_last_seen[und][0][value][year]">
          <option value="" selected="selected"></option>
          <option value="2020">2020</option>
          <option value="2021">2021</option>
        </select>
      </div>
    </div>
  </div>
</div>
<input class="text-full form-text" type="text" id="edit-field-report-last-seen-cached-und-0-value" name="field_report_last_seen_cached[und][0][value]" value="" size="20" maxlength="50">

user_106064000
Related