Masquer une section d'un tableau dans un formulaire dépendant du choix d'un autre champ

Question

Je voudrais afficher une ligne particulière dans un formulaire uniquement lorsque l'option sélectionnée contient le mot "split".

J'ai utilisé une classe sur la ligne à masquer et je suis arrivé jusqu'ici, mais je n'arrive pas à le faire fonctionner.

$(document).ready(function() {
    $(".split td").hide();

    $('#os0').change(function() {
        var val = $(this).val();

        if (val == "*split*") {
            $('.split td').show();
        } else {
            $('.split td').hide();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<tr>
    <td>
        <input type="hidden" name="product[]" value="Type" /> Type:
        <select name="product[]" id="os0">
            <option value="Anodised closed">Anodised closed </option>
            <option value="Plain closed">Plain closed</option>
            <option value="Black filled closed">Plain closed Black filled </option>
            <option value="Anodised split">Anodised split</option>
            <option value="Plain split">Plain split</option>
            <option value="Black filled split">Plain split Black filled </option>        
        </select>
    </td>
</tr>       
<tr>
    <td class="split">
        <input type="hidden" name="product[]" value="yrno" />Please specify year if required:
        <input type="text" name="product[]" id="os9" onkeypress="return numbersonly(this, event)" maxlength="4" class="formfill" style="width: 50px;" />
    </td>
</tr>

Quelqu'un peut-il me dire où je me trompe, s'il vous plaît ?)

Answer 1

Votre sélection $(".split td") doit être comme $("td.split")

et de rechercher l'existence de substring utiliser indexOf() qui renvoie d'abord index de la sous-chaîne dans la chaîne principale.

$(document).ready(function() {
  $('td.split').hide();
  $('#os0').change(function() {
    var val = $(this).val();
    if (val.indexOf("split") > -1) {
      $('td.split').show();
    } else {
      $('td.split').hide();
    }
  });
});

td.split {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="hidden" name="product[]" value="Type" />Type:
      <select name="product[]" id="os0">
        <option value="Anodised closed">Anodised closed</option>
        <option value="Plain closed">Plain closed</option>
        <option value="Black filled closed">Plain closed Black filled</option>
        <option value="Anodised split">Anodised split</option>
        <option value="Plain split">Plain split</option>
        <option value="Black filled split">Plain split Black filled</option>
      </select>
    </td>
  </tr>
  <tr>
    <td class="split">
      <input type="hidden" name="product[]" value="yrno" />Please specify year if required:
      <input type="text" name="product[]" id="os9" onkeypress="return numbersonly(this, event)" maxlength="4" class="formfill" style="width: 50px;" />
    </td>
  </tr>
</table>