CODEWITHSUNDEEP
javascriptjqueryhtml
James
James

Reputation: 132

two select options - validate and hide option not needed

I'm trying to show a set of select option base on what is selected on another select option. I have some issue to understand the logic with the js script.

Example: Any advice how to hide the other options which are not used

if TV show only value device, tsignal, blackscreen, other

If Radio show only the value: device, rsignal, other

$('#new').find('option').not('[value="device"]').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>

<form>
  <table>
    <tbody>
      <tr>
        <td>Issue:</td>
        <td>
          <select required id="test" name="test">
            <option value="" disabled selected>Choose an option</option>
            <option value="tv">tv</option>
            <option value="radio">radio</option>
          </select>
        </td>
      </tr>
      <tr>
        <td height="50px" colspan="3"></td>
      </tr>
      <tr>
        <td>What is the problem?</td>
        <td>
          <select id="new" name="new">
            <option value="" disabled selected>Select an option</option>
            <option value="device">device is defect</option>
            <option value="rsignal">radio has no signal</option>
            <option value="tsignal">radio has no signal</option>
            <option value="blackscreen">tv blackscreen</option>
            <option value="other">Other</option>
          </select>
        </td>
      </tr>
      <tr>
        <td><input type="submit" class="submit" value="submit"></td>
      </tr>
    </tbody>
  </table>
</form>

Upvotes: 0

Views: 172

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29287

I guess that you meant to use .change so when #test dropdown changed you check what its value and based on that show / hide options, right?

$('#test').change(function() {
  const options = $('#new').find('option').show();
  if ($(this).val() === 'tv') {
    options.not('[value="device"]').hide();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>

<form>
  <table>
    <tbody>
      <tr>
        <td>Issue:</td>
        <td>
          <select required id="test" name="test">
            <option value="" disabled selected>Choose an option</option>
            <option value="tv">tv</option>
            <option value="radio">radio</option>
          </select>
        </td>
      </tr>
      <tr>
        <td height="50px" colspan="3"></td>
      </tr>
      <tr>
        <td>What is the problem?</td>
        <td>
          <select id="new" name="new">
            <option value="" disabled selected>Select an option</option>
            <option value="device">device is defect</option>
            <option value="rsignal">radio has no signal</option>
            <option value="tsignal">radio has no signal</option>
            <option value="blackscreen">tv blackscreen</option>
            <option value="other">Other</option>
          </select>
        </td>
      </tr>
      <tr>
        <td><input type="submit" class="submit" value="submit"></td>
      </tr>
    </tbody>
  </table>
</form>

Notice Hide option is not cross browser

Upvotes: 1

Related Questions