0

I've read numerous posts that tried solving this using .hide() and .show() but I had issues with those on Safari and Chrome so I'm really looking for a solution that works on all browsers (sounds like remove and append is the way to go but I can't quite figure out how to make it work).

Basically I have 3 drop-downs with the same options/values:

<select class="rating">
    <option value=""></option>
    <option value="1">1 Star</option>
    <option value="2">2 Star</option>
    <option value="3">3 Star</option>
</select>

<select class="rating">
    <option value=""></option>
    <option value="1">1 Star</option>
    <option value="2">2 Star</option>
    <option value="3">3 Star</option>
</select>

<select class="rating">
    <option value=""></option>
    <option value="1">1 Star</option>
    <option value="2">2 Star</option>
    <option value="3">3 Star</option>
</select>

If "1 Star" is selected from the first drop-down I would like it to be removed from the second two drop-downs only leaving two options left. If "3 Star" is then selected from the second drop-down the last one should only have one option left. The below jQuery works perfect on Firefox but I need it to work on all browsers so instead of .hide() and .show() I'm thinking options need to be removed and added back depending on the selections made.

$("select.rating").change(function () {
    $("select.rating option[value='" + $(this).data('index') + "']").show();
    $(this).data('index', this.value);
    $("select.rating option[value='" + this.value + "']:not([value=''])").hide();
    $(this).find("option[value='" + this.value + "']:not([value=''])").show();
});

Help is greatly appreciated!

Zoolander
  • 1
  • Or the vice versa is tru also that when selected from drop-down 2 then 1 and 3 need to be changed? Or only 2,3 will changed based on selection in first-one – Alive to die - Anant Sep 13 '17 at 07:49
  • @Zoolander Hope this helps - http://jsfiddle.net/BUuZv/2/ (JSFiddle taken from (https://stackoverflow.com/questions/9979025/remove-add-select-box-option-if-other-selection-changes) – Phani Kumar M Sep 13 '17 at 09:35

0 Answers0