Jquery在不使用值的情况下选择更改

Question

我有一些jquery代码使用on change函数来显示另一个选择框。目前，它正在使用<option value="">，我如何使用不同的属性，如类（或者数据索引或类似）？

我不能使用值，因为他们将在表单中发布不同的数据。

小提琴：http://jsfiddle.net/ks6cv/1466/

$('#Picker').on('change', function() {
  if ($(this).val() === "colour") {
    $("#colour").show()
  } else {
    $("#colour").hide()
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <label for="Picker">Picker</label>
      <select name="Picker" id="Picker">
         <option></option>
         <option value="colour">select colour</option>
         <option value="spa">select size</option>
      </select>
    </td>
  </tr>
  <tr id="colour" style="display:none;">
    <td>
      <label for="specify">Colour</label>
      <select id="QuoteSALES_LOCATION_ID_4" name="Quote.SALES_LOCATION_ID" value="Email / web">
        <option></option>
        <option>colour 1</option>
        <option>colour 2</option>
    </select>
    </td>
  </tr>
</table>

Answer 1

你可以在data-attr中使用value而不是option

$('#Picker').on('change', function() {
  $(this).find(':selected').data("value") === "colour" ?
    $("#colour").show() : $("#colour").hide()
  $(this).find(':selected').data("value") === "spa" ?
    $("#spa").show() : $("#spa").hide()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <label for="Picker">Picker</label>
      <select name="Picker" id="Picker">
         <option></option>
         <option data-value="colour">select colour</option>
         <option data-value="spa">select size</option>
      </select>
    </td>
  </tr>

  <tr id="colour" style="display:none;">
    <td>
      <label for="specify">Colour</label>
      <select id="QuoteSALES_LOCATION_ID_4" name="Quote.SALES_LOCATION_ID" value="Email / web">
        <option></option>
        <option>colour 1</option>
        <option>colour 2</option>
    </select>
    </td>
  </tr>

  <tr id="spa" style="display:none;">
    <td>
      <label for="spa-test">spa choice</label>
      <select id="spa-test" name="spa-test" value="Email / web">
        <option></option>
        <option>spa 1</option>
        <option>spa 2</option>
    </select>
    </td>
  </tr>
</table>