Jquery select 在不使用值的情况下进行更改

Question

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

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

Fiddle: 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

您可以在 option

中使用 data-attr 而不是 value

$('#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>