CODEWITHSUNDEEP
jqueryhtml
V4n1ll4
V4n1ll4

Reputation: 6099

Jquery update div on select change

In my HTML form, when the user selects a new value from a select drop down it should update the closest div with the class .ach1. There are no errors being thrown in console, it just doesn't add the value.

/**
 * When user selects an activity, update closest row.
 */
$(document).on('change', '.timesheet_activity', function (e) {
    var topActivity = $(this).closest('.ach1');
    var bottomActivity = $(this).closest('.ach2');
    var value = $(this).val();

    if (value == 'travel') {
        var topActivityValue = 'Travel In';
        var bottomActivityValue = 'Travel Out';
    } else if (value == 'shift') {
        var topActivityValue = 'Day Shift';
        var bottomActivityValue = 'Night Shift';
    } else {
        var topActivityValue = 'From';
        var bottomActivityValue = 'To';
    }

    topActivity.html(topActivityValue);
    bottomActivity.html(bottomActivityValue);
});

The HTML is:

...

<tr>
    <select class="inp timesheet_activity" name="activity">
        <option value="travel">Travel In / Out</option>
        <option value="shift">Day / Night Shift</option>
        <option value="from">From / To</option>
    </select>
</tr>

<tr>
    <td class="split-row nowrap">
        <div class="activity-heading ach1"><i>Travel In</i></div>
    </td>
</tr>
<tr class="coltot">
    <td class="split-row nowrap">
        <div class="activity-heading ach2"><i>Travel Out</i></div>
    </td>
</tr>
...

Upvotes: 0

Views: 175

Answers (1)

Tushar
Tushar

Reputation: 87233

<select> should be wrapped in <td>. Otherwise it'll be moved outside of the table as this is invalid markup.

Demo

$(document).on('change', '.timesheet_activity', function(e) {
  // Get the two tr elements
  var topActivity = $(this).closest('tr').next().find('.ach1 i'),
    bottomActivity = $(this).closest('tr').siblings('.coltot').find('.ach2 i');

  // Get the selected option value
  var value = $(this).val();

  if (value == 'travel') {
    var topActivityValue = 'Travel In';
    var bottomActivityValue = 'Travel Out';
  } else if (value == 'shift') {
    var topActivityValue = 'Day Shift';
    var bottomActivityValue = 'Night Shift';
  } else {
    var topActivityValue = 'From';
    var bottomActivityValue = 'To';
  }

  // Update the values
  topActivity.html(topActivityValue);
  bottomActivity.html(bottomActivityValue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select class="inp timesheet_activity" name="activity">
        <option value="travel">Travel In / Out</option>
        <option value="shift">Day / Night Shift</option>
        <option value="from">From / To</option>
      </select>
    </td>
  </tr>
  <tr>
    <td class="split-row nowrap">
      <div class="activity-heading ach1"><i>Travel In</i>

      </div>
    </td>
  </tr>
  <tr class="coltot">
    <td class="split-row nowrap">
      <div class="activity-heading ach2"><i>Travel Out</i>

      </div>
    </td>
  </tr>
</table>

Here's optimized code:

Demo

// Object that stores all values
var obj = {
  travel: {
    from: 'Travel In',
    to: 'Travel Out'
  },
  shift: {
    from: 'Day Shift',
    to: 'Night Shift'
  }
};


$(document).on('change', '.timesheet_activity', function(e) {
  var parent = $(this).closest('tr'),
    firstEl = parent.next().find('.ach1 i'),
    secondEl = parent.siblings('.coltot').find('.ach2 i');

  var value = $(this).val();

  // Get value from object if available, else use default value
  var from = obj[value] ? obj[value].from : 'From',
    to = obj[value] ? obj[value].to : 'To';

  firstEl.html(from);
  secondEl.html(to);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select class="inp timesheet_activity" name="activity">
        <option value="travel">Travel In / Out</option>
        <option value="shift">Day / Night Shift</option>
        <option value="from">From / To</option>
      </select>
    </td>
  </tr>
  <tr>
    <td class="split-row nowrap">
      <div class="activity-heading ach1"><i>Travel In</i>

      </div>
    </td>
  </tr>
  <tr class="coltot">
    <td class="split-row nowrap">
      <div class="activity-heading ach2"><i>Travel Out</i>

      </div>
    </td>
  </tr>
</table>

Upvotes: 4

Related Questions