0

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>
Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
James
  • 132
  • 12

1 Answers1

1

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

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
  • Can't hide option in some browsers...IE and Safari for example – charlietfl Jul 15 '19 at 17:21
  • You mean write all the logic for them. They didn't have to make an effort at all. https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users – Taplar Jul 15 '19 at 17:23
  • We're not here to give people code, especially if they have not made an effort. For the most part the OP gave the markup and asked how to do something. They did not state what issues they were having doing it themselves. It effectively reads as a coding request. They are less likely to learn to do it themselves, and dig for answers, if we simply give them the answer. – Taplar Jul 15 '19 at 17:25
  • Thank you Mosh Freu for the logic any advice! right now only if i select tv the device is showing what about display two option? is not working if i add same if statement with another option.. any advice? – James Jul 15 '19 at 17:30
  • Do you mean, that you want to display 2 options, not just `device is defect`? If so, [this](https://api.jquery.com/multiple-selector/) will give you the answer. Let me know if it's working for you. – Mosh Feu Jul 15 '19 at 17:33
  • thx for the reply, if i choose tv i have in the other select option only `device is defect?`. If i want to add another option by choosing tv like `tv blackscreen` is not working by adding = `options.not('[value="blackscreen"]').hide();` any advice? Goal is to have 2-3 option thank you – James Jul 15 '19 at 17:40
  • No, you have to concat the selector like the link I sent you. Or, even more accurate example: https://codepen.io/edhenderson/pen/suezm. – Mosh Feu Jul 15 '19 at 17:50