Question

在我的HTML表单中，当用户从选择下拉列表中选择一个新值时，它应该使用类.ach1更新最近的div。在控制台中没有抛出任何错误，它只是没有添加值。

/**
 * 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);
});

HTML是：

...

<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>
...

Answer 1

<select>应该包含在<td>中。否则它将移到table之外，因为这是无效的标记。

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>

这是优化的代码：

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>

Jquery在选择更改时更新div

1 个答案: